Een File toevoegen aan de testen

Maak een .js file aan in de integration map (je kunt binnen deze map zelf mappen aanmaken voor je test files. Je hoeft dus niet perse in de examples map te werken.

Open cypress

Ga naar je project map (niet in de de cypress map zelf maar de hoofd map), Shift + Rechtermuis en open powershell of command prompt type: NPX Cypress open

Inspect element

Op de class, ID, of css selector te vinden kun je de inspector/developer tools gebruiken.

Rechter muis klik op element en kies inspect element de html code van dit element word gehighlight.

Simpele manier van CSS selector vinden

Dit is niet aan te raden voor je projecten! Alleen voor als je even snel verder wilt in BV een POC of om te testen of een bepaald pad werkt. Rechter muis klik op element in de inspector en dan Copy selecteren → CSS selector

Hoe werkte de verschillende elementen ook alweer?

Voorbeeld op de get pagina van examples

cy.visit("https://example.cypress.io/commands/querying")

//ID

cy.get("#query-btn")

//class

cy.get(".query-btn")

//css selector

cy.get("#querying > div > div:nth-child(1) > h4 > a")

//href

cy.get('a[href="https://on.cypress.io/get"]')

Chainen van commando’s

Als je de een DOM element hebt gevonden met BV get of contains kun je er op chainen

Je kunt op een nieuwe regel chainen.

cy.get('.query-list')

.contains("apples")

.should('have.class', 'first')

Of je kunt alles op een regel zetten

cy.get('.query-list').contains(/^ban/).should('have.class', 'third')

Chainen op de get als hij meer dan 1 object returned

Makkelijke manier om de eerste te pakken (niet altijd aangeraden kan erg flaky zijn)

cy.get('a[href="https://on.cypress.io/get"]').first().click()

Kijk hier bij should arguments naar 1 van de manieren om een Specifiek object  eruit te halen. https://docs.cypress.io/api/commands/should.html#Syntax