Cypress: E2E Test Automation - Getting Started

Clone the Cypress Mastery Real World app from GitHub, install dependencies with npm install, configure Postgres in a .env file, and run the dev server to seed test data.

install Cypress and set it as a dev dependency, open Cypress in the terminal, then select chrome, create a simple auth spec, and run end-to-end test from the e2e folder.

Learn how Cypress test suites use describe and it to organize authorization tests, with nested blocks for register and login, plus context alias and VSCode mocha snippets.

Explore the arrange, act, assert pattern to structure end-to-end tests in Cypress, covering setting up preconditions, simulating user actions, and validating outcomes with assertions.

Configure VS Code for Cypress code completion by adding a jsconfig.json at the project root, then use hover help and visit command parameters as a built-in cheat sheet.

Visit the register page using the visit command and apply a best practice: set a global base URL in Cypress config to streamline tests across environments and reduce startup flashing.

Learn multiple methods to select elements in Cypress tests using DevTools, including by class, by id, and by data test ID, with guidance on using dot, hash, and attribute selectors.

Practice selecting elements in Cypress for the first test in the authorization spec, locating username, email, and password inputs with sign up battle, and applying best practices from previous lessons.

Select email and password inputs on the register page using data test id attributes, then run the Cypress test and verify results in the logs.

Perform actions on previously found elements using type and click commands to input values for username, email, and password, then handle waits and assertions to verify registration flow.

Generate dynamic test data for Cypress e2e tests with faker package, creating usernames and emails for register tests. Install and import faker, then apply an arrange phase to ensure reliability.

Add two Cypress assertions to verify redirect to the home page and that the registered user is logged in, using the location hash and header username with data test id.

Learn to create a custom getByTestId command in Cypress to simplify selecting elements by data tested attribute, organize commands, update support files, and enable code completion with TypeScript typings.

Learn how to run a single test with .only() and skip tests with .skip() in Cypress, and boost efficiency with the Cypress Helper plugin for faster, isolated test development.

Learn how to write your first Cypress end-to-end tests, verify unauthenticated redirects to the home page, and perform chained assertions on error messages using the data attribute.

Explore Cypress hooks, including before all, before each, and after, to prepare test state, visit the register page, and clean up data, with nested describe and context blocks.

Learn how to locate elements by their text in Cypress using the contains method, including case sensitivity, partial text matching, and scoping within sections or forms, with practical examples.

Explore contains() element preference, where the a tag is yielded over its span, exposing title, description, and class attributes, and learn to disable this with a selector.

learn to select a specific item from a list using Cypress by position with eq(), first(), and last(), targeting articles with class article preview and applying assertions.

Learn how to scope element searches with Cypress's find command, locating elements within a previously selected element and chaining with get to target all articles on the page.

Learn how to filter and exclude elements with filter and not commands, using examples with pagination, contains selectors, and jQuery selectors to assert multiple items by text.

Learn to perform visibility assertions for multiple elements in Cypress. Use filter and the jQuery visible selector to confirm all elements are visible, not just one.

Discover how Cypress actionability rules verify element visibility, disabled state, and covered before actions, click and type. Learn to scroll into view and use the force option to disable rules.

Learn to adjust viewport sizes in Cypress for responsive testing by setting a global viewport, overriding it per test with the viewport command, and resetting after each test.

Learn how to define and run npm scripts in package.json to launch Cypress, run tests in headless mode for CI, and customize browser, specs, and viewport settings.

Validate form errors in Cypress by triggering blur validations on username, email, and password, using the data-cdi attribute as selectors, and asserting messages; add a loop testing wrong email formats.

Explore the retry-ability feature in Cypress end-to-end tests, showing how queries and assertions automatically retry through loading states and API fetches until the chain passes.

Learn how Cypress manages command timeouts, default four seconds, and per-command adjustments. Explore configuring and refactoring commands with named parameters to control timeouts without affecting assertions.

Learn how Cypress test retries work: enable retries in config, rerun failed tests in headless and UI modes, review retry details in logs, and before/after hooks also retry.

Learn how to select dropdown values in Cypress using text, index, and value methods, including both native select elements and custom div-based menus, with data test IDs and contains queries.

Implement a Cypress login test suite starting at the login page, using data test IDs for email, password, and sign in, then assert redirection to the home page.

Demonstrates implementing login error tests in a Cypress e2e suite, covering not existing user and invalid passwords, with assertions and selectors to verify error messages.

Create a reusable login custom command in Cypress by using cy.request to perform API login, store the logged user in local storage, and skip UI steps for faster tests.

Explore how Cypress fixtures store admin, pro, and standard user data in one place for end-to-end tests and refactor login to accept email and password parameters.

Learn how to test page navigation in Cypress by validating the login link redirects to the register page using the tref attribute, with an efficient, reusable approach.

Test header navigation in Cypress by visiting the home page, selecting header items with data test ID, and validating visibility, href values, and logged-in dropdown options.

Understand the difference between synchronous and asynchronous code and how execution order affects programs. See how Cypress commands run in sequence and how non-blocking tasks like setTimeout avoid UI blocking.

Learn how Cypress commands run asynchronously by queuing them and executing in order, and manage mixed Cypress and non-Cypress code with the then command to preserve execution order.

Learn to pass values between Cypress commands by using then and invoke to extract text from a yielded subject, convert it to a string, and assert stability.

Learn to use Cypress then commands to capture, wrap, and compare the likes value on the first article, then assert that the like count increments after clicking the like button.

Learn to save multiple values in Cypress by chaining then commands, accessing home and sign in elements later, and performing actions and assertions with the saved data.

Create and use query and static aliases in Cypress by defining them with as, naming aliases, and invoking with get @ alias to reuse queries effectively.

Learn how to iterate over DOM elements with Cypress using the each command, extract article titles and indices with jQuery find, and print messages to the Cypress console.

Learn to iterate over dom elements with Cypress each, collect article titles into an array, validate their order with deep-equal assertions, then remove dollar signs, convert to numbers, and sum.

Discover how test isolation resets the browser context before each test, clears the dom and all cookies, local and session storage, and why this default behavior prevents inter-test dependencies.

Explore the page object model pattern, representing app pages as objects with inputs, buttons, and checkboxes, enabling reusable and maintainable end-to-end tests that focus on flow.

Implement a Cypress page object pattern for the login feature, creating a login page class with web elements and action methods, and refactor tests to reuse it.

refactor the login test using the page object pattern, introducing a header component and guards to wait for page settle, and explain how to reuse navigation across pages.

Explore how reusable components form web interfaces and enable composition through the component object pattern. Compare 100% page object with component objects in a financial app to show reduced duplication.

Implement component objects and compose them into page objects to organize Cypress e2e tests with filter and table components, using the page object pattern for test interactions.

Use the composition pattern to build a financial report page object from common and page-related components, including filters, a report list, and a details panel, improving readability and maintainability.

Create a common elements file and an elements object to share loading status, notifications, and tooltips across pages, boosting readability and maintainability through centralized imports.

Discover how to implement common selectors to avoid repeating article and popular tag selectors, create a shared selectors object, and update page objects so Cypress queries use string selectors reliably.

Learn to fix custom timeouts for elements within a page object in Cypress by making timeout optional and passing it to get by test ID command, enforcing 10s when specified.

Explore how JavaScript private methods work in Cypress tests, using the hash prefix to hide implementation details within page objects, and expose a clean interface for actions like generate report.