Master Cypress in 15 minutes a day

Write your first Cypress test by running npx cypress open on a demo site, then verify the page title and its h1 text on the home page.

Add a package.json to centralize dependencies and scripts, install Cypress as a dev dependency, and configure npm scripts for 'open' and 'test' to run Cypress interactively and in command line.

Learn to fix a broken Cypress installation by inspecting the cache, pruning old versions, and reinstalling the local Cypress with npx and npm run open.

Master Cypress' most important commands, such as cy.visit, cy.get, and should, and learn how retries, timeouts, and chainable commands boost test reliability.

Enable Cypress IntelliSense by adding the triple slash reference directive to JavaScript files, unlocking full cy and .should() and .get() support in Visual Studio Code.

Explore Mocha hooks in Cypress, including before, after, beforeEach, and afterEach. See how moving cy.visit() into beforeEach reduces repetition and improves test maintainability.

Configure Cypress with cypress.json, set baseUrl, timeouts, and retries, use Cypress.config and --config to tailor tests, and enable intellisense with $schema.

Master selecting dom elements in Cypress with css selectors, cy.get, cy.contains, and within, while adopting data-cy attributes and avoiding brittle selectors for robust tests.

Query elements by visible text with Cypress contains(), using strings or regex and optional case-insensitive matching, then navigate via visible links like top rated movies, popular movies, and celebrities.

Alias dom query results with cy.as() and reuse them via @alias to reduce repeated searches, improve test speed, and leverage Cypress retry behavior.

Learn to interact with elements in Cypress by typing into text and numerical inputs, checking boxes, and selecting dropdown values. Master mouse actions by clicking buttons and scrolling into view.

Learn to click dom elements with cy.get() and .click(), using position, coordinates, and force options. Understand Cypress simulates events, auto-scrolls into view, and enforces interactability checks.

Discover how to type text into inputs and text areas with Cypress cy.type(), simulate realistic keystrokes, use special keys, clear inputs, and handle special character sequences in a to-do app.

Learn to manipulate radio buttons and checkboxes in Cypress using cy.check with cy.get or cy.contains, then test gender selection and newsletter toggling with before and after assertions.

Master Cypress in 15 minutes a day demonstrates selecting values from dropdowns and lists with cy.select on a settings page, including visible and underlying values, and multi select support.

Manipulate input values beyond text by using type on date inputs and invoke the val() function on range sliders, triggering input events for Vue bindings.

validate input values in Cypress with the should() function, checking text fields, checkboxes, selects, and range inputs. move from json checks to ui-visible value verification.

Explore Cypress network testing by using cy.request() and cy.intercept() to inspect and wait for ajax requests, inspect request and response headers, and fake responses for faster, controlled tests.

Explore the book search application that uses the Google API to search for books, perform ajax requests, run Cypress tests locally, and intercept requests to validate behavior before deployment.

Learn to intercept ajax requests in Cypress using cy.intercept(), match URLs with strings, regex, or routeMatchers, alias requests with .as(), and wait for or fake responses to boost test reliability.

Explore how Cypress.minimatch() uses the minimatch package to test route matching for cy.intercept, with matchBase: true and glob patterns like * and **, speeding up test iterations.

Learn why cy.route() and cy.server() are deprecated in Cypress and how cy.intercept() replaces them, plus guidance to avoid the old commands.

Learn to pause Cypress tests until an ajax request completes with cy.wait(), using intercept aliases like book-search, optional timeouts, and arrays to wait for multiple requests.

Intercept ajax requests with cy.intercept, fake responses using a static json fixture or a custom body, and run faster, network-free tests while balancing real end-to-end checks.

Intercept ajax requests with cy.intercept and cy.wait, access the response body, loop through books, and assert each ui card’s title and authors to drive tests.

Learn to make network requests with Cypress using cy.request(), test APIs, and speed up login by posting to endpoints and handling tokens. Validate responses from the Google book search api.

