Inhaltsverzeichnis

• Was sind Cypress-Befehle?
• UI-Interaktionsbefehle von Cypress
• Zypressen-Rechtsklick-Befehl
• Zypressen-Doppelklick-Befehl
• Cypress Click-Befehl
• Zypressen-Triggerbefehl
• Zypressentyp-Befehl
• Cypress Select-Befehl
• Cypress Check-Befehl
• Cypress Clear-Befehl
• Sind Cypress-Befehle asynchron?
• Benutzerdefinierte Cypress-Befehle
• Verketten von Assertionsbefehlen in Cypress
• Überschreiben vorhandener Cypress-Befehle
• Verkettbare Zypressenbefehle
• Übergeordneter benutzerdefinierter Befehl in Cypress
• Untergeordneter benutzerdefinierter Befehl in Cypress
• Dualer benutzerdefinierter Befehl in Cypress
• Benutzerdefinierte Cypress-Befehle mit Beispiel
• Cypress-Importbefehle
• Benutzerdefinierter Cypress-Befehl IntelliSense

Was sind Cypress-Befehle?

Cypress stellt uns APIs und Methoden zur Verfügung, um mit der Benutzeroberfläche der Anwendung zu interagieren. Sie werden als Cypress Commands bezeichnet und helfen bei der Interaktion der Webanwendung. Alle verfügbaren Befehle haben integrierte Methoden und wir werden die Methoden nur in unseren Testfällen aufrufen. Die Cypress-Befehle simulieren eine ähnliche Aktion wie ein Benutzer, der versucht, Operationen in der Anwendung auszuführen.

UI-Interaktionsbefehle von Cypress

Es gibt verschiedene Befehle von Cypress, die mit der Benutzeroberfläche interagieren. Wir werden uns die Liste aller Befehle im Detail ansehen.

• .klicken()
• .dblclick()
• .Rechtsklick()
• .Typ()
• .klar()
• .prüfen()
• .uncheck()
• .auswählen()
• .auslösen()

Cypress Click-Befehl

.klicken() – Dieser Befehl ist zu klicken Sie auf ein beliebiges Element im DOM.

Das Folgende sind die Syntaxen für Clickcommand

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

Wie Sie oben sehen können, akzeptiert der Klick Parameter wie Optionen, Position, und Koordinaten.

Optionen

Die möglichen Optionen, die zum Klicken übergeben werden können, sind

Positionen

Die verschiedenen Arten von Positionen, die an .click() übergeben werden können, sind

• Center (Standard)
• links
• Recht
• Top
• oben links
• oben rechts
• Boden
• unten links
• unten rechts

Beispiel

cy.get('btn').click() //Klick auf die Schaltfläche cy.get('btn').click({ force: true }) //Klick auf die Schaltfläche durch Übergabe der Option 'force' als true cy. get('btn').click('bottomRight') // Klicken auf die Schaltfläche unten rechts cy.get('btn').click(10, 70, { force: true }) // Klicken auf die Schaltfläche mit Positionswert und Kraft wahr

Zypressen-Doppelklick-Befehl

Doppelklick kann durch die Verwendung von . erreicht werden dblclick() Syntax in Zypressen.

Syntax

.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)

Optionen

.dblclick() akzeptiert alle Optionen, die von . akzeptiert werden .click(). Die Optionen finden Sie im obigen Abschnitt.

Positionen

Alle möglichen Positionen, die in . angegeben sind .click() sind auch verfügbar für dblclick(). Die Liste der Positionen finden Sie im obigen Abschnitt.

Beispiel

cy.get('button').dblclick() // Doppelklick auf Button cy.focused().dblclick() // Doppelklick auf Element mit Fokus cy.contains('Home').dblclick() // Double Klicken Sie auf das erste Element, das 'Home' enthält cy.get('button').dblclick('top') // Doppelklicken Sie auf die Schaltfläche an der obersten Position cy.get('button').dblclick(30, 10) // Doppelklicken Sie auf die Koordinaten von 30 und 10

