Learn Cypress Framework For End To End Ui Testing

Simple UI app Preview 01:01

This lecture covers the simple UI app we are going to build. We will then use this app later to write our UI tests using Cypress

Initializing the project Preview 05:15

This lectures shows you how to initialize our project and install the dependencies we need to move forward with building our app.

Please ensure you have the latest version of Node.js (LTS) installed on your computer before you proceed

Create the backend portion of our app Preview 03:02

We will start building the back-end part of our simple application

Create the front end portion of our app Preview 04:18

In this  lecture we will begin to build the front-end portion of our application

Front end part 2 Preview 06:56

Continuing on with our front end portion of our application, we will be a simple login page form in this lecture.

Front end part 3 Preview 08:12

Here, we will build a home page after the user has logged in. we will also build a page where the user is redirected once they logout

Adding to our backend Preview 04:46

We will modify the backend of our app to return the correct static html file to the front end given a specific request

Testing our application functionality end to end Preview 02:43

Now that we have finished building a simple app, we will test it to ensure correct functionality

Quick recap and source code up to this point Preview 04:08

Here, we will do a quick recap of what we have covered so far up to this point.

I have also attached the source code to this lecture. You can download the source code and start from here if you were not able to follow

Installing cypress framework Preview 11:03

We will now install and initialize the cypress testing framework into our project

Creating our first test file Preview 06:40

In this lecture we will create our first test file. We will also configure autocomplete to work for cypress.

Writing and running our first UI test Preview 08:35

We will begin by writing a simple test. Then we will run the test and I will walk you through different tools that you can use to help with writing your automated UI tests

Best Practices for locating DOM elements on the UI Preview 15:21

This lecture will walk you through best practices for assigning IDs to  your elements and using cypress in order to locate them before performing operations or assertions

DOM Operations and Assertions Preview 08:42

In this lecture we will learn how to type inside input fields and how to click buttons within our application. we will also begin to cover simple assertions to verify what we expect to happen.

Tests and Assertions Part 2 Preview 09:28

Continuing on with writing more tests and assertions. We will learn how to check for visibility of certain elements and also how to check whether an element has or does not have a given class

Tests and Assertions Part 3 Preview 05:56

Covering has value and does not have value assertion types in this section

Tests and Assertions Part 4 Preview 10:50

Covering assertions that check if element contains certain text. Also will learn about assertions that check if certain element exists on the DOM or not

Test setup and Teardown Preview 02:47

Briefly covers test setup and test teardown within our test suite

Running a Singal Test File using Cypress Commands Preview 09:44

Here, we will cover how to run tests using the command "cypress open" and i will walk you guys through cypress' interactive mode.

Next, we will run the test using headless browser Electron using the command "cypress run"

Running Multiple Tests Files Preview 02:20

With a very simple change, you will learn how to run multiple tests files within your project

Delays, Waits, and Sleeps Preview 06:48

This lecture will cover how cypress can handle waits and sleeps in UI tests

Videos and Screenshots Preview 08:02

After this section you will be able to leverage Cypress's ability to take videos and screenshots to help troubleshoot failing tests

Commonly used DOM operations Preview 02:18

We will cover some more DOM operations in Cypress that will help us interact with web elements in our tests

Clearing input fields Preview 06:21

This lecture will show you how to clear text input fields

Double click action Preview 03:02

This lecture will show you how to double click an element

Checking and un-checking checkbox elements Preview 07:49

This lecture will show you how to check and un-check checkbox elements

Radio button selection Preview 02:48

This lecture will show you how to select a radio button element

Dropdown menu selection Preview 04:50

This lecture will show you how to select an option from a drop-down menu

Uploading files and attachments Preview 02:08

In this lecture I will discuss different ways of uploading files and attachments

Elements with no IDs or Classes Preview 09:16

This lecture will go over how to interact with elements that have no IDs or classes

Limitations and Tradeoffs Preview 05:59

You will gain the knowledge of what are some of cypress' limitations and what are some of the things you can not do with the cypress framework. This can help you decide if cypress is a suitable framework for your project

Recap of the Course Preview 03:32

We will cover what we learned and accomplished in this course. Please find the finished code attached to this section