Cypress executes in our frontend, so let's carry out the following steps to install and configure Cypress in our frontend project:

1. We'll start by installing cypress from the Terminal:

> npm install cypress --save-dev

2. We are going to add an npm script to open Cypress by adding the following line to package.json:

"scripts": {
  ...,
  "cy:open": "cypress open"
},

3. Let's open Cypress by executing our npm script in the Terminal:

> npm run cy:open

After a few seconds, Cypress will open, showing a list of example test files that have just been installed:

These examples can be found in the cypress/integration/examples folder in our project. If we open one of these test files, we'll see that they're are written in JavaScript. These examples are a great reference source as we learn and get up to speed with Cypress.

4. Click the actions.spec.js item. This will open this test and execute it:

We can see the tests on the left and check whether they have passed or failed with the app that is being tested on the right.

5. If we click the submit() - submit a form test, we'll see all the steps in the test. If we click on a step, we'll see the app on the right in the state it was in at that juncture: 

This is really useful when debugging test failures.

6. Let's close Cypress for now and return to the Terminal to install the Cypress Testing Library:

> npm install @testing-library/cypress --save-dev

The Cypress Testing Library is similar to the React Testing Library in that it helps us select elements to check without using internal implementation details.

7. To add Cypress Testing Library commands, we need to insert the following line at the top of the commands.js file, which can be found in the support folder of the cypress folder:

import '@testing-library/cypress/add-commands';

8. Let's add some Cypress configuration settings by opening the cypress.json file in the root of the project and adding the following settings:

{
  "baseUrl": "http://localhost:3000",
  "chromeWebSecurity": false
}

The baseUrl setting is the root URL of the app we are testing.

Our test will be using Auth0 and our app, so it will be working on two different origins. We need to disable Chrome security using the chromeWebSecurity setting to allow the test to work across different origins.

9. Cypress runs our app and Auth0 in an IFrame. To prevent clickjacking attacks, running in an IFrame is disabled by default in Auth0. So, let's disable clickjacking protection in Auth0 by selecting the Settings option under our user avatar menu and then selecting the Advanced tab. An option called Disable clickjacking protection for Classic Universal Login can be found toward the bottom of the Advanced tab. We need to turn this option on:

10. When we write our tests, we will be accessing a global cy object from Cypress. Let's tell ESLint that cy is okay by adding the following to the .eslintrc.json file:

{
  ...,
  "globals": {
    "cy": true
  }
}

Now, Cypress has been installed and configured so that we can implement a test on our Q and A app.