Zypressen-Rechtsklick-Befehl

Dieser Cypress-Befehl klickt mit der rechten Maustaste auf das DOM-Element .rightclick() Befehl öffnet keine Kontextmenüs des Browsers.rightclick() wird verwendet, um die Handhabung von Rechtsklick-bezogenen Ereignissen in der Anwendung zu testen, wie z contextmenu.

Syntax

.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

Optionen

Wie wir oben gesehen haben, alle Optionen, die von akzeptiert werden .click() Befehl kann konfiguriert werden mit .rightclick() Befehl auch.

Positionen

Alle möglichen Positionen, die an die . weitergegeben werden können .rightclick() ist das gleiche wie die .click() erwähnt.

Beispiel

cy.get('.welcome').rightclick() // Rechtsklick auf .welcome cy.focused().rightclick() // Rechtsklick auf Element mit Fokus cy.contains('January').rightclick() / / Rechtsklick auf das erste Element, das 'Januar' enthält cy.get('button').dblclick('topRight') // Doppelklick auf die Schaltfläche oben rechts cy.get('button').dblclick(80, 20 ) // Doppelklick auf die Koordinaten von 80 und 20

Zypressentyp-Befehl

.type() Befehl gibt einen Wert in ein DOM-Element ein.

Syntax

.type(text)
.type(text, options)

Argumente

.type() akzeptiert string als Argument. Werte übergeben an .type() kann jede der unten angegebenen Sonderzeichenfolgen enthalten.

Optionen

Wir können die Objekte als Optionen übergeben, um das Standardverhalten von . zu ändern .type()

Beispiel

Lassen Sie uns Beispiele sehen für .type() Befehl

cy.get('textarea').type('Hallo') // Wert in den Textbereich eingeben cy.get('body').type('{shift}') //aktiviert die Umschalttaste cy.get ('body').type('{rightarrow}') //Ereignis eingeben Pfeil nach rechts 

Cypress Clear-Befehl

Der Clear-Befehl löscht die Werte im Eingabebereich oder im Textfeld.

Syntax

Die Syntax für den Clear-Befehl ist wie folgt.

.clear()
.clear(options)

Optionen

Wir werden uns die Optionen ansehen, die an die weitergegeben werden können .clear() Befehl.

Beispiel

Schauen wir uns die Beispiele für klare Befehle an

cy.get('[type="text"]').clear() // Eingabe vom Typ Text löschen cy.get('textarea').type('Willkommen!').clear() // Textbereich löschen cy .focused().clear() // Fokussierte Eingabe/Textbereich löschen

Cypress Check-Befehl

Der Check-Befehl überprüft oder in einfacheren Worten, die Kontrollkästchen oder Optionsfelder. Sie können die Kontrollkästchen oder Optionsfelder deaktivieren, indem Sie die .uncheck() Befehl.

Syntax

Wir werden die Syntax für den Check-Befehl in Cypress verstehen.

//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)

//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)

Optionen

Die möglichen Optionen, die an check/uncheck-Befehle übergeben werden können, sind die gleichen Optionen wie der oben aufgeführte clear-Befehl

Beispiel

Wir werden uns das Beispiel ansehen, wie wir Check- und Uncheck-Befehle verwenden können.

cy.get('[type="checkbox"]').check() // Checkbox-Element prüfen cy.get('[type="radio"]').first().check() // Erstes Radio prüfen element cy.get('[type="radio"]').check('Male') //Überprüfen Sie das Radio-Element mit Male cy.get('[type="checkbox"]').uncheck() / /Uncheck checkbox element cy.get('[type="radio"]').uncheck() //Deaktiviere das erste Radioelement cy.get('[type="checkbox"]').uncheck('Breakfast') // Deaktivieren Sie das Frühstückselement

Cypress Select-Befehl

Mit dem Befehl Zypresse auswählen können Sie Elemente innerhalb eines Schild.

Syntax

Das Folgende ist die Syntax für den Befehl select

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Optionen

