Cypress End-to-End Testing - Getting Started

Explore Cypress fundamentals, including locating elements, various approaches, and complex element queries, then practice interacting, simulating user actions, and validating expectations with assertions.

Set up a brand new React starting project, install dependencies with npm install, and run the dev server. Install Cypress and create a basics.cy.js spec to explore core syntax.

Learn to organize Cypress tests by creating a .cy.js file, using describe and it, and naming suites and tests to validate the tasks page and its main image.

Use the Cypress visit command to load pages and verify they render on localhost, leveraging the cy object to run end-to-end tests that fail if a page is missing.

Learn to enable auto completion in VS Code for Cypress by adding a triple-slash reference to Cypress types, improving cy commands like cy.get.

Learn to locate the main image with Cypress using the get command and CSS selectors. Validate tests by ensuring the image appears in the header and refine selectors for precision.

Learn how to select by text in Cypress end-to-end testing by visiting a page, asserting the h1 contains My Cypress Course Tasks with cy.get and cy.contains.

Learn how Cypress uses implicit and explicit assertions, with commands like visit and get, and how should with have length enforces exactly one h1 element.

Learn the pitfall of chaining get() when selecting nested elements in Cypress; use find() to search inside elements found by an initial get(), or rely on a nested css selector.

Explore end-to-end testing with Cypress by simulating user interaction: test adding a task with text and category, verify empty task errors, and ensure the modal, backdrop, and filters behave correctly.

Learn to simulate user interaction with Cypress by adding a tasks management test file, opening a modal with the add task button, and closing it via backdrop or cancel.

Improve end-to-end tests by adding negative assertions that the backdrop and modal do not exist after closing, ensuring the test catches bugs and validates all states.

Extend Cypress end-to-end tests by practicing modal interactions: open and close the modal via backdrop or cancel, verify backdrop and modal disappear, and refine test steps to simulate user interactions.

Explore simulating user typing to create a new task in a Cypress end-to-end test, filling title and summary, submitting the modal, and asserting task creation.

Add a Cypress end-to-end test that validates user input in a modal by attempting to add a task with empty fields and asserting the validation error message appears using contains.

Practice Cypress end-to-end testing by adding a new task, selecting a category via dropdown by visible text or value, and validating filter behavior across all, urgent, and moderate views.

Learn how Cypress enforces test isolation by reloading the page, clearing cookies and local storage, and creating a new browser context between tests.

Discover how to test list selection and task creation in Cypress by asserting multiple tasks, correct order, and using queries like first, last, EQ, and contains, with API reference.

Learn how to set up Cypress, perform end-to-end testing, organize with describe, and run tests using get, find, contains, click, type, and should assertions to validate website flows.

Master deeper Cypress basics by refining element selection, simulating user interactions, and navigating pages, while exploring assertions and alternative expectation formulations.

Set up the new starting React project with Cypress as a dependency, install dependencies, run the dev server, and open Cypress to create e2e tests for the about page form.

Test page navigation in Cypress end-to-end tests by using a data-cy attribute to select the header link and verify navigation between the home and about pages.

Test Cypress page navigation by clicking the about link and verifying the path becomes /about, then go back to the homepage and confirm the path is / using data-cy selectors.

Explore selecting elements in Cypress by using the data-cy selector, learn about cy.get and location methods, and use the Cypress Studio selector playground to identify the best unique selectors.

Demonstrate Cypress end-to-end testing by validating a contact form submission on the about page, using data-cy selectors, typing inputs, and asserting button state with have.attr.

Chain commands in Cypress by selecting a button, using contains to yield the element, and applying should or end to verify text and attributes, with alternative readable rewrites.

Learn how Cypress builds a command queue and why get yields an instruction, not the button, then use the as method to alias and reuse values with get and @.

Gain direct access to yielded elements in Cypress with then(), using the subject wrapper to inspect attributes, text, and classes, and perform assertions with expect inside then.

Explore simulating form submission in Cypress by typing into inputs and triggering enter with the type method and special keys like {enter}, testing other form-specific keys such as the escape key.

