Saturday, July 4, 2015

Lesson #15 - Selenium WebDriver – Working with Tables (C#)



Overview


In this article, I want to review a few basic ways to manipulate “Table” element while using the mandatory functions and properties that selenium as to offer.


HTML, tables are very important element that you may encounter in automation projects, HTML tables are used to contain a data that should be displayed in a specific logical order to the end user.

The Table structure


The table element can be quite challenging if you don’t understand its structure, to make things more simplified I want to review the basic structure that you must know before writing any line of code.


HTML Tag
What is it?
<thead>
Table Header
<tbody>
Table Body
<tr>
Rows
<th>
Colum Header
<td>
Column data in body



All of the code examples are based on this table (Credit to “w3schools”): 

 


The HTML code (Filtered into two rows): 

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>                          
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>                      
    <td>94</td>
  </tr>
  <tr>
</table>

 

Preperations


IWebElement WebElement_Table;
IWebDriver FirefoxInstance = new FirefoxDriver();
FirefoxInstance.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(60));            FirefoxInstance.Navigate().GoToUrl("http://www.w3schools.com/html/html_tables.asp");

 

Starting from the basics

Like any other web element, the “Table” object has few mandatory properties that we can use in our code, few examples:

WebElement_Table = FirefoxInstance.FindElement(By.XPath("//h2[contains(.,'HTML Table Example')]"));
DebuggClass.PrintToFile(WebElement_Table.Displayed.ToString());
DebuggClass.PrintToFile(WebElement_Table.Enabled.ToString());
DebuggClass.PrintToFile(WebElement_Table.Text.ToString());
DebuggClass.PrintToFile(WebElement_Table.TagName.ToString());


Results: 

Is the element displayed: True
Is the element enabled: True
Element Name: HTML Table Example
Element Tag: h2


Identify data in a specific cell

When you need to work with “Static” tables, it’s very easy to access and manipulate each cell, way? Because you can access each cell in the same way that access any other web element. 

First, let’s review a few facts about the object:


  • The table has 4 columns.
  • The table has 5 rows (including the title).
  • The “Number” column is unique.

Let’s practice:  

Example 1: Working on a specific cell

Number Value:
WebElement_Table = FirefoxInstance.FindElement(By.XPath("//td[contains(.,'2')]"));

First Name:
WebElement_Table = FirefoxInstance.FindElement(By.XPath("//td[contains(.,'Adam')]"));

Last Name:
WebElement_Table = FirefoxInstance.FindElement(By.XPath("//td[contains(.,'Smith')]"));

Points:  
WebElement_Table = FirefoxInstance.FindElement(By.XPath("//td[contains(.,'94')]"));


Example 2: Printing all values based on Rows (“Tr”)
Based on the HTML code, we can see that each row is defined with”tr” tag, this code will examine each table row and print the associated value. 

WebElement_Table = FirefoxInstance.FindElement(By.XPath("/html/body/div[4]/div/div[2]/div[2]/div[1]/div/table[1]"));
                       
IList<IWebElement> rows_table = WebElement_Table.FindElements(By.TagName("tr"));

foreach (var item in rows_table)
{
DebuggClass.PrintToFile(item.Text.ToString());  }

Result:

Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

Example 3: Identify each cell with unique Row and column id’s
In my previous example, I demonstrate the way to access data using the row Id, in this example I will demonstrate how to identify each cell by is tr/td identifiers. 

To be able to accomplish this task, we need to achieve the ‘td’ value, let’s review the HTML code:

 


The XPath of this <td> is: 

/html/body/div[4]/div/div[2]/div[2]/div[1]/div/table[1]/tbody/tr[2]/td[2]

Based on the given XPath, we can see that this cell has two unique identifiers (/tr [2]/td [2]), the rest of the line is equal to any other cell in the table. 

To illustrate this, I created an alternative table to the one that I used for this article:

tr[1]/th[1]
tr[1]/th[2]
tr[1]/th[3]
tr[1]/th[4]
tr[2]/td[1]
tr[2]/td[2]
tr[2]/td[3]
tr[2]/td[4]
tr[3]/td[1]
tr[3]/td[2]
tr[3]/td[3]
tr[3]/td[4]
tr[4]/td[1]
tr[4]/td[2]
tr[4]/td[3]
tr[4]/td[4]
tr[5]/td[1]
tr[5]/td[2]
tr[5]/td[3]
tr[5]/td[4]

Now, let’s add an additional code that examine each cell by the two identifiers.

Code:

int row_tr = 5;
int Column_td = 4;
String CellValue;

for (int i = 2; i <= row_tr; i++)
{
for (int b = 1; b <= Column_td; b++)
{
CellValue = @"Row ID = " + i + " | Column ID = " + b + " | Cell Content = " +
FirefoxInstance.FindElement(By.XPath("/html/body/div[4]/div/div[2]/div[2]/div[1]/div/table[1]/tbody/tr[" + i + "]/td[" + b + "]")).Text.ToString();

DebuggClass.PrintToFile(CellValue);}

Result:

Row ID = 2 | Column ID = 1 | Cell Content = 1
Row ID = 2 | Column ID = 2 | Cell Content = Eve
Row ID = 2 | Column ID = 3 | Cell Content = Jackson
Row ID = 2 | Column ID = 4 | Cell Content = 94
Row ID = 3 | Column ID = 1 | Cell Content = 2
Row ID = 3 | Column ID = 2 | Cell Content = John
Row ID = 3 | Column ID = 3 | Cell Content = Doe
Row ID = 3 | Column ID = 4 | Cell Content = 80
Row ID = 4 | Column ID = 1 | Cell Content = 3
Row ID = 4 | Column ID = 2 | Cell Content = Adam
Row ID = 4 | Column ID = 3 | Cell Content = Johnson
Row ID = 4 | Column ID = 4 | Cell Content = 67
Row ID = 5 | Column ID = 1 | Cell Content = 4
Row ID = 5 | Column ID = 2 | Cell Content = Jill
Row ID = 5 | Column ID = 3 | Cell Content = Smith
Row ID = 5 | Column ID = 4 | Cell Content = 50

Example 4: How to Filter Cell Values 

int row_tr = 5;
int Column_td = 4;
String CellValue;

for (int i = 2; i <= row_tr; i++)
{
for (int b = 1; b <= Column_td; b++)
{
CellValue = FirefoxInstance.FindElement(By.XPath("/html/body/div[4]/div/div[2]/div[2]/div[1]/div/table[1]/tbody/tr[" + i + "]/td[" + b + "]")).Text.ToString();

//Filter 1 : By Cell Value

if (CellValue == "Adam" || CellValue == "90")
{
DebuggClass.PrintToFile(CellValue);
}

//Filter 2:All values based on a specific row (i = Row ID)

if (i == 2)
{
DebuggClass.PrintToFile(CellValue);
}

//Filter 3:All values based on a specific column (b = Column ID)

if (b == 3)
{
DebuggClass.PrintToFile(CellValue);
}

// Filter 4:Print value based on a specific Row/Column

if (i == 3 && b == 3)
{
DebuggClass.PrintToFile(CellValue);
}}}

Example 5: Get the table Rows/Columns size

IList<IWebElement> Table_Rows = WebElement_Table.FindElements(By.TagName("tr"));
IList<IWebElement> Table_columns = WebElement_Table.FindElements(By.TagName("th"));
String Table_Rows_And_Columns = "Rows :" + Table_Rows.Count + " Columns : " + Table_columns.Count;
DebuggClass.PrintToFile(Table_Rows_And_Columns);

Results:
Rows: 5 Columns: 4


 

No comments:

Post a Comment

My Presentations