Cypress Web Automation Testing From Zero To Hero

Quick and easy Web UI Automation from scratch with Cypress - a modern JavaScript-based framework

Last updated 2022-01-10 | 4.7

- How to set up and configure Cypress
- How to build locators for any Web Elements using powerful jQuery Selector Engine built-in Cypress (forget about X-Path)
- How to interact and automate any kind of web components

What you'll learn

How to set up and configure Cypress

How to build locators for any Web Elements using powerful jQuery Selector Engine built-in Cypress (forget about X-Path)

How to interact and automate any kind of web components

What is API. How to interact with APIs

mock API response and make assertions. Also how to create test data precondition using API calls and Headless user authentication

How to organize and reuse code with Page Object design pattern.

How to configure multiple custom reporters

retry logic for failed tests and run tests in Docker container

Parallel test execution

Cross Browser and Visual testing

* Requirements

* No prerequisites required. Some experience with Selenium or JavaScript will be a plus but not necessary

Description

This class will give you a complete understanding of what is Cypress framework and you will learn how to use all key framework capabilities. Cypress is a very modern JavaScript-based framework. It has everything you need right out of the box: Test Runner, Assertion libraries, reporters and so on. It s very nicely and easily can be integrated into the front end application (this is what we will do) and your tests will be executed in the same run loop as your application. That's why this framework is very fast! And don't worry if you never used JavaScript before. Writing automation tests in Cypress looks more like knowing what sequence of the Cypress commands you should call to perform certain actions in the browser. It s not really programming. It's a kind of scripting following Cypress rules.

We will start with the very basic concepts of Web UI Automation so you will have the right foundation from the beginning (From Zero). Even if you will use any other framework for web automation in the future, the basics from this class will remain with you forever and will be very useful. I promise that you will be a GURU in building locators for any web element on the page. This is one of the most important parts of UI Automation and I have spent a lot of time on a detailed explanation of that.

Unlike many other Automation frameworks, Cypress can interact with APIs as well and you can automate API testing with Cypress actually. So again, if you don't know what API is about, we will start with Zero and learn everything you need to know about Cypress capabilities for API interaction.

And we definitely go through Page Objects, which is very important to use! When you have 10 to 20 tests, you can maintain your code as is, but when you have 200-300 tests, the maintainability of the test framework is a number one priority. The right structure of page objects is a key for the code reusability (no copy/paste your code) and maintainability.

Also, we will go thought different advanced topics such as environment variables, setting up multiple reporters, cypress retry plugin for failed tests and eventually we will run tests in Docker Container. If that will be your first experience with Docker, no worries, we will talk about basic Docker concepts as well.

By the end of the class, trust me, you will be a Cypress Hero :)

Who this course is for:

Manual QA Engineers who willing to pick up first automation framework
Automation Engineers who switching from Selenium to Cypress
Developers who want quickly pick up automation with Cypress
Cypress begginers

Course content

7 sections • 46 lectures

Introduction 3 lectures

Introduction Preview 02:37

Introduction to this class with quick overview

Cypress vs Selenuim Preview 05:55

Comparison of the key differences between Cypress and Selenium. Pros and Cons.

Quick Note Preview 00:50

Quick note from me about updates of the class

Setting up development environment 4 lectures

Preparation of development environment Preview 06:33

This lecture covers the installation of all required components to prepare your environment for writing Cypress tests

Clone application under test Preview 04:55

Cloning test project for this class. Link to the GitHub attached

Cypress Installation Preview 08:08

Installation of the Cypress framework to the project

Cypress Configuration Preview 04:52

Initial basic Cypress configuration to prepare a framework to write the first test

Interaction with Web Elements 13 lectures

DOM Terminology Preview 08:49

A detailed explanation of DOM terminology. Required basics which need to clearly understand before moving forward

Tests Structure Preview 05:51

How tests can be organized in test files (Spec files)

Types of Locators Preview 19:15

Explanation of the different types of locators in Cypress

Finding Web Elements Preview 17:16

Variety of technics how to find web elements on the web page using Cypress.

Saving Subject of the Command Preview 24:26

Explanation on how to use Cypress "then()" command to save the subject of the previous command and how to use this subject later

