Skip to main content

HANDLING WEBTABLES IN CYPRESS

 Tutorial 9 – Handle Webtable in Cypress


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

https://docs.google.com/document/d/1bmpugirvL5B4msmjJyBNy6Vf7Jc0oxr7sNwbw68tlbk/edit?usp=sharing


What you will Learn :
Handle HTML WebTable in cypress

  • Pick any value from table and verify the value

  • Pick a value from specific row and column in a table and verify

SCENARIO 1: Pick any value from table and verify the value

Launch http://testautomationpractice.blogspot.com/ and come to be page bottom, you would see an HTML table containing data.

We would like to pick any value from this table and want to verify the value. So, let us say, we would like to check the value ‘Javascript’ anywhere in the table. This value might be present anywhere in the table.

We will begin by inspecting the table

Hover the mouse over <table name=”BookTable”>
You would see that entire table gets highlighted

Next open chropath & click ‘Selectors’ dropdown

Select ‘Css Sel..’ from dropdown. In the field, type table[name=BookTable] and hit Enter. You would see that the entire table gets highlighted (seen enclosed in dotted rectangle)

Create a new .spec.js script

Launch site and get the table

Next let us inspect the data inside the table viz ‘Javascript’, you would notice that this value is part of ‘td’ tag

So we can use the contains() method that accepts 2 arguments: first one is ‘td’ and second one is the data value from table (here ‘Javascript’). You can double click ‘Javascript’ value that you see in the ‘td’ tag (seen above), copy it and paste in 2nd argument.

So we are locating a table in which there is some ‘td’ tag that contains the data ‘Javascript’.

Save the code.

Let us open the test runner & execute this much code. Notice that the test gets passed

SCENARIO 2: Verify some value in specific row and column

Rows are represented by ‘tr’ tag and column by ‘td’ tag.

Let’s say we want to read the value from 4th row & 4th column viz the value 300

To do that, inspect 300

Next ‘Copy selector’ to automatically generate css selector

Paste it in code editor (line 10)

The below portion of line 10 represents our table

So this portion can be replaced by

So we now have line 10 simplified

Next, under the table tag we have body and under the body tag we have various rows (represented by tr). The tr tag contains data represented by td tag.

The nth-child will help us identify the row and column number. So, in this case, the number 4 represents 4th row and 4th column. So in line 10 we are getting the 4th row and 4th column and verifying if it contains 300

Save the code, notice beloe the test is pass

Let us change 300 to some other value

Save the file, notice below that assertion fails this time

So this is how we can extract values from a simple HTML web table.

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