phil
En Cypress, quiero seleccionar un botón de un grupo de botones según su contenido de texto. ¿Cómo puedo hacerlo? Aquí está mi enfoque:
export const getCustomerButton = () => getNavigationSidenav()
.find('mat-expansion-panel-header')
.each(($el, index, $list) => {
const text = $el.find('.mat-content > mat-panel-title').text();
if (text === 'Customer') {
return $el;
}
return null;
});
El problema que tengo ahora es que tengo que filtrar los nulos de la matriz de elementos. ¿Hay una manera menos complicada?
DurkoMatko
Este código producirá el elemento DOM con YOUR_BUTTON_CLASS que contiene el texto ‘Cliente’. ¿Es eso lo que estás buscando?
cy.get('.YOUR_BUTTON_CLASS').contains('Customer');
Aquí la documentación para .contains comando de ciprés.
-
Tenga en cuenta que encadenar comandos como este puede causar descamación porque el
getno se vuelve a intentar después de encontrar algo, incluso si ninguno de los elementos que encuentra contiene ‘Cliente’ (ver los documentos)– JessefSpecialisterren
6 de noviembre de 2020 a las 9:39
-
Solo haciendo
cy.get('Customer')trataría de producir un elemento Cliente en cambio cual es no lo que requerimos– instinto
25 de diciembre de 2020 a las 6:48
-
Si desea obtener el recuento de elementos, es mejor usar esto, consulte este método stackoverflow.com/a/67699386/7469302
– Prasad Kavinda
7 ago 2021 a las 19:46
O tal vez una solución aún más ingeniosa es usar esto:
cy.contains('YOUR_BUTTON_CLASS', 'Customer');
Esto se puede hacer desde contains() puede contener 2 argumentos. Y si tiene dos argumentos el primero es siempre el elemento y el segundo el texto.
-
contiene el método devuelve solo el primer elemento encontrado
– El Tanadu
24 de noviembre de 2021 a las 11:28
-
y aún más simple es esto: cy.contains(‘Cliente’)
– JuanP2
23 de diciembre de 2021 a las 22:39
-
Esta debería ser la respuesta predeterminada, debido a la forma en que Cypress maneja los reintentos de consulta: “recomendamos usar cy.contains(selector, text) que se reintenta automáticamente como un solo comando”. docs.cypress.io/guides/core-concepts/…
– TotomInc
1 de julio de 2022 a las 10:30
Josué
Otra opción que no se menciona en las respuestas anteriores aquí.
Usar biblioteca-de-pruebas/biblioteca-de-pruebas-cypress
Después de la instalación, simplemente impórtelo en Cypress’ commands.js:
import '@testing-library/cypress/add-commands'
Y en tus pruebas
cy.findAllByText("Jackie Chan").click();
cy.findByText("Button Text").should("exist");
cy.findByText("Non-existing Button Text").should("not.exist");
cy.findByLabelText("Label text", { timeout: 7000 }).should("exist");
cy.get("form").within(() => {
cy.findByText("Button Text").should("exist");
});
cy.get("form").then((subject) => {
cy.findByText("Button Text", { container: subject }).should("exist");
});
Esto es bastante sencillo y fácil de usar. Usamos esto en nuestro sitio de producción junto con la biblioteca de pruebas de reacción. Altamente recomendado 🙂
-
Esto es lo que voy a usar, ¡gracias por el consejo!
–Mike Harrison
24 de febrero de 2021 a las 18:30
-
Me preguntaba antes de instalar este complemento, ¿será
cy.findByText('Button').click()producir los mismos resultados que el comando incorporadocy.contains('Button').click(). Si no, ¿cuál es la diferencia?– ebanster
1 de mayo de 2021 a las 12:24
-
Hice una prueba rápida y parece que los botones devueltos son ligeramente diferentes, mira esto captura de pantalla pero ambos funcionan como deben
– Josué
3 de mayo de 2021 a las 2:04
-
¿Hay alguna manera de
findAllByText()para apuntar solo a elementos visibles?– Kano
16 de agosto de 2022 a las 12:06
-
No probé, pero creo que puedes hacer una
.filter(':visible')?– Josué
17 de agosto de 2022 a las 0:16
flujo loco
La respuesta aceptada “puede” funcionar. Sin embargo: si el elemento no está visible en el primer intento, el elemento no se podrá encontrar en los reintentos posteriores.
Ver: https://github.com/cypress-io/cypress/issues/3745
Cypress usa “Sizzle” como biblioteca selectora, así que esto:
cy.get('button:contains("FooBar")')
funcionaría en reintentos.
Hay varias formas de hacerlo
Sintaxis:
cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)
Ejemplos:
cy.contains('button', 'Customer')
cy.contains('.buttonClass', 'Customer')
cy.get('button:contains("Customer")')
cy.contains('Customer')
La forma más sencilla de hacerlo sería:
cy.get('Button_Class').contains('Button_Text')
En tu caso, la solución sería:
cy.get('.mat-content > mat-panel-title').contains('Customer')
Hay una documentación para esto. aquí.
¿Tienes algún HTML que puedas mostrar? Veo que ya obtuviste tu respuesta, pero un poco de lo que estabas tratando de seleccionar ayudaría.
– Maccurt
19 de agosto de 2019 a las 16:02