Tutorial 7 – Automate E2E Test case in Cypress

What you will Learn :

Automate End-to-End test case in cypress
Automate End-to-End test case in cypress
We have studied about locators in the previous sessions. Let us practically use the
concept to automate an end-to-end business process in cypress. Below are the steps
that we will automate:
1) Launch https://demo.nopcommerce.com/ in chrome browser
2) Enter ‘Lenovo IdeaCentre 600 All-in-One PC’ text in search text field
3) Click Search button
4) Click ADD TO CART button
5) Click ‘Shopping cart’ link at the page top
6) Clear the quantity 1 from the Qty text field
7) Enter 2 in Qty text field
8) Click ‘Update shopping cart’ button
9) Verify the ‘Total’ amount
Let us first navigate these steps manually. Create E2E.spec.js file.
Note: We use .spec as part of naming convention.

We will locate the search store text field & then we can pass the desired text ‘Lenovo
IdeaCentre 600 All-in-One PC’
We can use the value of class attribute .search-box-text as css selector

Notice the description of .get method

In line#6, we pass the css selector .search-box-text within single quotes or double
quotes

Once we have identified the field, we can enter the desired text using .type method
If you see white dot after the file name, it means the file is not yet saved.
Save the file. Notice that white circular dot is removed

Let us try to execute these 2 steps as of now using cypress, lets open test runner

You would see E2E.spec.js in Test runner

Click E2E.spec.js from Test runner. Notice below that the text ‘Lenovo IdeaCentre 600
All-in-One PC’ is successfully entered in the search box. So our 2 steps got passed.

Let us move to 3rd step & inspect the Search button

Let us use .class[attribute=value] combination
The method .click() would be usedon this element

Save the file

Maximize the CypressAutomation browser, notice that the entire script gets executed
automatically (including newly added 3rd step) after we have saved our code
As next step (4th step), let us inspect ADD TO CART button. Let us try to use the ‘Open
selector playground’ feature of cypress to capture the css selector

Copy the css selector & use it line 12

Save the code.
Maximize the CypressAutomation browser, notice that the entire script gets executed
automatically (including newly added 4th step) after we have saved our code. The
product has been added to the cart successfully.

Next, let us inspect ‘Shopping cart’ link

Let us use .class here

So we have

Save the code.

Maximize the CypressAutomation browser, notice that the entire script gets executed
automatically (including newly added 5th step) after we have saved our code. We can
see the shopping cart showing price, quantity etc
Notice above that we see 1 in the Qty field and Total is $500
Next, we have to clear the quantity 1 from the Qty text field (step 6)

So, let us inspect the Qty field

There is a clear() method that we can use

Save the code.

Maximize the CypressAutomation browser, notice that the entire script gets executed
automatically (including newly added 6th step) after we have saved our code. Notice
that the Qty field becomes empty
Next, we have to enter 2 in Qty text field (step 7). There is a type method, we can
concatenate this method in line 16 itself

Save the code.

Maximize the CypressAutomation browser, notice that the entire script gets executed
automatically (including newly added 7th step) after we have saved our code. Notice
that 2 is written in the Qty field

Next, we have to click ‘Update shopping cart’ button (step 8)

Lets inspect ‘Update shopping cart’ button
Let us use [attribute=value] here. Notice the syntax of line 18. The value of ‘value’
attribute is within single quotes and we are wrapping square brackets within double
quotes

Save the code.

Maximize the CypressAutomation browser, notice that the entire script gets executed
automatically (including newly added 8th step) after we have saved our code. Notice
below that we see 2 in the Qty field and Total is $1000
As last step, we will verify the ‘Total’ amount
Inspect the value of ‘Total’ field

There is contains() method that we can use for assertion

Maximize the CypressAutomation browser, notice that the entire script gets executed
automatically (including newly added 9th step) after we have saved our code.
The assertion has passed.
We have automated all the 9 steps. We have seen how to interact with button, text field,
link.
1) Launch https://demo.nopcommerce.com/ in chrome browser
2) Enter ‘Lenovo IdeaCentre 600 All-in-One PC’ text in search text field
3) Click Search button
4) Click ADD TO CART button
5) Click ‘Shopping cart’ link at the page top
6) Clear the quantity 1 from the Qty text field
7) Enter 2 in Qty text field
8) Click ‘Update shopping cart’ button
9) Verify the ‘Total’ amount
So this is how we can automate our end to end test cases.
Thanks for reading!