Cypress starts out your project with a ton of tests, let’s remove those and add our first test that verifies our calculator can add two numbers together using the Cypress selector playground and Cypress commands.

Install, Configure, and Script Cypress for JavaScript Web Applications

Write the First Cypress Test

Instructor: 00:01 Now we actually want to test our application. We don't really care about this example thing. I am going to get rid of that. In it's place, I am going to create a new file called `calculator.js`. The Cypress testing framework is very similar to MOCA.

00:13 We can use `describe` blocks, and we'll say anonymous calculator. We'll make an `it` block. We can say it `'can make calculations'`. We'll just save it like it is right here.

#### integration/calculator.js
```js
describe('anonymous calculator;', () => {
  it('can make calculations', () => {})
})
```

Now let's go ahead and `npx Cypress open` to get our Cypress app running.

#### terminal
```bash
npx cypress open
```

00:32 With that, now we have our one calculator test. We click run all aspects. That's going to get Cypress running. It's working great.

![first cypress test running](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1574727278/transcript-images/cypress-write-the-first-cypress-test-first-cypress-test.png)

What we need to do is get our application started. I am going to open another terminal.

00:44 We'll run `npm run dev` to start our dev script, which fires up Webpack on port 8080.

```bash
npm run dev
```

If we open up a new tab, go to `localhost:8080`, that takes me to our app. We just need to make our app inside of Cypress go to that URL.

01:00 We'll follow the instructions right here on the web page. Start your app server. Step one, done. `cy.visit` to get to our app and then begin writing our test. Let's do that. In `calculator.js`, go `cy.visit` and that's `http://localhost:8080`. Refresh, and it gets right to our app really quick.

#### integration/calculator.js
```js
describe('anonymous calculator;', () => {
  it('can make calculations', () => {
    cy.visit('http://localhost:8080')
  })
})
```

01:17 Great. Now we want to start writing some test and lets say we wanted to click one and then click on plus and then click on two and then click on equals and verify that it does in fact say three.

01:27 To do this, lets click on the open select your playground and we'll click on the number 1.

![open selector playground](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1574727278/transcript-images/cypress-write-the-first-cypress-test-open-selector-playground.png)

That gives us the selector that doesn't look all that great, but it does match our one and we can improve this later.

01:38 The reason it looks so funny is because we're using CSS modules for this and that makes up some pretty weird CSS selectors. I'm going to in and copy that. We'll use `cy.get`. We'll put that in there and that's going to get us that button.

```js
describe('anonymous calculator', () => {
  it('can make calculations', () => {
    cy.visit('http://localhost:8080')
    cy.get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(3)')
  })
})
```

01:52 These commands are actually chainable so I can get rid of the `cy` and we'll chain these.

```js
describe('anonymous calculator', () => {
  it('can make calculations', () => {
    cy.visit('http://localhost:8080')
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(3)')
  })
})
```

We'll just format it nicely like this. With that now, out tests run pretty quick but it shows us getting that node. Now, we want to click on that. We're going to do `.click` and that will get us clicking on that note.

```js
describe('anonymous calculator', () => {
  it('can make calculations', () => {
    cy.visit('http://localhost:8080')
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(3)')
      .click()
  })
})
```

02:09 Now, we can see the 1 being displayed on the calculator. What do we want to click on next? Let's use the playground selector again. We want to click on the plus. We'll copy that, come down here and do another `get` to get the plus.

02:20 We'll `click` on that.


```js
describe('anonymous calculator', () => {
  it('can make calculations', () => {
    cy.visit('http://localhost:8080')
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(3)')
      .click()
      .get('._1yUJ9HTWYf2v-MMhAEVCAn > :nth-child(4)')
      .click()
  })
})
```

Let's go ahead and we'll save that and we'll see that's going on right here. Then we want to click on the `2`. I'll do the two right here. We'll copy that. Do a `.get` and then another `click`.

```js
describe('anonymous calculator', () => {
  it('can make calculations', () => {
    cy.visit('http://localhost:8080')
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(3)')
      .click()
      .get('._1yUJ9HTWYf2v-MMhAEVCAn > :nth-child(4)')
      .click()
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(4)')
      .click()
  })
})
```

Save that. The test run pretty quick. Perfect.

02:38 Now, we want to click on the equal sign, so we'll click on that, copy that and do a `get` to switch our subject to that and `click` on that element.

```js
describe('anonymous calculator', () => {
  it('can make calculations', () => {
    cy.visit('http://localhost:8080')
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(3)')
      .click()
      .get('._1yUJ9HTWYf2v-MMhAEVCAn > :nth-child(4)')
      .click()
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(4)')
      .click()
      .get('._1yUJ9HTWYf2v-MMhAEVCAn > :nth-child(5)')
      .click()
  })
})
```