This lecture demonstrates writing a Cypress end-to-end test for a contact form, validating blur styling, preventing submission with empty or invalid data, and asserting button state with then.

Learn how to test blur validation in Cypress end-to-end tests by selecting inputs with data-cy, triggering blur, and asserting that a paragraph wrapper gains an 'invalid' class, indicating error styling.

Learn how to use aliases in Cypress end-to-end tests to store a selector with as, then reuse it with cy.get('@alias') to reduce duplication and centralize changes in your tests.

Explore Cypress Studio for test evaluation, analyze runs, view step-by-step snapshots, understand assertion results, and use the selector tool to copy unique selectors for precise element targeting.

Run tests in headless mode without Cypress Studio to quickly verify changes, see a summary of test results, and capture screenshots and videos for each spec.

Compare Cypress Open and Cypress Run, diagnose headless mode selection issues, and stabilize tests by using a unique data-cy selector and should or match assertions.

Configure Cypress to capture screenshots at key moments during tests, using cy.screenshot before and after actions. Access the saved images in the Cypress/screenshots folder to evaluate test steps.

Explore the alternative should syntax in Cypress by passing a function to should to access the subject and run expect-based assertions, offering way to check class and existence.

Learn to use data-cy attributes as selectors for robust Cypress tests, and reuse queries with aliases. Compare get and should to then, and explore Cypress Studio for running tests.

Explore test organization, project and test configuration, and efficient test writing in Cypress, including shared setup, reusable logic, and custom commands and queries.

Refactor the existing Cypress project, install dependencies with npm install, start the dev server with npm run dev, and run tests with npx cypress open to explore configuration options.

Configure the global Cypress settings in cypress.config.js using defineConfig to tailor timeouts, video handling, and on-run-failure screenshots for end-to-end tests.

Learn how Cypress end-to-end tests use timeouts to wait for commands to succeed, retrying within a window before failing. Discover how to adjust default and related timeouts in the settings.

Explore how to override global Cypress settings for specific tests or suites by passing a configuration object to describe, enabling per-test or per-suite timeouts and options.

Learn how to override test-level settings and run specific tests in a chosen browser, such as Firefox or Chrome, by configuring per-suite or per-test options with Cypress.

Configure the global base url under the e2e settings to streamline visits by using a single base path for all tests, reducing typing and centralizing url changes.

Learn how Cypress uses beforeEach and other hooks to share initialization logic across tests, visit pages, and manage setup and cleanup before or after test suites.

Explore Cypress custom commands and custom queries to reduce test repetition by creating reusable shortcuts and synchronous, chain-able selectors like getById with data-cy attributes, keeping tests lean.

Learn how to create and use custom commands in Cypress end-to-end testing, including a reusable cy.submitForm command and choosing selectors like data-cy or form-based options.

Create and use custom queries in Cypress with addQuery and a dynamic getById, including a retryable inner function and immediate execution via Now for data-cy selectors.

Discover how to define and trigger custom tasks in Cypress, listen to the task event, and run NodeJS code from tests and hooks via setupNodeEvents.

Configure Cypress globally or locally, override timeouts and base URL, and choose which browser runs each test, using before hooks for setup; apply custom commands and tasks judiciously.

Advance your Cypress end-to-end testing by learning spies, steps, and fixtures, and learn to manipulate the clock for testing sites that use browser APIs.

Set up a brand-new starting project, install dependencies, and run the dev server to test fetching user location, copying to clipboard, and generating shareable Bing Maps URLs with Cypress.

Learn how to perform end-to-end testing with Cypress by simulating a get location button click, selecting via a data-cy attribute, and handling browser permission prompts with stubs.

Learn how to use stubs to replace browser functions, such as navigator.geolocation.getCurrentPosition, enabling automated tests to simulate a user location and test your app without relying on browser behavior.

Learn how to stub navigator.geolocation.getCurrentPosition with Cypress by using cy.stub inside a then block, alias it, and verify it was called during automated tests.

We replace the getCurrentPosition with an empty function to show the callback is not invoked, so the button spins and the location fetched text never appears.

