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!