There we go. Now we've got a three displayed on our calculator, so let's verify the three is actually showing three. This display text will say `.get` that number 3 node.

02:55 With that, we want to make an assertion so if you're familiar with the try assertion library, that's baked into Cypress but it's backed in in a little bit of an interesting way because of the asynchronous nature of Cypress. We'll say `.should('have.text', '3')`.

```js
describe('anonymous calculator', () => {
  it('can make calculations', () => {
    cy.visit('http://localhost:8080')
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(3)')
      .click()
      .get('._1yUJ9HTWYf2v-MMhAEVCAn > :nth-child(4)')
      .click()
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(4)')
      .click()
      .get('._1yUJ9HTWYf2v-MMhAEVCAn > :nth-child(5)')
      .click()
      .get('.mNQM6vIr72uG0YPP56ow5')
      .should('have.text', '3')
  })
})
```

We'll save that. Our test runs pretty quick.

03:11 If we go back and change the 3 to 4, we can verify that our test does pass. It does actually wait for four seconds before it decides, "OK. I waited for a little while and that three has not changed to four yet, so I'm going to just guess that it's not ever going to change to four so we'll just say that this failed."

03:27 Let's go ahead and fix that back to three, our test runs and it's passing. With each subsequent command that we're issuing to Cypress, we're changing the subject of Cypress. Because Cypress is all chainable like this, it maintains a subject. Certain commands like `get` will change that subject to DOM nodes. There are commands that operate on the subject like this `click` or like an assertion command.

03:50 Each one of these commands are executed asynchronously. That means that it's not running visit, and then get, and then click, and then get and then click again rapidly one right after the other. Actually, each one of these commands is running asynchronously.

04:03 It is running pretty quick and we can watch it run all of those pretty quick, but it's still not happening in rapid succession because each one of these commands are going to be running asynchronously. That's intentional because we want to simulate a user using our application.

04:15 That's why sometimes, I like to call `cy` -> `user` and then we say, "User, I want you to visit that thing and then user, I want to get that and then user, I want to click on that." The way that I see these commands is more of a list of instructions that I'm going to give to a user, rather than to a to the Cypress robot.

```js
describe('anonymous calculator', () => {
  it('can make calculations', () => {
    const user = cy
    user.visit('http://localhost:8080')
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(3)')
      .click()
      .get('._1yUJ9HTWYf2v-MMhAEVCAn > :nth-child(4)')
      .click()
      .get('._2S_Gj6clvtEi-dZqCLelKb > :nth-child(4)')
      .click()
      .get('._1yUJ9HTWYf2v-MMhAEVCAn > :nth-child(5)')
      .click()
      .get('.mNQM6vIr72uG0YPP56ow5')
      .should('have.text', '3')
  })
})
```


04:33 That's the way that you should be thinking about your test. Think about these commands as instructions that you're giving to a manual tester.

04:39 In review for this one, we created a `describe` block for anonymous calculator. We created an `it` block for specific test indicating that this app can make calculations. We visited the app and then we got each one of the buttons, clicked on them and asserted that our calculator can add those numbers together.


 is an incredibly powerful web testing tool. It’s capable of testing any web application. Its architecture places it a cut above similar end-to-end testing tools. Its developer experience is best-in-class. And because Cypress runs your tests in the same context as the rest of your application, you’re able to get speed, reliability, and debuggability that are just a long - distant dream with similar tools. The catch? There is no catch. Cypress is exceptional.

In this course, we’ll go over how you can install, configure, and script Cypress to test modern, real - world JavaScript web applications.

What's changed in Install, Configure, and Script Cypress for JavaScript Web Applications

Intro to Install, Configure, and Script Cypress for JavaScript Web Applications 

Despite the fact that Cypress is an application that runs natively on your machine, you can install it and add it as a dependency just like all other dependencies in your package.json file. So let's install Cypress and get our project ready to start end-to-end testing with Cypress.

Install and Run Cypress

Cypress is fairly simple to configure, but it’s important to optimize our experience in testing Cypress. We’ll configure the baseUrl to make it easier to visit our app and we’ll also move our test files to a folder called e2e to make it more clear what types of tests we want to write with Cypress. We’ll use the cypress.json file, but Cypress can also be configured via command line flags and environment variables.

Configure Cypress in cypress.json

Our selectors are pretty ridiculous, mostly because we’re using CSS-in-JS and css modules for our react application. But even if we weren’t, using class names as selectors for our application testing is pretty brittle and not really testing in the way a user would. So instead let’s use cypress-testing-library to improve our selectors and make it easier to read our tests.

There's been a small breaking change to Cypress Testing Library that affects the code in this video. [Learn more here.](https://github.com/testing-library/cypress-testing-library/releases/tag/v6.0.0)

