Inhoudsopgave
- Wat is Cypress-commando's?
- UI Interactie-opdrachten geleverd door Cypress
- Cypress-opdracht voor rechtsklikken
- Cypress Dubbelklik Commando
- Cypress Klik-opdracht
- Cypress-triggercommando
- Cypress Type Commando
- Cypress Select-opdracht
- Cypress Check-opdracht
- Opdracht Cypress wissen
- Zijn Cypress-opdrachten asynchroon?
- Cypress aangepaste opdrachten
- Assertion-commando's koppelen in Cypress
- Bestaande Cypress-commando's overschrijven
- Cypress Chainable-opdrachten
- Aangepast bovenliggende commando in Cypress
- Aangepaste opdracht voor kinderen in Cypress
- Dubbele aangepaste opdracht in Cypress
- Cypress aangepaste opdrachten met voorbeeld
- Cypress-importopdrachten
- Cypress Custom Commando IntelliSense
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:
| Keuze | Standaard | Omschrijving |
|---|---|---|
| Alt toets | vals | Schakel de alternatieve toets in (Option-toets in Mac), als optionKey |
ctrlKey | vals | Schakel de bedieningssleutel in. Ook gekend als: controlKey. |
| metaKey | vals | Activeert de meta-toets (Windows-toets in Windows of command-toets in Mac). Ook: commandKey, cmdKey. |
| Shift toets | vals | Bedient de shift-toets |
| inloggen | waar | Drukt de logboeken af op de opdrachtregel |
| dwingen | vals | Deze optie forceert de actie en schakelt het wachten op actie uit |
| meervoudig | vals | Klik achtereenvolgens op meerdere elementen |
| time-out | defaultCommandTimeout | Tijd voor .click() wacht voordat u de time-out oplost |
| waitForAnimaties | waitForAnimaties | Optie om te wachten tot de elementen geanimeerd zijn voordat de opdracht wordt uitgevoerd |
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.
| Volgorde | Opmerkingen |
|---|---|
{{} | 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()
| Keuze | Standaard | Omschrijving |
|---|---|---|
delay | 10 | Optie voor vertraging in de tijd na elke toetsaanslag |
force | false | Forceert de actie om uit te voeren en schakelt uit wachten op bruikbaarheid |
log | true | Toont de logs in de Commandolog |
parseSpecialCharSequences | true | Ontleed speciale tekens voor strings omringd door {}, zoals {esc}. U kunt de optie instellen op: false om de letterlijke tekens in te voeren. |
release | true | Met deze optie kan een modifier geactiveerd blijven tussen commando's |
scrollBehavior | scrollBehavior | Viewport-positie naar waar een element moet worden gescrolld voordat een opdracht wordt uitgevoerd |
timeout | defaultCommandTimeout | Tijd om op te wachten .type() opdracht om op te lossen voor de time-out |
waitForAnimations | waitForAnimations | Om te zeggen of te wachten op elementen om klaar met animeren voordat u een opdracht uitvoert. |
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.
| Keuze | Standaard | Omschrijving |
|---|---|---|
force | false | Hierdoor wordt de actie geforceerd en wordt het wachten op actiegerichtheid uitgeschakeld |
log | true | Toont de opdracht in het opdrachtlogboek |
scrollBehavior | scrollBehavior | Viewport-positie naar waar een element moet worden gescrolld voordat de opdracht wordt uitgevoerd |
timeout | defaultCommandTimeout | Deze optie is de tijd om op te wachten .clear() op te lossen voor de time-out |
waitForAnimations | waitForAnimations | Hiermee wordt gewacht tot elementen zijn geanimeerd voordat de opdracht wordt uitgevoerd. |
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.
| Keuze | Standaard | Omschrijving |
|---|---|---|
force | false | Met deze optie wordt de actie geforceerd en wordt het wachten op actiegerichtheid uitgeschakeld |
log | true | Toont de logboeken in het opdrachtlogboek en is standaard ingesteld als waar |
timeout | defaultCommandTimeout | Deze optie is de tijd om op te wachten .select() op te lossen voor de time-out |
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.
| Keuze | Standaard | Omschrijving |
|---|---|---|
bubbles | true | Of het evenement moet bubbelen |
cancelable | true | Of het evenement kan worden geannuleerd |
eventConstructor | Event | De constructor voor het maken van het gebeurtenisobject (bijv MouseEvent, keyboardEvent) |
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
Opmerking: : opties worden alleen ondersteund voor de toevoegopdrachten en geen ondersteuning voor de overschrijfopdrachten
| Keuze | Accepteert | Standaard | Omschrijving |
|---|---|---|---|
prevSubject | Boolean, String or Array | false | bepaalt 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 "Bestel 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.
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(); });
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:
description("Voorbeeld van aangepaste opdrachten", () => { it("moet inloggen met de aangepaste opdrachten", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .login("admin@yourstore.com", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });
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" //
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.
