Cypress Automation Testing: Zero to 3 Real Frameworks

Set up a Cypress API testing project from scratch, install Cypress, configure the base URL, and create an API spec to make requests, read responses, and provide an access token.

Explore rest api testing with Cypress by sending a get request to a user endpoint, logging the response body and headers, and preparing for assertions on status codes and email.

Test api status codes with Cypress by making get requests, asserting 200 for existing users and 404 for non-existing ones, and using fail on status code false to validate negatives.

Design and execute a Cypress API test get request to users/2, log the response body, and assert the id and email values, including a negative assertion.

Master post requests in Cypress by testing login endpoints with email and password, validating status 200 and token in the response body through API assertions.

Examine post request error handling by sending invalid data to the login API and expecting a 400. Verify missing password and disable fail on status code to keep tests running.

Practice calling a delete request in Cypress to remove a user and assert a 204 status, using an alias and endpoint /api/users/{id}.

Learn how a put request updates specific fields by sending modified data to an endpoint, as shown with /user/2, asserting status and a name update in the response.

Learn how to add a bearer token to Cypress requests, retrieve tokens via a post request, store the token, and pass it in subsequent requests to access guarded endpoints.

Develop a Cypress framework from scratch with TypeScript, installing dependencies, configuring prettier and tsconfig, and setting up project structure for real-world testing with a reporter.

Integrate mochawesome reporter with Cypress by configuring Cypress.json and requiring the Cypress mocha awesome reporter plugin in plugins, while disabling video recording and increasing default command timeout to 10 seconds.

Explore setting up Cypress with TypeScript, writing a simple demo test, and validating configuration. Generate and view comprehensive test reports to verify integration and reporting workflows.

Explore how to create and use Cypress custom commands with TypeScript by defining a namespace and interface, adding visit home page, login page, and feedback page commands, and enabling auto-complete.

Explore the app actions design pattern to automate submitting a feedback form in Cypress, using a four-parameter, type-safe interface and test steps, with fixtures coming later.

Explore using fixtures in Cypress to store login and feedback data in json, destructure username and password, and reuse fixtures across tests for data-driven workflows.

Learn to create Cypress helpers and utility functions, including a wait-for-seconds utility that converts seconds to milliseconds for readable tests, demonstrated in a demo spec with fixture data.

Install Cypress and Cypress image snapshot to enable visual regression and end-to-end tests in the automation framework using npm or yarn; ensure Cypress v4+ and image snapshot v3+.

Install prettier to automate code formatting in the Cypress course, configure a .prettierrc with custom rules, and prepare for intelligent code completion in a future step.

Set up intelligent code completion for Cypress by initializing the Cypress folders, running npx Cypress open, configuring Cypress.json, and creating PTS.Config.json.

Configure Cypress with a json configuration and a config.js to store the base url and credentials, and tune the viewport, timeouts, and video on the Zero Web Security site.

Connect your automation framework to the Cypress dashboard by creating a private project, configuring a CI run command, and recording tests to the dashboard.

Enable the Cypress image snapshot plugin by importing the add image snapshot plugin in plugins/index.js and registering it with config, then import and use the image snapshot command.

Create custom Cypress helper commands for visibility and existence checks, and implement a unified set viewport function; then add a reusable login command to automate signing in with credentials.

Explore page objects pattern to keep Cypress tests organized by creating abstraction classes for pages and components, with a base page for shared logic and viewport controls for responsive testing.

Introduce device emulation in the page objects by adding static functions for mobile, tablet, desktop, and large desktop viewports, with predefined or hardcoded sizes.

Create a reusable navbar component with the page objects pattern in Cypress, exposing actions for clicking the logo, typing in the search box, and clicking sign in across pages.

Constructs a login page object under the page objects pattern, exposing login, forgot password, and error message methods, and extends the base page to reuse shared utilities.

Create and run the first end-to-end test in Cypress using the page objects pattern, validating login with invalid credentials and a successful login through a reusable base page and components.

Finish an end-to-end login test in Cypress using the page object pattern, adding settings, username, and logout actions to the nav bar via account links.

Learn how to implement a Cypress page objects pattern with a feedback page, loading fixtures, and a submit feedback test to automate the end-to-end form workflow.

Enhance your Cypress framework by adding cross-browser scripts in package.json to run tests in Chrome, Firefox, and Electron using the browser flag.

