Cypress-opdrachten en aangepaste opdrachten: 21 belangrijke feiten

Inhoudsopgave

Cypress commando

Wat is Cypress-commando's?

Cypress biedt ons API's en methoden om te communiceren met de gebruikersinterface van de applicatie. Ze staan ​​bekend als Cypress Commands en helpen bij de interactie van de webapplicatie. Alle beschikbare commando's hebben ingebouwde methoden en we zullen de methoden alleen in onze testgevallen aanroepen. De Cypress-opdrachten simuleren een soortgelijke actie als een gebruiker die bewerkingen op de toepassing probeert uit te voeren.

UI-interactieopdrachten geleverd door Cypress

Er zijn verschillende opdrachten van Cypress die communiceren met de gebruikersinterface. We zullen de lijst met alle opdrachten in detail bekijken.

  • .Klik()
  • .dblklik()
  • .rechtsklik()
  • .type()
  • .Doorzichtig()
  • .rekening()
  • .uitvinken()
  • .select()
  • .op gang brengen()

Cypress Klik-opdracht

.Klik() – Dit commando is om Klik elk element op de DOM.

Hieronder volgen de syntaxis voor de klikopdracht:

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

Zoals je hierboven kunt zien, accepteert de klik parameters zoals: opties, positie, en coördinaten.

Opties

De mogelijke opties die kunnen worden doorgegeven aan klikken zijn:

KeuzeStandaardOmschrijving
Alt toetsvalsSchakel de alternatieve sleutel in (Option Key op Mac), zoals optionKey
ctrlKeyvalsSchakel de bedieningssleutel in. Ook gekend als: controlKey.
metasleutelvalsActiveert de meta-toets (Windows-toets in Windows of command-toets in Mac). Ook: commandKeycmdKey.
Shift toetsvalsBedient de shift-toets
inloggenwaarDrukt de logboeken af ​​op de opdrachtregel
dwingenvalsDeze optie forceert de actie en schakelt het wachten op actie uit
meervoudigvalsKlik achtereenvolgens op meerdere elementen
time-outstandaardCommandTimeoutTijd voor .click() wacht voordat u de time-out oplost
waitForAnimatieswaitForAnimatiesOptie om te wachten tot de elementen geanimeerd zijn voordat de opdracht wordt uitgevoerd
Opties in Klik

posities

De verschillende soorten posities die kunnen worden doorgegeven aan .click() zijn:

  • centrum (verzuim)
  • links
  • rechts
  • top
  • linksboven
  • rechtsboven
  • bodem
  • linksonder
  • rechts onder

Voorbeeld

cy.get('btn').click() //klikken op de knop cy.get('btn').click({ force: true }) //klikken op de knop door de optie 'force' door te geven als true cy. get('btn').click('bottomRight') // klikken op de knop rechtsonder cy.get('btn').click(10, 70, { force: true }) // klikken op de knop met positiewaarde en force true

Cypress Dubbelklik Commando

Dubbelklik kan worden bereikt door gebruik te maken van dblclick() syntaxis in Cypress.

Syntaxis

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

Opties

.dblclick() accepteert alle opties die worden geaccepteerd door .click(). U vindt de opties in het bovenstaande gedeelte.

posities

Alle mogelijke posities die zijn gespecificeerd in .click() zijn ook beschikbaar voor dblclick(). De lijst met vacatures is te vinden in het bovenstaande gedeelte.

Voorbeeld

cy.get('button').dblclick() // Dubbelklik op knop cy.focused().dblclick() // Dubbelklik op element met focus cy.contains('Home').dblclick() // Dubbel klik op het eerste element dat 'Home' bevat cy.get('button').dblclick('top') // Dubbelklik op de knop bovenaan positie cy.get('button').dblclick(30, 10) // Dubbelklik op de coördinaten van 30 en 10

Cypress-opdracht voor rechtsklikken

Met deze Cypress-opdracht klikt u met de rechtermuisknop op het DOM-element .rightclick() commando opent geen contextmenu's van de browser.rightclick() wordt gebruikt om de afhandeling van rechtsklikgerelateerde gebeurtenissen in de toepassing te testen, zoals: contextmenu.