Learn how to run your Cypress tests in a continuous integration pipeline to improve reliability. Configure GitHub Actions to run tests on a server and gate pull requests.

Learn to set up a Cypress CI pipeline with GitHub Actions, triggering on main pushes and pull requests, and run tests headlessly with cypress run while saving failure artifacts.

Master Cypress continuous integration by using start-server-and-test and wait-on to boot your app, wait for readiness, install dependencies, and run npm run cypress:run with results reported.

Learn to run your Cypress CI inside a Docker container to keep environments consistent, ensure the same browser and OS for reliable visual regression testing, with GitHub Actions example.

Learn how flaky tests appear in Cypress and how cypress.json retries (runMode and openMode) help in CI and interactive runs, while emphasizing fixing underlying test rather than relying on retries.

Explore the Cypress dashboard to visualize CI runs, view detailed test results, save the video, and use the --record flag with the project id and the secret record key.

learn to run and debug GitHub actions locally with Act, using Docker, cypress/included images for Cypress dependencies, and manage secrets with a .secrets file.

Explore how to extend Cypress with custom commands and tasks, enabling browser-side commands like cy.doMagic and Node.js tasks, and learn how to configure and queue them from the browser.

Extend Cypress by adding custom commands to the cy object, focusing on parent commands; implement a searchForAuthor command that clears input, types the author, and updates tests to use it.

Learn how to add reusable child commands in Cypress using Cypress.Commands.add with prevSubject, chain off a selector, and verify thumbnail images have the correct alt attribute.

Learn to create dual commands in Cypress by making the previous subject optional, enabling a command to act as both parent and child and to verify image src attributes.

Learn to add custom logging for Cypress commands with Cypress.log(), control what appears with log: false, and distinguish parent from child commands for clearer test logs.

Enhance Cypress custom command logging by implementing consoleProps with a props object (title and subject), returning yielded elements via then(), and viewing richer details for commands in the developer console.

Learn how to add custom tasks in Cypress to run in the Node environment, enabling file access and database setup via cy.task, with practical read and default handling.

Combine tasks with custom commands in Cypress to simplify tests, wrap cy.task calls with readFileOrDefault, and enjoy IntelliSense and type checking with TypeScript for clearer logs.

Explore why the Cypress Testing Library advocates end-to-end tests that interact with the UI using labels and accessibility attributes instead of IDs or classes.

Install the Cypress Testing Library and register its commands to start using it in your tests.

Learn to use the Cypress Testing Library's findByRole to write robust, accessibility-focused tests, prioritizing getByRole and findByRole with accessible names in a book search app.

Use accessibility roles and semantic elements in Cypress tests to improve test reliability and app accessibility, turning divs into articles, adding aria labels, and locating cards by accessible names.

Reuse a query result in Cypress tests by saving the first search as an alias or nesting commands with within, then perform multiple subqueries without re-querying.

Learn how to choose Cypress Testing Library queries by prioritizing find by and find all by, focusing on get by role and get by label text for accessible, user-focused tests.

Explore quick tips and random tricks for using Cypress across diverse topics to sharpen your Cypress skills in 15 minutes a day.

Enable IntelliSense in Visual Studio Code for Cypress tests by adding a triple slash reference to Cypress types, giving accurate typings for cy, click, and get.

Configure ESLint for Cypress by installing an npm package and extending the plugin cypress/recommended. This setup recognizes Cypress globals like cy and reduces false errors in ESLint.

Learn to fake Math.random() in Cypress tests by stubbing the window Math object with cy.stub(), creating a predictable queue of numbers, and keeping tests deterministic.

Override the default Cypress configuration from cypress.json using --config to set different baseUrl environments. Run tests against localhost, Azure, or production, with a package.json script or npx for quick execution.

Learn to create data driven tests in Cypress using the cypress-each library to run the same test with multiple data values.