Wir können die Optionen übergeben, um das Standardverhalten des select-Befehls zu ändern.

Beispiel

Schauen wir uns Beispiele für den select-Befehl an

cy.get('select').select('butterfly') // Wähle die Option 'butterfly' cy.get('select').select(0) // wähle das Element mit Index 0 aus cy.get('select ').select(['parrot', 'peacock']) //Wählt die Option Papagei und Pfau aus

Zypressen-Triggerbefehl

Trigger-Befehl hilft, jedes Ereignis auf dem Element auszulösen.

Syntax

Wir werden uns die Syntax für den Zugriff auf den Triggerbefehl ansehen

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)

Option

Trigger-Befehl akzeptiert alle Optionen, die für erwähnt werden .clear() Befehl. Darüber hinaus gibt es einige Optionen, die wir konfigurieren können, die unten aufgeführt sind.

Beispiel

Lassen Sie uns verschiedene Möglichkeiten der Verwendung .trigger() im Code.

cy.get('a').trigger('mouseover') // Mouseover-Ereignis auf einem Link auslösen cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown ausgelöst bei button 0 cy.get('button').trigger('mouseup', topRight, {bubbles: false}) //mouseup wird an der topRight-Position ausgelöst, wobei Bubble auf false gesetzt wird

Sind Cypress-Befehle asynchron?

Alle Cypress-Befehle sind asynchron. Sie werden zu einem späteren Zeitpunkt zur Ausführung in die Warteschlange gestellt und warten nicht auf die Beendigung der Befehle. Cypress-Befehle tun zum Zeitpunkt ihres Aufrufs nichts, sondern speichern sie für eine spätere Ausführung. Sie können das asynchrone Verhalten von Cypress verstehen hier

Verkettbare Zypressenbefehle

In Cypress können wir eine Reihe von Befehlen verwenden, um mit Elementen in DOM zu interagieren. Es ist zwingend erforderlich zu verstehen, wie die Verkettung von Befehlen intern funktioniert. Wenn wir Befehle in einer bestimmten Zeile verketten, verarbeitet Cypress ein Promise basierend auf der Befehlskette und gibt einen Befehl basierend auf dem Betreff an den nächsten Befehl zurück, bis die Befehlskette endet oder ein Fehler aufgetreten ist.

Cypress ermöglicht es uns, auf ein Element zu klicken oder Elemente mit der .click() or .type() Befehle durch Abrufen der Elemente mit cy.get() or cy.contains(). Sehen wir uns ein einfaches Beispiel für Verkettungsbefehle an

cy.get('textarea').type('Wie geht es dir?')

Im obigen Beispiel ist cy.get() ist ein Cypress-Befehl und .type() ist ein weiterer Befehl, bei dem wir die verketten .type() Befehl auf den cy.get() Befehl, der ihn anweist, den Betreff einzugeben, der aus dem cy.get() Element. Ebenso können wir alle oben besprochenen Befehle verketten.

Verketten von Assertionsbefehlen in Cypress

Ähnlich wie beim Verketten mehrerer Befehle mit Cypress können wir auch Assertionen mit Befehlen verketten. Behauptungen sind Befehle, mit denen Sie die erwartet Zustand oder Verhalten der Anwendung. Cypress wartet, bis die Elemente den erwarteten Zustand erreichen, und der Test schlägt fehl, wenn die Assertionen nicht erfolgreich sind. Wir werden sehen, wie wir Verkettungsbefehle verwenden können, um ein Element zu bestätigen.

cy.get('button').should('be.disabled') //erwarten, ob der Button deaktiviert werden soll cy.get('form').should('have.class', 'form-vertical') / /expect ob das Formular die Klasse 'form-vertical' haben soll cy.get('input').should('not.have.value', 'Name') // bestätigen, ob die Eingabe nicht den Wert 'Name' haben soll '