Syntaxis

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

Opties

Zoals we hierboven zagen, alle opties die worden geaccepteerd door .click() commando kan worden geconfigureerd met .rightclick() commando ook.

posities

Alle mogelijke posities die kunnen worden doorgegeven aan de .rightclick() is hetzelfde als de .click() hierboven vermeld.

Voorbeeld

cy.get('.welcome').rightclick() // Rechtsklik op .welcome cy.focused().rightclick() // Rechtsklik op element met focus cy.contains('January').rightclick() / / Klik met de rechtermuisknop op het eerste element dat 'januari' cy.get('button').dblclick('topRight') bevat // Dubbelklik op de knop rechtsboven positie cy.get('button').dblclick(80, 20 ) // Dubbelklik op de coördinaten van 80 en 20

Cypress Type Commando

.type() commando voert waarde in een DOM-element in.

Syntaxis

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

argumenten

.type() accepteert string als argument. Waarden doorgegeven aan .type() kan elk van de onderstaande speciale tekenreeksen bevatten.

VolgordeOpmerkingen
{{}Voert de letterlijke in { sleutel
{backspace}Verwijdert teken van rechts naar links van de cursor
{del}Verwijdert teken van links naar rechts van de cursor
{downarrow}Verschuift cursor naar beneden
{end}Verplaatst de cursor naar het einde van de regel
{enter}Typt de Enter-toets
{esc}Typt de Escape-toets
{home}Verplaatst de cursor naar het begin van de regel
{insert}Plaatst teken rechts van de cursor
{leftarrow}Beweegt cursor naar links
{movetoend}Verplaatst de cursor naar het einde van het typbare element
{movetostart}Verplaatst de cursor naar het begin van typbaar element
{pagedown}Scrollt naar beneden
{pageup}Scrollt omhoog
{rightarrow}Verschuift cursor naar rechts
{selectall}Selecteert alle tekst door a . te maken selection range
{uparrow}Verschuift cursor omhoog

Opties

We kunnen de objecten doorgeven als opties om het standaardgedrag van te wijzigen .type()

KeuzeStandaardOmschrijving
delay10Optie voor vertraging in de tijd na elke toetsaanslag
forcefalseForceert de actie om uit te voeren en schakelt uit wachten op bruikbaarheid
logtrueToont de logs in de Commandolog
parseSpecialCharSequencestrueOntleed speciale tekens voor strings omringd door {}, zoals {esc}. U kunt de optie instellen op: false om de letterlijke tekens in te voeren.
releasetrueMet deze optie kan een modifier geactiveerd blijven tussen commando's
scrollBehaviorscrollBehaviorViewport-positie naar waar een element moet worden gescrolld voordat een opdracht wordt uitgevoerd
timeoutdefaultCommandTimeoutTijd om op te wachten .type() opdracht om op te lossen voor de time-out
waitForAnimationswaitForAnimationsOm te zeggen of te wachten op elementen om klaar met animeren voordat u een opdracht uitvoert.
Opties voor type commando

Voorbeeld

Laten we voorbeelden bekijken voor .type() commando

cy.get('textarea').type('Hey there') // voer de waarde in het tekstgebied in cy.get('body').type('{shift}') // activeert de shift-toets cy.get ('body').type('{rightarrow}') //type event pijl naar rechts 

Opdracht Cypress wissen

De opdracht Clear wist de waarden in het invoergebied of het tekstveld.

Syntaxis

De syntaxis voor de opdracht clear is als volgt.

.clear()
.clear(options)

Opties

We zullen kijken naar de opties die kunnen worden doorgegeven aan de .clear() opdracht.

KeuzeStandaardOmschrijving
forcefalseHierdoor wordt de actie geforceerd en wordt het wachten op actiegerichtheid uitgeschakeld
logtrueToont de opdracht in het opdrachtlogboek
scrollBehaviorscrollBehaviorViewport-positie naar waar een element moet worden gescrolld voordat de opdracht wordt uitgevoerd
timeoutdefaultCommandTimeoutDeze optie is de tijd om op te wachten .clear() op te lossen voor de time-out
waitForAnimationswaitForAnimationsHiermee wordt gewacht tot elementen zijn geanimeerd voordat de opdracht wordt uitgevoerd.
Opties voor opdracht wissen

Voorbeeld

Laten we eens kijken naar de voorbeelden voor een duidelijk commando

cy.get('[type="text"]').clear() // Wis invoer van type tekst cy.get('textarea').type('Welkom!').clear() // Wis tekstarea cy .focused().clear() // Duidelijke invoer/tekstgebied wissen

Cypress Check-opdracht

Het check-commando zal controleren of, in eenvoudiger woorden, de selectievakjes of keuzerondjes aanvinken. U kunt de selectievakjes of keuzerondjes uitschakelen met behulp van de .uncheck() opdracht.

Syntaxis

We zullen de syntaxis voor het check-commando in Cypress begrijpen.

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

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

Opties

De mogelijke opties die kunnen worden doorgegeven om opdrachten aan/uit te vinken, zijn dezelfde opties als de opdracht wissen hierboven vermeld

Voorbeeld

We zullen kijken naar het voorbeeld van hoe we check- en uncheck-commando's kunnen gebruiken.

cy.get('[type="checkbox"]').check() // Check box element cy.get('[type="radio"]').first().check() // Check eerste radio element cy.get('[type="radio"]').check('Male') //Controleer het radio-element met Male cy.get('[type="checkbox"]').uncheck() / /Deselecteer het selectievakje element cy.get('[type="radio"]').uncheck() //Deselecteer het eerste radio-element cy.get('[type="checkbox"]').uncheck('Breakfast') // Schakel het ontbijtelement uit

Cypress Select-opdracht

Met het select Cypress-commando kunt u elementen selecteren binnen een label.

Syntaxis

Hieronder volgen de syntaxis voor de opdracht select:

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

Opties

We kunnen de opties doorgeven om het standaardgedrag van het select-commando te wijzigen.

KeuzeStandaardOmschrijving
forcefalseMet deze optie wordt de actie geforceerd en wordt het wachten op actiegerichtheid uitgeschakeld
logtrueToont de logboeken in het opdrachtlogboek en is standaard ingesteld als waar
timeoutdefaultCommandTimeoutDeze optie is de tijd om op te wachten .select() op te lossen voor de time-out
Opties voor selecteer commando

Voorbeeld

Laten we eens kijken naar voorbeelden voor het select-commando

cy.get('select').select('butterfly') // Selecteer de 'butterfly' optie cy.get('select').select(0) // selecteert het element met 0 index cy.get('select ').select(['papegaai', 'pauw']) //selecteert de papegaai en pauw optie

Cypress-triggercommando

Trigger-opdracht helpt om elke gebeurtenis op het element te activeren.

Syntaxis

We zullen kijken naar de syntaxis voor toegang tot het triggercommando

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

Keuze

Triggercommando accepteert alle opties die worden genoemd voor .clear() opdracht. Bovendien zijn er enkele opties die we kunnen configureren die hieronder worden vermeld.

KeuzeStandaardOmschrijving
bubblestrueOf het evenement moet bubbelen
cancelabletrueOf het evenement kan worden geannuleerd
eventConstructorEventDe constructor voor het maken van het gebeurtenisobject (bijv MouseEvent, keyboardEvent)
Optie voor triggercommando

Voorbeeld

Laten we verschillende manieren van gebruik .trigger() in de code.

cy.get('a').trigger('mouseover') // Trigger mouseover-gebeurtenis op een link cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown geactiveerd op button 0 cy.get('button').trigger('mouseup', topRight, { bubbles: false }) // mouseup geactiveerd op rechtsboven positie met instelling bubble als false

Zijn Cypress-commando's asynchroon?

Alle Cypress-commando's zijn asynchroon. Ze worden in de wachtrij geplaatst voor uitvoering op een later tijdstip en wachten niet op de voltooiing van de opdrachten. Cypress-commando's doen niets op het moment dat ze worden aangeroepen, in plaats daarvan bewaren ze het voor later voor uitvoering. U kunt het asynchrone gedrag van Cypress . begrijpen hier.

Cypress Chainable-opdrachten

In Cypress kunnen we een reeks opdrachten gebruiken om te communiceren met elementen in DOM. Het is absoluut noodzakelijk om te begrijpen hoe de aaneenschakeling van commando's intern werkt. Als we commando's in een bepaalde regel aaneenschakelen, zal Cypress een belofte afhandelen op basis van de commandoketen en een commando opleveren op basis van het onderwerp van het volgende commando, totdat de commandoketen eindigt of er een fout is opgetreden.

Cypress stelt ons in staat om op een element te klikken of in elementen te typen met behulp van de .click() or .type() commando's door de elementen te verkrijgen met behulp van cy.get() or cy.contains(). Laten we een eenvoudig voorbeeld bekijken van het koppelen van commando's

cy.get('textarea').type('Hoe gaat het?')

In het bovenstaande voorbeeld, cy.get() is een Cypress-commando en .type() is een ander commando, waar we de aaneenketenen .type() commando op de cy.get() commando, vertellend dat het moet typen naar het onderwerp dat wordt verkregen uit de cy.get() element. Op dezelfde manier kunnen we alle commando's die we hierboven hebben besproken aan elkaar koppelen.

Assertie-opdrachten aan elkaar koppelen in Cypress

Net als bij het koppelen van meerdere commando's met Cypress, kunnen we beweringen ook aan commando's koppelen. Beweringen zijn opdrachten waarmee u de verwacht staat of gedrag van de applicatie. Cypress wacht totdat de elementen de verwachte status hebben bereikt en de test zal mislukken als de beweringen niet slagen. We zullen zien hoe we chaining-commando's kunnen gebruiken bij het bevestigen van een element.

cy.get('button').should('be.disabled') //expect of de knop moet worden uitgeschakeld cy.get('form').should('have.class', 'form-vertical') / /expect of het formulier class als 'form-vertical' zou moeten hebben cy.get('input').should('not.have.value', 'Name') // stel vast of de invoer niet de waarde 'Name' mag hebben '

Zoals hierboven vermeld, gebruiken we de cy.get() commando en koppel het met de .should() assertiecommando om het gedrag te verwachten op basis van het resultaat. Op deze manier kunnen we keten beweringscommando's in Cypress.

Cypress aangepaste opdrachten

Cypress biedt ons API's om commando's te maken op basis van onze vereisten. De aangepaste opdracht van Cypress is vergelijkbaar met de standaardopdrachten die al bestaan, behalve dat het is gebruiker gedefinieerde. Met aangepaste commando's kunnen we spelen met de commando's en ze koppelen op basis van onze use case. Aangepaste Cypress-commando's zijn handig in onze workflow als u ze keer op keer in de tests wilt gebruiken.

Laten we eens kijken naar de syntaxis voor het maken van een nieuwe aangepaste opdracht in Cypress.

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

waarbij de argumenten als volgt zijn:

naam – De naam van de opdracht in string die we willen toevoegen of overschrijven

terugbellenFn – Deze functie neemt een argument mee dat aan het commando is doorgegeven

opties - Geef elk optie-object door om het gedrag van de opdracht te definiëren

Note : opties worden alleen ondersteund voor de toevoegopdrachten en geen ondersteuning voor de overschrijfopdrachten

KeuzeAccepteertStandaardOmschrijving
prevSubjectBooleanString or Arrayfalsebepaalt hoe het eerder opgeleverde onderwerp moet worden behandeld.

De opties die prevSubject accepteert zijn als volgt:

  • false - negeer eerdere onderwerpen (ouderopdracht)
  • true – accepteer de vorige onderwerpen (kindercommando)
  • optional – geef door of je een nieuwe keten wilt starten of een bestaande keten wilt gebruiken (dubbel commando)

Aangepast bovenliggende commando in Cypress

We zullen zien hoe u een ouder aangepast commando in Cypress kunt toevoegen. Bovenliggende commando's beginnen altijd met een nieuwe reeks commando's, ook al heb je een vorig commando geketend. Het eerder gekoppelde commando wordt genegeerd en een nieuw commando wordt altijd gekoppeld. Sommige van de bovenliggende commando's zijn: cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

Voorbeeld

We zullen een voorbeeld zien van hoe een ouder aangepast commando te schrijven in Cypress

Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label).click() }) // klikken op de link "Nu kopen" cy.clickLink('Buy Nutsvoorzieningen')

