Skip to main content

AUTOMATE END TO END TEST IN CYPRESS

 Tutorial 7 – Automate E2E Test case in Cypress


Adding the PDF link as the images are not fully loaded:

https://docs.google.com/document/d/1a5Fv-M2wlhs7FTWUxgiyhRy8dNv-NPhObalEbK1tU2w/edit?usp=sharing


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!

Labels:

Comments

Post a Comment

Popular posts from this blog

Add, remove, search an item in listview in C#

Below is the C# code which will help you to add, remove and search operations on listview control in C#. Below is the design view of the project: Below is the source code of the project: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace Treeview_control_demo {     public partial class Form2 : Form     {         public Form2()         {             InitializeComponent();             listView1.View = View.Details;                   }         private void button1_Click(object sender, EventArgs e)         {             if (textBox1.Text.Trim().Length == 0)...
Post a Comment
Read more

display files and directories in Listview

Below is the C# code which displays all files and directories in listview control with their file size and creation date. If it is file then it also displays the extension of the file e.g. .txt, .jpg etc Below is the design view of the project: Listview to display files and directories with size and date created Below is the source code of the project: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using System.IO; namespace search_in_listview {     public partial class Form1 : Form     {         public Form1()         {             InitializeComponent();                   }         private void button1_Click(object sender, EventArgs ...
Post a Comment
Read more

Add worklog in Jira using Python

 Below is the Python code to add the worklog in Jira. You need to install a request library for this. Here is the code: import requests from requests.auth import HTTPBasicAuth import json url = "https://your jira address here/rest/api/2/issue/ticket_number/worklog" auth = HTTPBasicAuth("username", "jira access token") headers = {     "Accept": "application/json",     "Content-Type": "application/json" } payload = json.dumps({     "comment": {         "content": [             {                 "content": [                     {                         "text": "This is for QA Testing",                         "type": "text"                     } ...
Post a Comment
Read more