End-to-end testing with Cypress series: 02 Getting Started
- Publish Date
- Authors
- Jeremy Fairbank
- Location
- Maui, HI, USA
Transcript
In this video, get started with writing end-to-end tests with Cypress. After you follow along with this video, you will be able to create a Cypress end-to-end test suite for your own application and add basic tests to it.
You will learn how to:
- set up a demo application to test against
- install Cypress and initialize a new Cypress end-to-end test suite
- create a new Cypress end-to-end test file
- use Cypress commands and default assertions to create your first test
- how to view test run results
Cypress version notice
At the time this video was recorded, Cypress was at version 7.5.0. Since then Cypress has released newer versions. Test Double recommends still installing Cypress 7.5.0 as the video directs, but the test suite in this video should still run with newer versions of Cypress. Should you run into any issues installing Cypress, Test Double can only offer support if you install version 7.5.0.
Initializing test suite notice
After running npx cypress open
, you may see a message that no version of
Cypress is installed in your computer’s apps. If that happens, you can run npx cypress install
to install the Cypress app, and then run npx cypress open
after that.
- 00:00
- (bouncy music)
- 00:03
- Welcome back to Test Double's intro course
- 00:06
- on End-to-end Testing with Cypress.
- 00:09
- In the last video,
- 00:10
- you learned what end-to-end testing and Cypress are.
- 00:13
- Let's take your knowledge further
- 00:15
- by working hands on with Cypress.
- 00:18
- In this video, you will install Cypress,
- 00:21
- initialize a test suite,
- 00:23
- and write your first test.
- 00:25
- But before you get started,
- 00:26
- you need something to actually test.
- 00:29
- A new startup has been moving a bit too fast,
- 00:32
- building their new Agile project management software,
- 00:35
- yams or yet another management solution.
- 00:39
- After breaking too many things,
- 00:40
- they brought you in to help them get a better handle
- 00:43
- on their application through end-to-end testing.
- 00:46
- They've given you complete control
- 00:48
- over what testing should look like
- 00:50
- and eagerly await your recommendations.
- 00:53
- Let's get started.
- 00:55
- You'll first need a copy of the app to run on your machine.
- 00:58
- The app source code is hosted on GitHub,
- 01:01
- so, first, head over to this URL.
- 01:04
- Later in this course, you will learn
- 01:05
- how to set up continuous integration to run Cypress tests.
- 01:10
- So instead of cloning this repo,
- 01:12
- you'll want to fork it instead.
- 01:15
- Click on the Fork link,
- 01:17
- then select your GitHub user
- 01:19
- from your available user/organizations.
- 01:24
- You should now be on your forked copy of the repo.
- 01:27
- Now you can clone your repo
- 01:28
- with whatever GitHub workflow you're used to.
- 01:31
- I like to copy the SSH URL and clone from my local terminal.
- 01:41
- Once you have a local copy of the app,
- 01:43
- follow the instructions in the README
- 01:45
- to install dependencies and run the application.
- 01:49
- We won't cover installing the dependencies in this video,
- 01:52
- so feel free to pause while you do that.
- 01:55
- Resume the video once you have the backend
- 01:57
- and frontend running.
- 01:59
- If you have any issues installing dependencies
- 02:01
- or running the app, please open an issue
- 02:04
- on Test Double's original copy of the repo.
- 02:07
- Now that you have the backend and frontend running,
- 02:10
- you should see something like this:
- 02:12
- a project board with five columns
- 02:14
- and two example cards in the Backlog
- 02:17
- and In Progress columns.
- 02:19
- You can add new tasks by clicking on Add Task
- 02:22
- in one of the columns.
- 02:24
- You should see this form with the status pre-filled.
- 02:28
- You can give it a title, description, estimate,
- 02:31
- and any blockers.
- 02:34
- After clicking Save,
- 02:35
- the new card should appear on the board.
- 02:38
- You can also click on the card to edit it
- 02:41
- and move it to a different column.
- 02:50
- Now that you've verified the app runs,
- 02:52
- you can start testing with Cypress.
- 02:55
- Stop the backend server in the yams_api folder.
- 02:58
- Then from the yams_api folder,
- 03:01
- start up the server in a more appropriate environment
- 03:03
- for testing with one of the options mentioned
- 03:06
- in the project README,
- 03:07
- depending on how you set up the backend.
- 03:10
- Here, I'm using Docker.
- 03:12
- Once the server boots up, refresh the browser
- 03:15
- to make sure you see an empty project board.
- 03:19
- Next, you need to install Cypress.
- 03:21
- Technically, Cypress has already been added to the app
- 03:24
- for you to ensure we're working with the same version,
- 03:27
- but let's install it anyway
- 03:29
- so you get the full picture
- 03:30
- of setting up a Cypress test suite.
- 03:33
- Change to the frontend yams folder and run this command.
- 03:38
- You install it with npm as a dev dependency
- 03:41
- since it isn't needed in the production build.
- 03:44
- You also specify the version with the @ symbol
- 03:48
- to again maintain version consistency.
- 03:51
- After installation finishes,
- 03:53
- run this command to initialize the Cypress test suite.
- 03:57
- npx is a utility installed with npm
- 03:59
- to simplify running any node package binaries.
- 04:03
- It favors locally installed ones in node modules first.
- 04:07
- So this will call the Cypress binary
- 04:09
- in your node_modules/.bin folder,
- 04:12
- passing in the command open.
- 04:15
- You should see a message like this.
- 04:18
- Eventually the Cypress app should open up.
- 04:21
- You should see a message
- 04:22
- that Cypress has created a folder structure for you
- 04:25
- with example test files also known as spec files.
- 04:29
- Dismiss the modal
- 04:30
- and click on one of the example spec files.
- 04:34
- A new browser window should open.
- 04:36
- You should see a list of test descriptions on the left
- 04:39
- and a page from example.cypress.io on the right.
- 04:43
- Cypress will run each spec on the left one after the other.
- 04:48
- You should see it interact
- 04:49
- with the page on the right very rapidly.
- 04:52
- Once it completes, you should see a check mark
- 04:54
- next to each test description indicating the test passed.
- 04:58
- Now that you've verified you can run Cypress,
- 05:01
- it's time to write your first real test.
- 05:04
- Close the browser window
- 05:05
- or click on Stop on the Cypress window
- 05:08
- to end running the spec file.
- 05:10
- Leave the Cypress window open
- 05:12
- and transition back to your terminal.
- 05:15
- In a new terminal window, inspect your yams folder.
- 05:19
- You should see some new things added by Cypress.
- 05:22
- You should have a Cypress folder
- 05:24
- and a cypress.json file.
- 05:26
- Feel free to inspect the Cypress folder.
- 05:29
- It contains multiple subfolders
- 05:31
- for holding your spec files and other supporting files.
- 05:34
- Specs are contained within the integration subfolder.
- 05:38
- Ignore the cypress.json file for now.
- 05:40
- We'll look at it in a later video.
- 05:43
- Inside the Integration subfolder,
- 05:45
- create a new file called tasks.spec.js
- 05:49
- and open it in your preferred text editor.
- 05:53
- Cypress uses Mocha.js' BDD syntax for writing spec files.
- 05:58
- Add a describe call first,
- 06:00
- passing in a top-level string description of tasks
- 06:03
- and an anonymous function.
- 06:05
- Notice that I'm not using an arrow function here.
- 06:10
- We'll dive more into why in a later video.
- 06:12
- Inside the anonymous function, add a call to it,
- 06:15
- passing in a string test description
- 06:18
- and another anonymous function.
- 06:20
- Inside the nested function, add this code and save.
- 06:26
- Every Cypress spec file has access
- 06:28
- to a global C-Y or cy object.
- 06:32
- This cy object exposes a ton of methods known as commands
- 06:36
- that instruct Cypress to do something.
- 06:39
- The visit command tells Cypress
- 06:41
- to visit a URL in the browser.
- 06:43
- In this case, you tell Cypress
- 06:45
- to visit the locally running dev server for yams.
- 06:49
- Go back to the Cypress window and scroll to the bottom.
- 06:52
- Cypress uses a file watcher to check for any new spec files
- 06:56
- and adds them to the list.
- 06:58
- You should see your task.spec.js file in the list.
- 07:02
- Click on it.
- 07:04
- The Cypress browser window should open
- 07:06
- and run the single test.
- 07:09
- You should see the yams board
- 07:10
- and the webpage on the right.
- 07:12
- Visiting the page you want to test is important,
- 07:15
- but you need to actually verify
- 07:17
- the page has what you expect on it.
- 07:20
- Let's verify that the Backlog status column exists.
- 07:24
- Add this code under the visit command.
- 07:28
- These are selector commands.
- 07:30
- The get command accepts a DOM selector
- 07:32
- using jQuery-like syntax.
- 07:35
- The contains command accepts a string
- 07:37
- to search for HTML elements that contain the provided text.
- 07:42
- Notice that you you can change some Cypress commands.
- 07:45
- Here you call contains after get.
- 07:48
- Essentially you're telling Cypress to look for an h2 tag
- 07:52
- that contains the text backlog.
- 07:55
- Save and go back to the Cypress browser window.
- 07:59
- The test should automatically rerun after saving and pass.
- 08:03
- On the left, you should see a log
- 08:04
- of the different commands that were run.
- 08:07
- There is an entry for the visit command
- 08:09
- and another entry and sub-entry
- 08:11
- for the get and contains commands.
- 08:14
- If you're familiar with other testing frameworks,
- 08:16
- you typically use whatever helpers it provides
- 08:19
- to make explicit assertions about the behavior
- 08:22
- of whatever is under test.
- 08:24
- Cypress has explicit assertions,
- 08:26
- but here you use what are known as default assertions.
- 08:30
- Default assertions are implicit.
- 08:33
- The get and contains commands both find elements in the DOM
- 08:37
- and blow up if they fail to find those elements
- 08:39
- in a sufficient amount of time,
- 08:42
- so these commands effectively function as assertions too.
- 08:46
- Your test will fail
- 08:47
- if they cannot find what you're looking for.
- 08:50
- Try that out by changing the text backlog in contains
- 08:54
- to something else like not found and then saving.
- 08:59
- The test should rerun and eventually fail
- 09:01
- because it cannot find the text not found.
- 09:05
- Change the text back to backlog
- 09:07
- and then let's verify the other status columns exist.
- 09:12
- Copy the chained get and contains commands
- 09:15
- and replace the expected text
- 09:17
- with that of the other column headers.
- 09:19
- Save the file, and you should see the test run again
- 09:22
- and see more commands in the log,
- 09:25
- checking for the other headers.
- 09:27
- Great work, you just wrote your first Cypress test.
- 09:31
- Let's recap what you learned in this video.
- 09:34
- You used npm to install Cypress,
- 09:37
- you used npx and the Cypress binary to start the Cypress app
- 09:42
- and initialize your first Cypress test suite,
- 09:45
- you used JavaScript and Mocha.js' BDD syntax
- 09:48
- to write your first test,
- 09:50
- and you also learned about Cypress commands
- 09:53
- and default assertions.
- 09:55
- You're now ready to create a Cypress test suite
- 09:58
- for your own projects, but we won't stop there.
- 10:01
- In the next video,
- 10:02
- you will learn about testing real-world user scenarios.
- 10:06
- (bouncy music)
‹ End-to-end testing with Cypress series: 01 Welcome
End-to-end testing with Cypress series: 03 Real-world tests ›
Jeremy Fairbank
- Status
- Double Agent
- Code Name
- Agent 0029
- Location
- Maui, HI