Install prettier, create a dot prettier rc file, and configure rules to disable semicolons, enable tabs, and set a tab width of 2 for this project.

Create a Cypress project with a Cypress folder and Cypress.json, configure package.json to open Cypress, and set video false, command timeout 5000ms, page load 10000ms, and wait for animations true.

Add custom Cypress commands for image snapshot testing, import match image snapshot, set zero pixel tolerance with percentage threshold, and implement a resolution command handling desktop sizes or mobile presets.

Define test scripts by editing package.json to run Cypress, plan image updates and image snapshot handling for terminal output, and set the stage for visual regression testing.

Fix plugin configuration in Cypress by correcting the plugin import and the support command import to use the slash plugin, ensuring tests run correctly.

Write a visual regression test in Cypress by creating an image spec and a describe block. Load example.com, capture a snapshot, and compare snapshots to verify consistency.

Learn how to update base image snapshots in Cypress by adding a script and using the update snapshots flag. Run the command to refresh all visual regression images.

Prevent date and time flakiness in visual regression testing by overriding the clock with a hard-coded UTC date in Cypress using two lines of code.

Target and snapshot a single element with Cypress by using get to select the element and match image snapshot to capture only that element, such as an h1.

Learn how to view Cypress image snapshot failures in real time inside iTerm2 using the image snapshot reporter, with a CI script for rapid test runs.

Disable the fail on snapshot flag in Cypress by passing an env flag in a ci run; setting it to false keeps tests green when snapshots fail, for debugging only.

Learn how to locally override matchImageSnapshot options in Cypress by passing an options object to customize threshold and threshold type (pixels or percentage), with production caveats.

Learn how to test data tables with visual regression using Cypress by creating a snapshot of the table to catch data changes and verify UI integrity.

Explore Percy.io for visual regression testing and connect it to Puppeteer, Cypress, and Selenium; review snapshots in the Percy web app and compare free and paid plans.

Learn how to perform visual regression tests with Cypress using Percy snapshots, set up a test, run builds, view snapshots, and review or approve changes.

Explore continuous integration and continuous delivery, showing how automated build, tests, and deployment with providers like Jenkins, Travis, and CircleCI enable small, frequent releases.

Explore Jenkins, CircleCI, and Travis, comparing pros, cons, cloud-based and on-prem options, plugin ecosystems, and YAML configurations to guide you in choosing a CI/CD solution.

Set up a Cypress project from scratch, create package.json, install Cypress, and configure npm scripts to run tests headlessly, then connect to the Cyprus dashboard service.

Create three simple Cypress specs for a dashboard demo: submit form, select box, and slider tests; connect to the dashboard, run, observe results, and simulate failures.

Connect your Cypress project to the dashboard by creating a project record, choosing private access, adding a dashboard script in package.json, and recording runs that sync to the dashboard.

Explore the Cypress dashboard overview, view project runs, and inspect specs, outputs, screenshots, and videos; learn to manage plans and run single specs without GitHub integration.

Enable Cypress video recording and upload to the dashboard, then run a single spec with the spec flag and record option to view and debug the test video.

Connect Cypress to Jenkins by setting up a Jenkins server, creating a freestyle build, and running npm run ci run, then learn to parameterize builds for different browsers.

Configure Jenkins to run Cypress tests with parameterized browser scripts for Chrome, Firefox, and Electron. Update the shell to use the chosen script, enabling browser selection at build time.

Connect Jenkins builds to the dashboard service to visualize Cypress test video runs by adding a dashboard parameter, running Cypress with the record flag and key, and reviewing uploaded videos.

Get an overview of Jenkins fundamentals: create and configure projects, manage build parameters and history, and explore post-build actions, workspace, and artifacts with Cypress-related code context.

Learn to automate Jenkins server setup with a node script in a Cypress testing workflow by editing package.json, starting Jenkins with npm, and tracking builds via a dashboard.

Run Cypress tests in a Docker container by building a Dockerfile. Create a Cypress project and prepare npm scripts to open and run tests.

Create a simple Cypress test inside docker by visiting the example website and verifying that the h1 loads, demonstrating how to connect Cypress to Docker.

Execute Cypress tests inside a Docker container by building a Docker image, verifying Cypress, and running tests that pass, with caching for faster iterations.