Cypress — FE Testing.md

Front-End Testing With Cypress

Cypress is a front-end testing tool that runs in the browser. It allows us to perform unit and integration tests, snapshot tests, mock XHR requests, and directly interact with the UI. When developing, we can run these tests in Cypress' application, either one at a time, or in their entirety.

Getting started

1. In your command line, run export CYPRESS_BASE_URL=YOUR_LOCAL_URL_HERE to set an environment variable on your machine
   • e.g. export CYPRESS_BASE_URL=http://gmarraro.theladders.com:8443
   • From now on, cy.visit() and cy.request() will be automatically prefixed with this value
   • When tests run via the pre-push hook, this baseUrl must be defined
2. Run npm run cypress:open
   • This will open Cypress' application, through which you can decide which browser to test on, and which test to run
   • To run a test, simply click on it in the application. This will open a new browser window and navigate to the baseUrl you specified, and run the test
   • At each step of the test, you can hover over to see a screenshot of the test at that point in time
   • When saving a test file, if the test is running, it will automatically reload and rerun

Alternatively, for local development, skip step 1 and run CYPRESS_baseUrl=https://YOUR_URL.theladders.com:8443 npm run cypress:open

• However, for running the tests on push, you must do Step 1 to define the baseUrl

3. Create your tests in the cypress/pre-push-tests folder. The pre-push hook will run these tests only. Cypress examples are stored in the cypress/examples folder. If/when we delete these examples, this can be refactored.

Helpful tips

• When running a test that requires a logged in user, run cy.signup(); cy.wait(2000). This makes the network request to sign up, and waits to move onto the next command until the request has processed successfully.
  • Only after signing up can you run tests in the member app
  • After signing up, navigate to the route you are running a test on using cy.visit()
  • cy.signup is a custom command, which is useful for reusability, since in all member tests, we will need to sign up a new user. Custom commands are created in and exported from cypresss/support/commands.js
• Fixures
  • Fixtures allow us to load data, which is useful for making XHR requests
  • Each data chunk is located in its own file in cypress/fixtures
  • See search.spec.js for an example of how to use fixture data in a Cypress POST request
• Use cy.log() to log to the console during a test
• Interacting with elements
  • Use cy.get() and cy.find() to find elements, by property or by text
  • Current tests grab elements by className, although Cypress recommends using data atributes on elements, as they are less likely to change
• Run cy.server() before sending an XHR request

Enforcing tests

Tests are currently set to run via a pre-push husky hook. If absolutely need be, you can run git push --no-verify to skip tests. This should only be used for right now, while we are making sure these tests are foolproof.

We are working on running these tests via Jenkins instead.

Gotchas

• iframes — In Cypress, iframes are replaced by a placeholder. If you are attempting to interact with a UI element in an iframe (e.g. the credit card form on the paywall), a workaround is to use the wrap function around the iframe element. You will then be able to access the iframe's properties. (See paywall.spec.js for an example)