Cypress End-to-End Testing - Getting Started

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 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 Cypress uses implicit and explicit assertions, with commands like visit and get, and how should with have length enforces exactly one h1 element.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.