In het bovenstaande voorbeeld 'klikLink' is de naam van onze aangepaste opdracht. Het zal zoeken naar de label. In regel 2 krijgt het commando 'a', en zoek naar de link die label bevat en klik op het element. cy.clickLink() voert de actie in het testbestand uit en klikt op de "KOOP NU" link.

Aangepaste opdracht voor kinderen in Cypress

Child Custom-commando's in Cypress zijn gekoppeld aan een parent-commando of een ander child-commando. Het onderwerp van de vorige opdracht wordt doorgegeven aan de callback-functie.

Sommige van de Cypress-commando's die kunnen worden geketend als een kindcommando zijn: .click(), .trigger(), .should(), .find(), .as()

Voorbeeld

We zullen een voorbeeld bekijken van het koppelen van een aangepast kindcommando

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => { // wikkel het bestaande onderwerp in en doe er iets mee cy.wrap(subject).click({force:true }) }) // toegang krijgen tot de forceClick in het testbestand cy.get("[data-test='panel-VALUES']").forceClick();

In het bovenstaande voorbeeld noemen we onze aangepaste opdracht als 'forceKlik'. We geven het prevSubject-argument door aan het element en wikkelen het bestaande onderwerp in. Met cy.wrap(), we zijn geforceerd op het onderwerp aan het klikken. Dan hebben we in het testbestand toegang tot de aangepaste opdracht, 'forceKlik' op een cy.get() opdracht.

Dubbele aangepaste opdrachten in Cypress

Dubbele aangepaste opdrachten zijn een hybride tussen een bovenliggende en een onderliggende opdracht. U kunt een nieuwe reeks opdrachten beginnen of een bestaande opdracht afhaken. Dubbele opdrachten zijn handig als we willen dat onze opdracht op verschillende manieren werkt, met of zonder het bestaande onderwerp.

Enkele van de commando's die kunnen worden gebruikt voor dubbele commando's zijn: cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

Voorbeeld

Laten we een voorbeeld bekijken van het gebruik van dubbele aangepaste opdrachten

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

In sommige gevallen zullen we de knop van de tekst nodig hebben met getButton die alle knoppen van het element zal verwerven. Nu kunnen we getButton gebruiken om het te koppelen met het bovenliggende element of het onderliggende element te koppelen, waar het de elementen van het bovenliggende element kan aanroepen.

Aangezien de prevSubject is optioneel, we kunnen het onderwerp als argument doorgeven of de opdracht aanroepen zonder het onderwerp in het testbestand, zoals hieronder:

cy.getButton() // zonder het onderwerp cy.get('#loginBtn').getButton() // met het onderwerp

Bestaande Cypress-opdrachten overschrijven

We kunnen de reeds bestaande Cypress-commando's overschrijven en het gedrag wijzigen om te voorkomen dat er nog een commando wordt gemaakt dat aan het einde zal proberen het originele commando te gebruiken.

Sommige van de originele Cypress-opdrachten die kunnen worden overschreven, zijn: cy.visit(), cy.type(), cy.screenshot(), cy.contains()

Voorbeeld

Laten we eens kijken voorbeeld over hoe we de bestaande Cypress kunnen overschrijven opdracht.

Cypress.Commands.overwrite('bevat', (originalFn, subject, filter, text, options = {}) => { // bepaal of een filterargument is doorgegeven if (typeof text === 'object') { options = text text = filter filter = undefined } options.matchCase = false return originalFn(subject, filter, text, options) } )

Zoals we hierboven zagen, gebruiken we de Cypress.Opdrachten.overschrijven om het bestaande Cypress-commando te wijzigen. We noemen onze aangepaste opdracht als: contains en we geven argumenten door om te bepalen of het filterargument is geslaagd.

Cypress-importopdrachten

In deze sectie zullen we begrijpen hoe u Cypress-commando's kunt importeren.

We moeten onze aangepaste Cypress-commando's maken in de cipres/support/commands.js het dossier. We zullen de aangepaste opdrachten toevoegen aan het bestand command.js en importeren in ons testcasebestand om het te gebruiken.

anysnap 01 okt 2021 om 4 03 59 pm
Command.js-bestand

Cypress aangepaste opdrachten met voorbeeld

We zullen begrijpen hoe u een aangepaste opdracht kunt maken en deze kunt gebruiken in ons specificatiebestand met een realtime voorbeeld.

Zoals we hierboven zagen, moeten we nieuwe aangepaste commando's toevoegen onder de commando's.js het dossier. Laten we in dat bestand een aangepast commando toevoegen voor een inlogfunctie

Cypress.Commands.add("login", (gebruikersnaam, wachtwoord) => { //een nieuwe opdracht toevoegen met de naam login cy.get('[id=E-mail]').clear(); cy.get('[id =E-mail]').type(gebruikersnaam); cy.get('[id=Wachtwoord]').clear(); cy.get('[id=Wachtwoord]').type(wachtwoord); cy.get( '[type=verzenden]').klik(); });
beeld
Aangepaste opdrachten in het bestand command.js

In de bovenstaande code noemen we onze aangepaste opdracht als: Log in. Binnen de aangepaste opdracht hebben we de stappen toegevoegd voor het wissen van het gebruikersnaamveld en het invoeren van een waarde in het tekstveld. Op dezelfde manier maken we het veld leeg en voegen we het wachtwoord toe aan het wachtwoordveld. Later klikken we op de verzendknop. Dit is een eenvoudig aangepast commando dat twee argumenten accepteert: gebruikersnaam en wachtwoord. We zullen de waarde voor de gebruikersnaam en het wachtwoord in ons specificatiebestand doorgeven.

Laten we nu een specificatiebestand maken met de naam customCommand.spec.js onder integratiemap. Ons specificatiebestand zal de volgende code bevatten:

beschrijven("Voorbeeld van aangepaste opdrachten", () => { it("moet inloggen met de aangepaste opdrachten", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .Log in("[e-mail beveiligd]", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });
anysnap 01 okt 2021 om 4 34 30 pm
Specificeer bestand dat toegang heeft tot de aangepaste opdracht

Zoals we hierboven zagen, hebben we toegang tot onze aangepaste opdracht als: cy.login() , waar we de waarden van gebruikersnaam en wachtwoord doorgeven.

Cypress aangepaste opdrachten IntelliSense

IntelliSense biedt intelligente code-suggesties direct in de IDE of code-editor terwijl we tests schrijven. Het helpt door een pop-up weer te geven met de opdrachtdefinitie, een link naar de documentatiepagina en codevoorbeelden. Als we een moderne code-editor zoals Visual Studio Code of IntellJ gebruiken, zal IntelliSense erg handig zijn.

IntelliSense gebruikt Typescript om de syntaxis te begrijpen en weer te geven. Als we aangepaste opdrachten schrijven en TypeScript-definities voor de aangepaste opdrachten leveren, kunnen we de drievoudige schuine strepen gebruiken om IntelliSense weer te geven, zelfs als ons project alleen JavaScript gebruikt.

Om IntelliSense te configureren, moeten we de code beschrijven in: cipres/support/index.d.ts bestand.

// typedefinities voor Cypress-object "cy" /// declareren namespace Cypress { interface Chainable { /** * Login met inloggegevens * @example * cy.login(gebruikersnaam,wachtwoord) */ login(gebruikersnaam: String, wachtwoord: String): Chainable } }

Nu moeten we onze specificatiebestanden laten weten dat er enkele Typescript-definities in de index.d.ts het dossier. Voeg dus aan het begin van ons specificatiebestand de onderstaande code toe zodat IntelliSense ons suggesties kan geven.

// type definities voor aangepaste commando's zoals "login" // zullen worden omgezet in "cypress/support/index.d.ts" //
anysnap 01 okt 2021 om 5 06 15 pm
Suggestie van IntelliSense

Zoals we hierboven hebben gezien, biedt IntelliSense ons de argumentatie die we hebben gegeven in ons command.js-bestand en helpt het bij het automatisch aanvullen.