Installing Cypress Testing Library

We want to make starting cypress as simple as possible for local development and we need to be able to run a single script that exits when the tests are complete for continuous integration. So let’s add a few scripts to get ourselves setup for this development experience.

Script Cypress for Local Development and Continuous Integration

One of the greatest features of Cypress is how awesome the experience of debugging tests is. You do have to get used to the asynchronous nature of E2E testing, but once you get the hang of that debugging is pretty straightforward, and the ability to debug your own source code is awesome. The fact that your test and source code are executed in the same context also gives you some powerful advantages as well. You can potentially even expose some internal state to your Cypress app.

Debug a Test with Cypress

Let’s write a test to fill out our registration form. Because we’ll be running this against a live backend, we need to generate the user’s information to avoid re-runs from trying to create new users that already exist. There are trade-offs with this approach. You should probably also clean out the application database before all of your tests start (how you accomplish this is pretty application-specific). Also, if your application requires email confirmation, I recommend you mock that on the backend and automatically set the user as confirmed during tests.

There's been a small breaking change to Cypress Testing Library that affects the code in this video. [Learn more here.](https://github.com/testing-library/cypress-testing-library/releases/tag/v6.0.0)

 Test User Registration with Cypress

Because Cypress allows you to use all the developer tools you’re used to from Google Chrome, you can actually use Cypress as your main application development workflow. If you’ve ever tried to develop a feature that required you to be in a certain state you’ve probably felt the pain of repeatedly refreshing the page and clicking around to get into that state. Instead, you can use cypress to do that and developer your application entirely in Cypress.

There's been a small breaking change to Cypress Testing Library that affects the code in this video. [Learn more here.](https://github.com/testing-library/cypress-testing-library/releases/tag/v6.0.0)

Cypress Driven Development

Normally I prefer to test error states using integration or unit tests, but there are some situations where it can be really useful to mock out a response to test a specific scenario in an E2E test. Let’s use the cypress server and route commands to mock a response from our registration request to test the error state.

Simulate HTTP Errors in Cypress Tests

To test user login we need to have a user to login with. We could seed the database with a user and that may be the right choice for your application. In our case though we’ll just go through the registration process again and then login as the user and make the same assertions we made for registration.

There's been a small breaking change to Cypress Testing Library that affects the code in this video. [Learn more here.](https://github.com/testing-library/cypress-testing-library/releases/tag/v6.0.0)

Test User Login with Cypress

We’re duplicating a lot of logic between our registration and login tests and not getting any additional confidence, so lets reduce the duplicate logic and time in our tests using cy.request to get a user registered rather than clicking through the application to register a new user.

There's been a small breaking change to Cypress Testing Library that affects the code in this video. [Learn more here.](https://github.com/testing-library/cypress-testing-library/releases/tag/v6.0.0)

Create a User with cy.request from Cypress

We’re going to need a newly created user for several tests so let’s move our cy.request command to register a new user into a custom Cypress command so we can use that wherever we need a new user.

There's been a small breaking change to Cypress Testing Library that affects the code in this video. [Learn more here.](https://github.com/testing-library/cypress-testing-library/releases/tag/v6.0.0)

Keep Tests Isolated and Focused with Custom Cypress Commands

Use Custom Cypress Command for Reusable Assertions

For most applications you’re going to need to be logged in as a user to interact with the application. Let’s see how we can register as a new user and login as that user to test using the application as a logged in user.

There's been a small breaking change to Cypress Testing Library that affects the code in this video. [Learn more here.](https://github.com/testing-library/cypress-testing-library/releases/tag/v6.0.0)

Run Tests as an Authenticated User with Cypress

We’re duplicating a bunch of commands between our new test and the login test and it’s not giving us any more confidence that the application is working properly. So let’s do the same thing we did with registration and make a cy.request command to login with the newly created user to speed up our test and make it more focused.

There's been a small breaking change to Cypress Testing Library that affects the code in this video. [Learn more here.](https://github.com/testing-library/cypress-testing-library/releases/tag/v6.0.0)

Use cy.request from Cypress to Authenticate as a New User

It’s pretty likely that we’ll need to login as a particular user for many tests, let’s take our cy.request command and turn it into a custom command to make it easier for the places we’ll be needing a logged in user.

There's been a small breaking change to Cypress Testing Library that affects the code in this video. [Learn more here.](https://github.com/testing-library/cypress-testing-library/releases/tag/v6.0.0)

Use a Custom Cypress Command to Login as a User

Combine Custom Cypress Commands into a Single Custom Command

Because Cypress runs in a real Chrome browser, we can install extensions, like React DevTools. The tricky bit will be to make our application hook up to the extension properly.

Write the First Cypress Test

Transcript

Write the First Cypress Test