Testing Web Apps with Cypress
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
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.
Setup Cypress & Code
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
Test Runner Overview
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.
Creating Your First Test
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.
Get, Contains & Should Exist 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.
Should Test Method
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.
Testing Text Input Fields
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.
Basic Practice Exercise
Students are instructed to write tests for adding an item, filtering items on the page, removing an item, and marking items as packed/unpacked.
Basic Practice Solution
Steve live codes the solution to the Basic Practice exercise.
Aliases
Aliases
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.
Aliases Exercise
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.
Aliases Solution
Steve live codes one possible solution to the Aliases exercise.
Complex Inputs
Range Sliders & Select Lists
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.
Input Testing Exercise
Students are instructed to write tests for a variety of input elements including new elements like radio groups, color pickers, and file upload components.
Input Testing Solution
Steve live codes some of the possible solutions to the Input Testing exercise.
Generating Tests
Programmatically Generating Tests
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.
Generating Tests Exercise
Students are instructed to generate tests for restaurant select menu and the rating filter.
Generating Tests Solution
Steve live codes the solution to the Generating Tests exercise.
Checking the Current Path
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
Form Validation
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.
Form Validation Exercise
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.
Form Validation Solution
Steve discusses the solution to the Validation exercise. Side effects around generating user accounts for testing are also discussed in this segment.
Tasks & Commands
Tasks & Seeding User Data
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.
Sign In Test Exercise
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.
Sign In Test Solution
Steve talks through the solution to the Sign In Test exercise and introduces Cypress Commands which will help make common tasks more reusable.
Commands
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
Network Requests & Intercept
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.
Testing Search
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.
Fixtures
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.
Intercept Practice
Steve demonstrates a few additional network request test examples and allows some time for students to complete a few additional challenges.
Testing Cookies & Sessions
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
Mocking In Depth
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.
Cypress Studio
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.
Continuous Integration
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.
