Learn How To Automate End-to-End Test Script in Cypress

Tutorial 7 – Automate End to End (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 studield​​ 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:

  • Launch​​ https://demo.nopcommerce.com/​​ in chrome browser

  • Enter ‘Lenovo IdeaCentre 600 All-in-One PC’ text in search​​ text​​ field

  • Click Search​​ button

  • Click ADD TO CART​​ button

  • Click ‘Shopping cart’​​ link​​ at the page top

  • Clear the quantity 1 from the Qty​​ text​​ field

  • Enter 2 in Qty​​ text​​ field

  • Click ‘Update shopping cart’​​ button

  • 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.

  • Launch​​ https://demo.nopcommerce.com/​​ in chrome browser

  • Enter ‘Lenovo IdeaCentre 600 All-in-One PC’ text in search​​ text​​ field

  • Click Search​​ button

  • Click ADD TO CART​​ button

  • Click ‘Shopping cart’​​ link​​ at the page top

  • Clear the quantity 1 from the Qty​​ text​​ field

  • Enter 2 in Qty​​ text​​ field

  • Click ‘Update shopping cart’​​ button

  • Verify the ‘Total’ amount

So this is how we can automate our end to end test cases.

Thanks for reading!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024