Temporal
Testing Web Apps with Cypress
4 hours, 41 minutes
CC
Course Description
Cypress is the fastest and easiest way to write end-to-end tests for your client-side applications. Learn the selector engine, test runners, assertion library, and write your own custom commands. Seed your database using Tasks in Node.js, and mock and stub out network requests, so you're not relying on external APIs that you don't control. Finally, integrate your Cypress tests with your CI/CD pipeline using GitHub Actions!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
I could not have asked for a better introduction to Cypress testing than this class: "Testing Web Apps with Cypress" by Steve Kinney on Frontend Masters!
Shahlo Seidmedova
SSeidmedova
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 18 minutes
Steve Kinney begins the course by introducing Cypress and highlighting a few of the key features. Cypress offers end-to-end testing for any browser-based web application. It offers time traveling, real time reloads, and automatic waiting. A walkthrough of the course repository is also included in this segment.
Steve discusses the ways Cypress can be installed and run. Cypress runs in a separate application. The first time it's opened, both a cypress directory and a cypress.json file are created in the project. A number of example test files are also added to the project.
Testing Basics
Section Duration: 1 hour
Steve runs an example test script in Cypress and walks through how to use the test runner. Cypress launches a clean version of a web browser. The application runs in an iFrame next to a summary of the tests. The viewport size can be customized in the interface or in the configuration file. The console and other debugging tools are also demonstrated in this segment.
Steve switches back to the main course repository and writes the first test. The beforeEach method is used to instruct Cypress to navigate to a specific URL before running any tests.
Steve uses the get method to query the page for a form element. Then a should('exists') test is added to verify a form element exists on the page. The contains test method is also used to verify the button contains the string "Add Item". Selectors like the get method use jQuery search queries.
Steve demonstrates alternative ways to use the should test method. It can be omitted when simply testing for existence since the selector failing to find an element in the DOM will also result in a failed test. The should method can be used in place of the contains method and be chained with other tests that are run on the same selector.
Steve discusses a few other techniques for selecting elements and uses the type method to add text to an input text field. Even though Cypress uses jQuery for selecting elements, only a single element is returned. A more reliable way to name elements is with the data-test attribute.
Students are instructed to write tests for adding an item, filtering items on the page, removing an item, and marking items as packed/unpacked.
Steve live codes the solution to the Basic Practice exercise.
Aliases
Section Duration: 23 minutes
Steve explains how aliases can easily reference objects like DOM nodes, fixture data, or network requests in tests. The "as" method is used to create an alias. When aliases are used in a selector, they are prefixed with the "@" symbol.
Students are instructed to make an alias for the filter input, type a search term into the filter, and verify that only one item appears in the results on the page.
Steve live codes one possible solution to the Aliases exercise.
Complex Inputs
Section Duration: 25 minutes
Steve demonstrates how to test complex inputs like range sliders and select boxes. The Cypress API offers methods for choosing values in a select box. For range sliders, invoking the jQuery val method allows the test to set a specific value.
Students are instructed to write tests for a variety of input elements including new elements like radio groups, color pickers, and file upload components.
Steve live codes some of the possible solutions to the Input Testing exercise.
Generating Tests
Section Duration: 34 minutes
Steve demonstrates how to use JavaScript to programmatically generate Cypress tests. The IDs for a group of checkboxes are stored in an array and a for-in loop is used to select and element based on the array value and create a test.
Students are instructed to generate tests for restaurant select menu and the rating filter.
Steve live codes the solution to the Generating Tests exercise.
Steve explains why checking a page's URL can be more reliable than querying content in the DOM. The location method can query the current path and compare it to an expected string value. The title method, which queries the page title, is also demonstrated in this segment.
Form Validation
Section Duration: 15 minutes
Steve explores a few strategies for testing form validation with Cypress. A test can check a field for the presence of the :invalid pseudo class. The field's validationMessage or validity properties can also be checked for specific values.
Students are instructed to test the form's email and password validation. A correctly formatted email should be the only value accepted by the email field. The password field cannot be empty.
Steve discusses the solution to the Validation exercise. Side effects around generating user accounts for testing are also discussed in this segment.
Tasks & Commands
Section Duration: 26 minutes
Steve explains how tasks run outside the browser at the server level. They are useful for seeding a database or getting the server environment in a specific state before a test runs. The task method allows Cypress to call a specific task from within the describe block. Tasks return a Promise which needs to resolve before the test continues to run.
Students are instructed to test the sign in process. The database should first be seeded with users. The test should log in with one of the users and verify the login works.
Steve talks through the solution to the Sign In Test exercise and introduces Cypress Commands which will help make common tasks more reusable.
Steve explains how commands allow for custom methods to be added to the Cypress so common code routines can be reused. Arguments can be passed into commands making them easy to abstract.
Network Requests & Sessions
Section Duration: 48 minutes
Steve introduces the intercept method which allows Cypress to catch network requests to a particular API. An interception can either test if a network request occurs or replace the response from the request with mock data.
Steve uses an intercept to help test the search text field. After a search query is submitted, the intercept verifies the network request is sent. Additional test check the query parameters in the url of the request object.
Steve explains that fixtures is the dummy data that replaces a response during an API call. Fixtures are useful when tests are not checking the result of an API call, but rather how the application handles the data. Fixtures can be hard-coded within a test or be loaded from an external JSON file.
Steve demonstrates a few additional network request test examples and allows some time for students to complete a few additional challenges.
Steve walks through a few ways to test cookie and session data. The getCookie and setCookie methods read and write the cookie data to the browser. Mocking the cookie data can helpful when saving data from an API call is not required.
Mocking & Continuous Integration
Section Duration: 18 minutes
Steve walks through some additional examples for mocking requests and data within Cypress. Requests can be intercepted based on the type of request such as GET or POST. Full API requests can be stubbed eliminating the need for the endpoint to be available during the test.
Steve demonstrates Cypress Studio which writes tests based on actions performed in the user interface. When the command generator is selected, any actions performed within the interface are written in the test file.
Steve demonstrates how continuous integration works with Cypress. The command `npx cypress run` opens a headless version of the browser to run the tests. All tests are executed with the results displayed in the command line.
Wrapping Up
Section Duration: 7 minutes
Steve wraps up the course answering audience questions about managing keys/secrets, automating a subset of tests within a test suite, reviewing Cypress Studio videos, and acceptable testing durations.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops