masavi / cypress-end-to-end-testing

W08D04 - End-to-End Testing with Cypress

To Do

• Jest vs Cypress
• Install and Configure Cypress
• Design End-to-End Tests with Cypress

Jest vs Cypress

• Jest
  • Command line test runner
  • Based around testing assertions
  • Used for unit and integration testing (mostly)
• Cypress
  • Runs its own browser to execute the tests in
  • Performs operations and interacts with the site the way that a user would (eg. typing into input fields, clicking on buttons)
  • Used for integration and E2E testing (mostly)

Install and Configure Cypress

• Cypress can be installed locally to the project (as a dev dependency) or globally on your OS

npm install -g [email protected]
npm install --save-dev [email protected]

• Use the open command to start Cypress running

# global installation
cypress open

# local installation
node_modules/.bin/cypress open

• Add a script to package.json for a quick way to start Cypress

"cypress": "node_modules/.bin/cypress open"

npm run cypress

• We use the cypress.json file in the main directory to configure Cypress

{
  "baseUrl": "http://localhost:3000",
  "viewportWidth": 1280,
  "viewportHeight": 1200
}

• baseUrl tells Cypress where our application is hosted and what port it's listening on
• viewportWidth and viewportHeight specify the dimensions for Cypress' browser to use
• Feel free to change the width and height values if developing for a mobile-first site

Folders/Files and their Purposes!

• /cypress.json: Used to override default configuration values.
• /cypress/fixtures: Test data; often in JSON.
• /cypress/integration: Our test specifications.
• /cypress/plugins: Add-ons to expand on Cypress' functionality.
• /cypress/support: Scripts; an area where we can add on to Cypress if needed.

Common Commands

• describe(), it(), and beforeEach() are afforded to us by Mocha.
  • Describe is used to, well, describe a block of tests!
  • It is used to label a specific test block / unit.
  • BeforeEach allows us an opportunity to add code/setup that will run before each text in the block.
• cy.visit() visits a web page.
• cy.get() Retrieves an HTML element based on jQuery/CSS-like selectors.
  • .as() Assign an alias for later use in cy.get() or cy.wait(), use an @ in a selector to call upon an alias.
• .find() Retrieves a child element from inside of a selected element.
• cy.intercept() Used for "spying" (checking for use of a particular request) or "stubbing" (replacing the response for a particular request.)
• cy.wait() Waits before proceding with test instructions.
• .click(), .type(), .check() are used to interact with elements and forms in a web page.

Resources

• Cypress (Official Website)
• Cypress Assertion Commands Doc
• should in Cypress
• (Chai) Assert in Cypress
• Trouble in WSL2? Follow the documentation carefully!
  • WSL2 requires X-Server, which usually requires Firewall tweaks to get through! It allows your Linux to reach Windows and render the program's GUI (Electron app: Cypress GUI.)
• End-to-End Web Testing with Cypress (O'Reilly Book)