Wie oben aufgeführt, verwenden wir die cy.get() Befehl und verketten ihn mit dem .should() Assertion-Befehl, um das Verhalten basierend auf dem Ergebnis zu erwarten. Auf diese Weise können wir Kette verwenden Behauptungsbefehle in Cypress.

Benutzerdefinierte Cypress-Befehle

Cypress stellt uns APIs zur Verfügung, um Befehle basierend auf unseren Anforderungen zu erstellen. Der benutzerdefinierte Cypress-Befehl ähnelt den bereits vorhandenen Standardbefehlen, außer dass er benutzerdefinierte. Mit benutzerdefinierten Befehlen können wir mit den Befehlen herumspielen und sie basierend auf unserem Anwendungsfall verketten. Benutzerdefinierte Cypress-Befehle sind in unserem Workflow nützlich, wenn Sie sie in den Tests immer wieder verwenden müssen.

Sehen wir uns die Syntax zum Erstellen eines neuen benutzerdefinierten Befehls in Cypress an.

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

wobei die Argumente wie folgt lauten

Name – Der Name des Befehls in String, den wir hinzufügen oder überschreiben möchten

RückrufFn – Diese Funktion nimmt ein an den Befehl übergebenes Argument

Optionen – Übergeben Sie ein beliebiges Optionsobjekt, um das Verhalten des Befehls zu definieren

Note : Optionen werden nur für die Add-Befehle unterstützt und unterstützen nicht die Überschreibbefehle

Die Optionen, die prevSubject akzeptiert sind wie folgt

• false – vorherige Themen ignorieren (Elternbefehl)
• true – die vorherigen Fächer akzeptieren (Kind-Befehl)
• optional – Geben Sie ein, ob Sie eine neue Kette beginnen oder eine bestehende Kette verwenden möchten (Doppelbefehl)

Übergeordneter benutzerdefinierter Befehl in Cypress

Wir werden sehen, wie Sie in Cypress einen benutzerdefinierten übergeordneten Befehl hinzufügen. Der übergeordnete Befehl beginnt immer eine neue Befehlskette, auch wenn Sie einen vorherigen Befehl abgekettet haben. Der zuvor verkettete Befehl wird ignoriert und ein neuer Befehl wird immer verkettet. Einige der übergeordneten Befehle sind cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

Beispiel

Wir werden ein Beispiel sehen, wie man einen benutzerdefinierten übergeordneten Befehl in Cypress schreibt

Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label).click() }) //Klicken auf den "Jetzt kaufen"-Link cy.clickLink('Kaufen Jetzt')

Im obigen Beispiel 'klickenLink' ist der Name unseres benutzerdefinierten Befehls. Es wird nach dem gesucht Etikette. In Zeile 2 erhält der Befehl 'a', und suchen Sie nach dem Link, der das Label enthält, und klicken Sie auf das Element. cy.clickLink() führt die Aktion in der Testdatei aus und klickt auf „JETZT KAUFEN" Verknüpfung.

Untergeordneter benutzerdefinierter Befehl in Cypress

Untergeordnete benutzerdefinierte Befehle in Cypress werden an einen übergeordneten Befehl oder einen anderen untergeordneten Befehl angekettet. Der Betreff aus dem vorherigen Befehl wird der Callback-Funktion übergeben.

Einige der Cypress-Befehle, die als untergeordnete Befehle verkettet werden können, sind .click(), .trigger(), .should(), .find(), .as()

Beispiel

