Testing Web Apps with Cypress
Table of Contents
IntroductionSteve 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 & CodeSteve 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.
Test Runner OverviewSteve 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 TestSteve 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 TestsSteve 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 MethodSteve 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 FieldsSteve 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 ExerciseStudents 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 SolutionSteve live codes the solution to the Basic Practice exercise.
AliasesSteve 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 ExerciseStudents 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 SolutionSteve live codes one possible solution to the Aliases exercise.
Range Sliders & Select ListsSteve 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 ExerciseStudents 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 SolutionSteve live codes some of the possible solutions to the Input Testing exercise.
Generating Tests ExerciseStudents are instructed to generate tests for restaurant select menu and the rating filter.
Generating Tests SolutionSteve live codes the solution to the Generating Tests exercise.
Checking the Current PathSteve 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 ValidationSteve 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 ExerciseStudents 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 SolutionSteve 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 DataSteve 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 ExerciseStudents 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 SolutionSteve talks through the solution to the Sign In Test exercise and introduces Cypress Commands which will help make common tasks more reusable.
CommandsSteve 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 & InterceptSteve 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 SearchSteve 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.
FixturesSteve 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 PracticeSteve demonstrates a few additional network request test examples and allows some time for students to complete a few additional challenges.
Testing Cookies & SessionsSteve 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 DepthSteve 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 StudioSteve 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 IntegrationSteve 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.