End To End Testing with Cypress

Getting Started

1. Create a directory
2. Change into your directory
3. Run the following commands:
   • npm install --save-dev cypress
   • npx cypress open
4. To run the test from the CLI:

• npx cypress run

Getting selectors with Cypress

cy.get(".query-selector").as("someSelector"); <-- Caches the selector
cy.get("@someSelector").find(".some-other-query-selector") <-- gets the cached selector 
cy.get(".some-list items").eq(1)

cy.get("h2").should("have.text", "The Header Text") <-- BDD syntax 

99% of acceptance testing is "Given a certain state exists, when a user takes this action, this new state exists"

There's even a name for it- the "triple A" test

arrange, act, assert

so, for a form, that might look something like: Arrange: "I go to a list page, and I make sure the URL is correct, and there are 3 items. I navigate to a page, the URL is correct, the form shows up on the page, and all of its inputs are blank" Act: "The user types into the fields and hits the enter key" Assert: "The URL is the same, all of the fields are now empty, I see a success message. If I navigate to the list page, I see 4 items, and the thing that I entered is at the top of the list."

that's the happy path for a complete feature