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!