Cypress-Befehle und benutzerdefinierte Befehle: 21 wichtige Fakten


Inhaltsverzeichnis

Zypressen-Befehl

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

OptionDefaultBeschreibung
alt "TastefalschSchalten Sie die Alternativtaste (Optionstaste in Mac) ein, wie optionKey
ctrlKeyfalschSchalten Sie die Steuertaste ein. Auch bekannt als: controlKey.
metaSchlüsselfalschBetätigt die Metataste (Windows-Taste in Windows oder Befehlstaste in Mac). Ebenfalls: commandKeycmdKey.
shift TastefalschBetätigt die Umschalttaste
Logwas immer dies auch sein sollte.Druckt die Protokolle in der Befehlszeile
StärkefalschDiese Option erzwingt die Aktion und deaktiviert das Warten auf Aktionsfähigkeit
mehrerefalschKlicken Sie nacheinander auf mehrere Elemente
TimeoutdefaultCommandTimeoutZeit für .click() warten, bevor die Zeitüberschreitung aufgelöst wird
waitForAnimationenwaitForAnimationenOption, zu warten, bis die Animation der Elemente abgeschlossen ist, bevor der Befehl ausgeführt wird
Optionen in Klick

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.

ReihenfolgeAnmerkungen
{{}Gibt das wörtliche ein { Schlüssel
{backspace}Löscht Zeichen von rechts nach links vom Cursor
{del}Entfernt Zeichen von links nach rechts vom Cursor
{downarrow}Verschiebt den Cursor nach unten
{end}Verschiebt den Cursor an das Ende der Zeile
{enter}Gibt die Eingabetaste ein
{esc}Gibt die Escape-Taste ein
{home}Verschiebt den Cursor an den Zeilenanfang
{insert}Positioniert das Zeichen rechts vom Cursor
{leftarrow}Bewegt den Cursor nach links
{movetoend}Verschiebt den Cursor an das Ende des schreibbaren Elements
{movetostart}Verschiebt den Cursor an den Anfang des schreibbaren Elements
{pagedown}Scrollt nach unten
{pageup}Scrollt nach oben
{rightarrow}Verschiebt den Cursor nach rechts
{selectall}Wählt den gesamten Text durch Erstellen von a . aus selection range
{uparrow}Verschiebt den Cursor nach oben

Optionen

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

OptionDefaultBeschreibung
delay10Option für Zeitverzögerung nach jedem Tastendruck
forcefalseErzwingt die Ausführung der Aktion und deaktiviert auf Umsetzbarkeit warten
logtrueZeigt die Protokolle im Befehlsprotokoll
parseSpecialCharSequencestrueAnalysieren Sie Sonderzeichen für Zeichenfolgen, die von umgeben sind {}, sowie {esc}. Sie können die Option auf false um die wörtlichen Zeichen einzugeben.
releasetrueDiese Option ermöglicht es, einen Modifikator zu aktivieren, der zwischen den Befehlen aktiviert bleibt
scrollBehaviorscrollBehaviorPosition des Ansichtsfensters, an der ein Element gescrollt werden soll, bevor ein Befehl ausgeführt wird
timeoutdefaultCommandTimeoutZeit zu warten .type() Befehl zum Auflösen vor dem Timeout
waitForAnimationswaitForAnimationsUm zu sagen, ob auf Elemente gewartet werden soll Animation beenden bevor Sie einen Befehl ausführen.
Optionen für Typbefehl

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.

OptionDefaultBeschreibung
forcefalseDadurch wird die Aktion erzwungen und das Warten auf die Aktionsfähigkeit deaktiviert
logtrueZeigt den Befehl im Befehlsprotokoll an
scrollBehaviorscrollBehaviorPosition des Ansichtsfensters, zu der ein Element gescrollt werden muss, bevor der Befehl ausgeführt wird
timeoutdefaultCommandTimeoutDiese Option ist die Zeit zu warten .clear() vor der Auszeit lösen
waitForAnimationswaitForAnimationsDadurch wird gewartet, bis die Animation der Elemente abgeschlossen ist, bevor der Befehl ausgeführt wird.
Optionen für klare Befehle

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.

OptionDefaultBeschreibung
forcefalseDiese Option erzwingt die Ausführung der Aktion und deaktiviert das Warten auf Handlungsfähigkeit
logtrueZeigt die Protokolle im Befehlsprotokoll an und ist standardmäßig auf "true" gesetzt
timeoutdefaultCommandTimeoutDiese Option ist die Zeit zu warten .select() vor der Auszeit lösen
Optionen für Auswahlbefehl

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.

OptionDefaultBeschreibung
bubblestrueOb die Veranstaltung sprudeln soll
cancelabletrueOb die Veranstaltung abgesagt werden kann
eventConstructorEventDer Konstruktor zum Erstellen des Ereignisobjekts (zB MouseEvent, keyboardEvent)
Option für Trigger-Befehl

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

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

OptionAkzeptiertDefaultBeschreibung
prevSubjectBooleanString or Arrayfalsedefiniert, wie mit dem zuvor erhaltenen Subjekt umzugehen ist.

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.

Command.js-Datei

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(); });
Benutzerdefinierte Befehle in der Datei command.js

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

description("Beispiel für benutzerdefinierte Befehle", () => { it("sollte sich mit den benutzerdefinierten Befehlen anmelden", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .login("admin@yourstore.com", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });
Spezifikationsdatei, die auf den benutzerdefinierten Befehl zugreift

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 //
Vorschlag von IntelliSense

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

Ich bin ein begeisterter Tester und habe mehr als zwei Jahre Erfahrung im Testbereich. Ich teste leidenschaftlich gerne und liebe es, neue Dinge in meinem Bereich zu entdecken und sie mit meinen Kollegen zu teilen. Ich schreibe gerne in meiner Freizeit Blogs auf die einfachste, aber effektive Art und Weise. Als Tester mag ich es, die Dinge perfekt zu machen, daher wünsche ich meinen Lesern ein perfektes Verständnis der Technologie. Ich halte mich über die neuen Technologien im Zusammenhang mit dem Testen auf dem Laufenden und verbringe Zeit damit, sie zu verstehen. Ich helfe den Studenten gerne, die Konzepte beim Testen zu verstehen. Verbinden wir uns über LinkedIn – https://www.linkedin.com/in/aishwarya-lakshmi-n-2a

Neueste Beiträge