Cypress – wie findet man nach Textinhalten?

In Cypress möchte ich eine Schaltfläche aus einer Gruppe von Schaltflächen basierend auf ihrem Textinhalt auswählen. Wie kann ich es tun? Hier ist mein Ansatz:

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;
  });

Das Problem, das ich jetzt habe, ist, dass ich die Nullen aus dem Elementarray herausfiltern muss. Gibt es einen weniger komplizierten Weg?

Dieser Code ergibt das DOM-Element mit YOUR_BUTTON_CLASS welches den Text „Kunde“ enthält. Ist es das, wonach Sie suchen?

cy.get('.YOUR_BUTTON_CLASS').contains('Customer');

Hier die Dokumentation für .contains Cypress-Befehl.

Oder vielleicht ist es eine noch raffiniertere Lösung, Folgendes zu verwenden:

cy.contains('YOUR_BUTTON_CLASS', 'Customer');

Dies ist seitdem möglich contains() kann 2 Argumente enthalten. Und wenn es zwei Argumente erhält, ist das erste immer das Element und das zweite der Text.

Eine weitere Option, die in den vorherigen Antworten hier nicht erwähnt wurde.

Verwenden Testbibliothek/Cypress-Testbibliothek

Nach der Installation einfach in Cypress importieren commands.js:

import '@testing-library/cypress/add-commands'

Und in deinen Tests

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");
});

Das ist ziemlich einfach und einfach zu bedienen. Wir verwenden dies in unserer Produktionsstätte zusammen mit der Reaktionstestbibliothek. Sehr empfehlenswert 🙂

Die akzeptierte Antwort „kann“ funktionieren. Allerdings: Wenn das Element beim ersten Versuch nicht sichtbar ist, kann das Element bei nachfolgenden Wiederholungsversuchen nicht gefunden werden.

Sehen: https://github.com/cypress-io/cypress/issues/3745

Cypress verwendet „Sizzle“ als Selektorbibliothek – also Folgendes:

cy.get('button:contains("FooBar")')

würde in Wiederholungsversuchen funktionieren.

Dafür gibt es mehrere Möglichkeiten

Syntaxen:

cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)

Beispiele:

cy.contains('button', 'Customer')
cy.contains('.buttonClass', 'Customer')
cy.get('button:contains("Customer")')
cy.contains('Customer')

Der einfachste Weg, dies zu tun, wäre:

cy.get('Button_Class').contains('Button_Text')

In Ihrem Fall wäre die Lösung:

cy.get('.mat-content > mat-panel-title').contains('Customer')

Hierzu gibt es eine Dokumentation Hier.