Demonstrate creating a fake stub for getCurrentPosition in Cypress tests by using a custom callback to pass a dummy position and simulate a brief delay.

Learn how to reuse stubs across Cypress tests by moving the geolocation stub into a beforeEach hook, enabling consistent location fetching and reliable test flows for sharing links.

Reuse a stub to enter a name, fetch a location, and click the share link button. Set up beforeEach to stub window.navigator.clipboard.writeText to return a resolving promise and alias SaveToClipboard.

Assert that copyToClipboard is called with a dynamically built, encoded URL containing latitude, longitude, and username.

Discover how to centralize shared test data with Cypress fixtures, using cy.fixture and aliases to load JSON data across tests and avoid hard-coded coordinates.

Understand spies as listeners attached to existing functions to evaluate calls and arguments without replacing behavior. Learn how to use spies to detect local storage access in Cypress tests.

Create spies with cy.spy on win.localStorage.setItem and getItem, alias them as storeLocation and getStoredLocation, and assert they are called with correct arguments.

Learn to test a share info banner with Cypress end-to-end tests, validating visibility and removal after two seconds, and managing timers by clock manipulation to speed up tests.

Learn how to manipulate the clock in Cypress to simulate timers and skip intervals. Use cy.clock and cy.tick to advance time by two seconds and speed up tests.

Explore how stubs replace methods like the browser's get-current-position, how spies add listeners for assertions about calls, and how fixtures and the clock method accelerate Cypress tests.

Tackle end-to-end testing challenges in Cypress by handling HTTP requests, using a dedicated testing database to protect production data, and simulating authentication flows such as sign up, login, and logout.

Launch a full-stack Cypress end-to-end starting project, including frontend, backend, and a local SQLite database via Prisma. Run npm run init and npm run dev to explore takeaways and authentication.

Set up and write your first end-to-end test with Cypress, visiting the starting page to verify two takeaway items using data-cy selectors, then run tests with a single npm script.

Highlight that the first test relies on a database under the hood via Prisma. Use a dedicated testing database to avoid altering production or development data.

Set up a separate test database for Cypress end-to-end tests, using sqlite and a Prisma-managed environment with .env.test, and adjust npm scripts to run tests.

Seed the test database before every test run to ensure isolation, using Cypress setupNodeEvents and cy.task to execute a seed-test.js outside the browser.

Use a dedicated testing database to validate newsletter sign-up with Cypress, seed before each test, and verify the 'Thanks for signing up' success message to ensure test isolation.

Intercept and block outgoing http requests with Cypress cy.intercept, return a dummy 201 response, and alias with cy.wait to verify the signup success message without backend calls.

Learn how interceptors apply differently to server-rendered takeaways and client-side newsletter signups, and compare testing strategies using a dummy database versus request interception.

Verify that validation errors display when signing up for the newsletter by intercepting requests and returning an error message like "email exists already" to simulate an existing email.

Use Cypress to test backend APIs directly with cy.request, posting newsletter form data to /newsletter and validating a 201 response, while decoupling frontend and backend tests via request interception.

Explore strategies for testing network requests: allow requests with a testing database; intercept and spy; stop requests; and manually trigger API calls to decoupling your front end and back end.

Test authentication flows with Cypress by validating signup, login, and session cookies; visit /signup, fill fields, submit, and verify a non-empty session cookie and redirected to /takeaways, with seeded database.

Validate the login flow by visiting the login page, entering seeded credentials, submitting the form, and confirming redirection to /takeaways with a non-empty session cookie.

Create a reusable login command in Cypress end-to-end tests, enabling login with a single command and simplifying logout tests and session reset checks.

Demonstrate intercepting and validating request and response data in Cypress by blocking a post to /takeaways/new, aliasing createTakeaway, and asserting the request body.

Learn to manage network requests in Cypress tests by intercepting, blocking, or triggering them, use a test database for isolated, predictable data, and implement a reusable login command.

Apply your Cypress end-to-end testing knowledge to real projects, practice with demos, and explore the official Cypress documentation to deepen concepts, APIs, and CI/CD integration.