Wir werden uns ein Beispiel ansehen, wie man einen untergeordneten benutzerdefinierten Befehl verkettet

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => { // das vorhandene Thema umschließen und etwas damit machen cy.wrap(subject).click({force:true }) }) //Zugriff auf forceClick in der Testdatei cy.get("[data-test='panel-VALUES']").forceClick();

Im obigen Beispiel benennen wir unseren benutzerdefinierten Befehl als 'ForceClick'. Wir übergeben das prevSubject-Argument an das Element und umschließen das vorhandene Betreff. Mit cy.wrap(), wir erzwingen das Anklicken des Themas. Dann greifen wir in der Testdatei auf den benutzerdefinierten Befehl zu, 'ForceClick' auf einen cy.get() Befehl.

Duale benutzerdefinierte Befehle in Cypress

Duale benutzerdefinierte Befehle sind eine Mischung aus einem übergeordneten und einem untergeordneten Befehl. Sie können eine neue Befehlskette beginnen oder einen vorhandenen Befehl abketten. Doppelbefehle sind hilfreich, wenn unser Befehl mit oder ohne das vorhandene Betreff auf unterschiedliche Weise funktionieren soll.

Einige der Befehle, die für Doppelbefehle verwendet werden können, sind cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

Beispiel

Sehen wir uns ein Beispiel für die Verwendung von dualen benutzerdefinierten Befehlen an

Cypress.Commands.add('getButton', { prevSubject: 'optional' }, (subject) => { if (subject) {cy.get(subject).get('btn').its('button'); } else { cy.get('btn').its('button'); } })

In einigen Fällen müssen wir die Schaltfläche des Textes mit getButton abrufen, wodurch alle Schaltflächen des Elements abgerufen werden. Jetzt können wir getButton verwenden, um das mit dem übergeordneten Element zu verketten oder das untergeordnete Element zu verketten, wo es die Elemente des übergeordneten Elements aufrufen kann.

Da der prevSubject optional ist, können wir entweder den Betreff als Argument übergeben oder den Befehl ohne den Betreff in der Testdatei wie unten beschrieben aufrufen

cy.getButton() // ohne Betreff cy.get('#loginBtn').getButton() // mit Betreff

Vorhandene Cypress-Befehle überschreiben

Wir können die bereits vorhandenen Cypress-Befehle überschreiben und das Verhalten ändern, um zu vermeiden, dass ein weiterer Befehl erstellt wird, der am Ende versucht, den ursprünglichen Befehl zu verwenden.

Einige der ursprünglichen Cypress-Befehle, die überschrieben werden können, sind cy.visit(), cy.type(), cy.screenshot(), cy.contains()

Beispiel

Lassen Sie uns ein sehen Beispiel, wie wir die vorhandene Cypress überschreiben können Befehl.

Cypress.Commands.overwrite('contains', (originalFn, subject, filter, text, options = {}) => { // bestimmen, ob ein Filterargument übergeben wurde if (typeof text === 'object') { options = text text = filter filter = undefined } options.matchCase = false return originalFn(subject, filter, text, options) } )

Wie wir oben gesehen haben, verwenden wir die Cypress.Befehle.überschreiben um den vorhandenen Cypress-Befehl zu ändern. Wir benennen unseren benutzerdefinierten Befehl als contains und wir übergeben Argumente, um zu bestimmen, ob das Filterargument bestanden hat.

Cypress-Importbefehle

In diesem Abschnitt werden wir verstehen, wie man Cypress-Befehle importiert.

Wir müssen unsere benutzerdefinierten Cypress-Befehle im erstellen cypress/support/commands.js Datei. Wir werden die benutzerdefinierten Befehle in die Datei command.js einfügen und in unsere Testfalldatei importieren, um sie zu verwenden.

Benutzerdefinierte Cypress-Befehle mit Beispiel

Wir werden verstehen, wie man einen benutzerdefinierten Befehl erstellt und ihn in unserer Spezifikationsdatei mit Echtzeitbeispiel verwendet.

Wie wir oben gesehen haben, müssen wir neue benutzerdefinierte Befehle unter hinzufügen Befehle.js Datei. Lassen Sie uns in dieser Datei einen benutzerdefinierten Befehl für eine Anmeldefunktion hinzufügen

Cypress.Commands.add("login", (Benutzername, Passwort) => { //Hinzufügen eines neuen Befehls namens login cy.get('[id=Email]').clear(); cy.get('[id =E-Mail]').type(Benutzername); cy.get('[id=Passwort]').clear(); cy.get('[id=Passwort]').type(Passwort); cy.get( '[type=submit]').click(); });

Im obigen Code benennen wir unseren benutzerdefinierten Befehl als login. Innerhalb des benutzerdefinierten Befehls haben wir die Schritte zum Löschen des Benutzernamensfelds und zum Eingeben von Werten in das Textfeld hinzugefügt. Ebenso leeren wir das Feld und fügen das Passwort im Passwortfeld hinzu. Später klicken wir auf den Senden-Button. Dies ist ein einfacher benutzerdefinierter Befehl, der zwei Argumente akzeptiert: Benutzername und Kennwort. Wir übergeben den Wert für den Benutzernamen und das Passwort in unserer Spezifikationsdatei.

Lassen Sie uns nun eine Spezifikationsdatei namens . erstellen customCommand.spec.js unter Integrationsordner. Unsere Spezifikationsdatei enthält den folgenden Code

beschreiben("Beispiel für benutzerdefinierte Befehle", () => { it("sollte sich mit den benutzerdefinierten Befehlen anmelden", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .Anmeldung("[E-Mail geschützt] ", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Wie wir oben gesehen haben, greifen wir auf unseren benutzerdefinierten Befehl als cy.login() , wobei wir die Werte von Benutzername und Passwort übergeben.

Benutzerdefinierte Cypress-Befehle IntelliSense

IntelliSense bietet intelligente Codevorschläge in der IDE oder im Code-Editor direkt während wir Tests schreiben. Es hilft, indem es ein Popup anzeigt, das die Befehlsdefinition, einen Link zur Dokumentationsseite und Codebeispiele anzeigt. Wenn wir einen modernen Code-Editor wie Visual Studio Code oder IntellJ verwenden, ist IntelliSense sehr nützlich.

IntelliSense verwendet Typescript, um die Syntax zu verstehen und anzuzeigen. Wenn wir benutzerdefinierte Befehle schreiben und TypeScript-Definitionen für die benutzerdefinierten Befehle bereitstellen, können wir die dreifachen Schrägstriche verwenden, um IntelliSense anzuzeigen, auch wenn unser Projekt nur JavaScript verwendet.

Um IntelliSense zu konfigurieren, müssen wir den Code in beschreiben zypresse/support/index.d.ts Datei.

// Typdefinitionen für das Cypress-Objekt "cy" /// Namespace Cypress deklarieren { Schnittstelle Chainable { /** * Login mit Zugangsdaten * @example * cy.login(username,password) */ login(username: String, password: String): Verkettbar } }

Jetzt sollten wir unseren Spezifikationsdateien mitteilen, dass es einige Typescript-Definitionen in der index.d.ts Datei. Fügen Sie daher am Anfang unserer Spezifikationsdatei den folgenden Code hinzu, damit IntelliSense Vorschläge für uns bereitstellen kann.

// Typdefinitionen für benutzerdefinierte Befehle wie „login“ // werden in „cypress/support/index.d.ts“ aufgelöst //

Wie wir oben gesehen haben, liefert uns IntelliSense die Argumente, die wir in unserer Datei command.js bereitgestellt haben, und hilft bei der automatischen Vervollständigung.

Aishwarya Lakshmi

Hallo ... ich bin Aishwarya Lakshmi, habe meinen B.Tech abgeschlossen und verfüge über mehr als zwei Jahre Erfahrung im Testbereich. Ich bin ein Test-Enthusiast und habe eine Leidenschaft für das Testen. Ich liebe es, neue Dinge in meinem Bereich zu entdecken und sie mit meinen Kollegen zu teilen. In meiner Freizeit schreibe ich gerne Blogs auf einfachste, aber effektive Weise. Als Tester möchte ich, dass die Dinge perfekt sind, deshalb wünsche ich meinen Lesern, dass sie die Technologie perfekt verstehen. Ich halte mich über die neuen Technologien im Zusammenhang mit Tests auf dem Laufenden und nehme mir Zeit, sie zu verstehen. Ich freue mich, den Studierenden dabei zu helfen, die Konzepte beim Testen zu verstehen.