What is Table in HTML?
Table is a kind of HTML data which is displayed with the help of <table> tag in conjunction with the <tr> and <td> tags. Although there are other tags for creating tables, these are the basics for creating a table in HTML. Here tag <tr> defines the row and tag <td> defines the column of the table.
Excel sheet is a simple example of table structures. Whenever we put some data in to excel we give them some heading as well. In HTML we use <th> tag for headings which defines heading of the table.
Each cell in the Excel sheet can be represented as <td> in the HTML table. The <td> elements are the data containers and these can contain all sorts of HTML elements like text, images, lists, other tables, etc.
Look at the below simple example of HTML table where first row is defined as header and later two rows are containing data.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<table style="width:300px">
<tbody>
<tr>
<th>Automation Tool</th>
<th>Licensing</th>
<th>Market response</th>
</tr>
<tr>
<td>Selenium</td>
<td>Free</td>
<td>In</td>
</tr>
<tr>
<td>QTP</td>
<td>Paid</td>
<td>Out</td>
</tr>
</tbody>
</table>
|
| Automation Tool | Licensing | Market response |
|---|
| Selenium | Free | In |
| QTP | Paid | Out |
How to handle Tables in Selenium WebDriver?
There is no rocket science in handling of tables. All you need to is to inspect the table cell and get the HTML location of it. In most cases tables contain text data and you might simply like to extract the data given in the each row or column of the table. But sometimes tables have link or images as well, and you can easily able to perform any action on those elements if you can find the HTML location of the containing cell
Example 1:
Let’s take an example of above table and choose Column 1 of Row 2 which is ‘Selenium’ in above case:
|
|
/html/body/div[1]/div[2]/div/div[2]/article/div/table/tbody/tr[2]/td[1]
|
If we divide this xpath in to three different parts it will be like this
Part 1 – Location of the table in the webpage </html/body/div[1]/div[2]/div/div[2]/article/div/>
Part 2 – Table body (data) starts from here <table/tbody/>
Part 3 – It says table row 2 and table column 1 <tr[2]/td[1]>
If you use this xpath you would be able to get the Selenium cell of the table. Now what? How to get the text ‘Selenium’ from the table cell?
You need to use the ‘getText()’ method of the WebDriver element.
|
|
driver.findElement(By.xpath("/html/body/div[1]/div[2]/div/div[2]/article/div/table/tbody/tr[2]/td[1]")).getText();
|
Example 2:
Table operations are not always so simple like above because tables can contain a large amount of data and may be you need to pass rows and columns dynamically in your test case.
In that case you need to build your xpath with using variables and you will pass rows and columns to your xpath in the form of variables.
|
|
String sRow = "2";
String sCol = "1";
driver.findElement(By.xpath("/html/body/div[1]/div[2]/div/div[2]/article/div/table/tbody/tr["+sRow+"]/td["+sCol+"]")).getText();
|
Example 3:
The above example is still easy as at-least you know the row number and the column number to be fetched from the table and you are able to provide it in the xpath from external excel sheet or any source of data sheet. But what would you do when the row and columns are itself dynamic and all you know is the Text value of any cell only and you like to take out the correspondence values of that particular cell.
For example all you know is the Text ‘Licensing’ in the above example and you like to record the value for that particular column only such as Free & Paid.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
String sColValue = "Licensing";
//First loop will find the 'ClOCK TWER HOTEL' in the first column
for (int i=1;i<=3;i++){
String sValue = null;
sValue = driver.findElement(By.xpath(".//*[@id='post-2924']/div/table/tbody/tr[1]/th["+i+"]")).getText();
if(sValue.equalsIgnoreCase(sColValue)){
// If the sValue match with the description, it will initiate one more inner loop for all the columns of 'i' row
for (int j=1;j<=2;j++){
String sRowValue= driver.findElement(By.xpath(".//*[@id='post-2924']/div/table/tbody/tr["+j+"]/td["+i+"]")).getText();
System.out.println(sRowValue);
}
break;
}
}
|
Practice Exercise 1
1) Launch new Browser
2) Open URL “http://www.toolsqa.com/automation-practice-table/”
3) Get the value from cell ‘Dubai’ and print it on the console
4) Click on the link ‘Detail’ of the first row and last column
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
package practiceTestCases;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class PracticeTables {
private static WebDriver driver = null;
public static void main(String[] args) {
driver = new FirefoxDriver();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.get("http://www.toolsqa.com/automation-practice-table");
//Here we are storing the value from the cell in to the string variable
String sCellValue = driver.findElement(By.xpath(".//*[@id='post-1715']/div/div/div/table/tbody/tr[1]/td[2]")).getText();
System.out.println(sCellValue);
// Here we are clicking on the link of first row and the last column
driver.findElement(By.xpath(".//*[@id='post-1715']/div/div/div/table/tbody/tr[1]/td[6]/a")).click();
System.out.println("Link has been clicked otherwise an exception would have thrown");
driver.close();
}
}
|
Practice Exercise 2
1) Launch new Browser
2) Open URL “http://www.toolsqa.com/automation-practice-table/”
3) Get the value from cell ‘Dubai’ with using dynamic xpath
4) Print all the column values of row ‘Clock Tower Hotel’
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
package practiceTestCases;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class PracticeTable2 {
private static WebDriver driver = null;
public static void main(String[] args) {
driver = new FirefoxDriver();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.get("http://www.toolsqa.com/automation-practice-table");
String sRow = "1";
String sCol = "2";
//Here we are locating the xpath by passing variables in the xpath
String sCellValue = driver.findElement(By.xpath(".//*[@id='post-1715']/div/div/div/table/tbody/tr["+sRow+"]/td["+sCol+"]")).getText();
System.out.println(sCellValue);
String sRowValue = "CLOCK TOWER HOTEL";
//First loop will find the 'ClOCK TWER HOTEL' in the first column
for (int i=1;i<=5;i++){
String sValue = null;
sValue = driver.findElement(By.xpath(".//*[@id='post-1715']/div/div/div/table/tbody/tr["+i+"]/th")).getText();
if(sValue.equalsIgnoreCase(sRowValue)){
// If the sValue match with the description, it will initiate one more inner loop for all the columns of 'i' row
for (int j=1;j<=5;j++){
String sColumnValue= driver.findElement(By.xpath(".//*[@id='post-1715']/div/div/div/table/tbody/tr["+i+"]/td["+j+"]")).getText();
System.out.println(sColumnValue);
}
break;
}
}
driver.close();
}
}
|
No comments:
Post a Comment