Invoke Command Preview 20:18

Different examples of how to use Cypress "invoke()" command to get values of attributes, text valuaes and browser properties

Checkboxes and Radio Buttons Preview 14:15

Interaction with Checkboxes and Radio Buttons. Difference between "click()" and "check()" commands

Lists and Dropdowns Preview 23:39

How to work with Lists and Dropdowns. Looping through the list of web elements.

Web Tables Preview 28:52

Different methods of how conveniently interact with Web Tables. Looping through the content of the table.

Web Datepickers Preview 20:37

Automation of Web Datepicker. Using Date() JavaScript object to get the current system date and dynamically use this value for the Datepicker.

PopUps and ToolTips Preview 12:30

Automation of different kind of pop-ups and tooltips

Cypress Assertions Preview 09:02

Overview of Cypress assertions. How to write Chai BDD, TDD, and jQuery assertions

Knowledge Check

Verify how well you understood the concepts of interacting with Web Elements

Page Object Design Pattern 3 lectures

First Page Object Preview 15:08

Definition of Page Object. Creation of first Page Object for navigation across the application.

End-to-End Flow With Page Objects Preview 22:31

Adding more Page Objects, refactoring existing code base and reorganizing the end-to-end flow re-using page objects

Custom Commands Preview 04:01

Explanation of the Cypress Custom Commands. Creation of Login Custom Command.

Working with APIs 9 lectures

What is API? Preview 07:29

Explanation of what is API (Application Programming Interface) and how does it work.

JSON Objects Preview 09:26

Explanation of JSON objects. Structure of JSON objects.

New Project Overview Preview 08:14

Installation of the new application under test and quick overview of the testing scope

Alternative Test Project Preview 04:06

Alternative project running on front-end and back-end on localhost

Verification of the Browser API Calls Preview 11:50

How to save the object of the browser API call and verification of API request and response

Mocking API Response Preview 21:53

How to intercept browser API request using Cypress Server and provide a mock response on that

Cy.Intercept() in Cypress 6 Preview 14:52

How to use new method cy.intercept() in Cypress 6 which is replacement for cy.route()

API Calls Using Cypress Preview 21:22

Interaction with API using Cypress. Making API calls to prepare test data and assertions of API response

Headless Authorization Preview 06:53

How to make headless user authorization bypassing the login page with a user credentials.

Advanced Features 13 lectures

NPM Scripts and Cypress CLI Preview 12:07

Writing custom NPM scripts to build the application and run tests with a single command

Cypress Plugin Retries Preview 06:53

Installation of Cypress Retry Plugin to configure test retry logic on failed tests.

Retries Feature (Cypress 5) Preview 06:50

Configuration or test Retries feature in Cypress 5. IMPORTANT: Does not work in Cypress 4 or lower versions

Environment Variables Preview 13:20

Different options for environment variables. Creation of two configuration files for different environments.

Multiple Test Reports Preview 15:49

Adding JUnit XML reporter and Mochawesome HTML report. Both reports generated at the same time.

Cypress With Docker Container Preview 14:28

Configuring Dockerfile and Docker-Compose files to run Cypress tests in Docker container and getting test results back to the host machine

Login With OKTA Preview 06:54

Example of implementation for headless authorization with OKTA Identity Management Tool

Cross Browser Testing Preview 10:36

How to test in Chrome, Firefox and MS Edge browsers and run browsers in parallel

Shadow DOM (Cypress 5.2) Preview 04:51

How to access Shadow Dom web elements in Cypress 5.2 and above.

Cypress Dashboard and Parallel test execution Preview 15:47

Description of Cypress Dashboard service, test parallelization, grouping and reporting capabilities of the dashboard service

FREE Dashboard for Cypress Preview 08:07

Free open-source dashboard for Cypress that allows running tests in parallel without limitations.

Visual Testing Preview 20:18

Visual testing in Cypress using open-source plugins and Percy.io service

Where to Find More Information? Preview 05:03

Description of the sources where to find more information, documentation, examples, and help in resolving Cypress questions

Final Words 1 lectures

Final Words Preview 00:51

Just a few final words from me :) Thank you!