Verify HTML Table using Selenium - selenium

Question

Can someone let me know which approach is good for verifying HTML Table. I have to write test case related to adding/deleting/editing HTML table using selenium.
Table looks like this
Name and Branch could be duplicate, the only way to uniquely Identify the row is using id (First column).
I am using the page object pattern, so I need to write the function for adding/editing/deleting and verifying that row exist or not.
how should I write a function to add record and then a separate function to verify that record has been added successfully. As the name could be duplicate I can not verify if name exist in the table or not. The other way is, I return the ID of last row once I add the record. And then I can verify if name on last id is same as I recently added. However this approach has some glitch as well.
is there any better approach for this situation.

Answer 1

For add test case, you could create a function in your PageObject that returns the count of rows that have the same value in the Name field.
In your test case,
Store this number in a variable
Add a record
Back to the grid screen, invoke the row counting function again, comparing it with the stored value
It must be the stored value + 1, otherwise something is wrong.
As an additional check, you could also store the total number of rows in the table prior adding, and check if that value has also increased by one after edition (ensuring no record has been replaced in the process).
Note: If you're using PageFactory, you could also create an IList with the rows in the table, and use its count property instead of creating a counting function.
Edit:Your add method can be stored inside your PageObject, so that you have it separated from assertion. Even if you return the id, without knowing what was in the table prior adding your record, a separated individual verification won't be of much use.

Answer 2

So without seeing the html for this table, I'll have to make some assumptions. It looks like the ID column are hyperlinks, so the xpath for those will be slightly different from the other cells. Okay, so onto the solution.
We first need to think about how we're going to store the data from the table. You want some kind of 2 dimensional object that is easy to work with. I like to use HashMap to store the individual rows. HashMap stores information in un-ordered, key-value pairs. They Key would be the name of the column, and the Value would be the value of that cell for that row.
To store a table's worth of data, I would then put each of those rows that are stored in separate HashMaps and put that into an ArrayList.
Now onto how to scrape the data, the fastest solution is always the one that does the least number of lookups and calls to Selenium. In this case since you have all kinds of weirdness going on with the table, I would target all of the data cells with one lookup.
Without seeing the HTML, my xpath would look something like //table[#id='something']/tbody/tr/td[1]/a|//table[#id='something']/tbody/tr/td[not(./a[./text()='View' or ./text()='Edit' or ./text()='Delete'])]
The Pipe symbol conjoins the 2 xpaths together so it will target both types of cells in the correct order.
Here's my generic TableData class. You create an instance of this class to store the data. The data itself gets stored in the _data object.
public class TableData {
public ArrayList<HashMap<String, String>> _data;
public TableData(ArrayList<HashMap<String, String>> data) {
_data = data;
}
public static TableData get_SiteTable_ByCell(WebDriver driver, By tableCells, String[] headerValues) {
ArrayList<WebElement> tableCellElements = new ArrayList<WebElement>(driver.findElements(tableCells));
ArrayList<HashMap<String, String>> data = new ArrayList<HashMap<String, String>>();
int numberRows = tableCellElements.size() / headerValues.length;
for (int i = 0; i < numberRows; ) {
HashMap<String, String> newRow = new HashMap<>();
for (int j = 0; j < headerValues.length; j++, i++) {
newRow.put(headerValues[j], tableCellElements.get(i).getText());
}
data.add(newRow);
}
return new TableData(data);
}
}
So now that we have our method for getting the data, the values that I need to pass in are...
public TableData getTable(WebDriver driver)
{
String[] headers = {"ID", "Name", "Branch"};
By cellsBy = By.xpath("//table[#id='something']/tbody/tr/td[1]/a|//table[#id='something']/tbody/tr/td[not(./a[./text()='View' or ./text()='Edit' or ./text()='Delete'])]");
return TableData.get_SiteTable_ByCell(driver, cellsBy, headers);
}
Okay, so now we want to get a specific row. I need to write a method that will return a HashMap for the given criteria. This will also go in the TableData class from earlier.
public HashMap<String, String> returnRow(String columnName, String columnValue){
for(HashMap<String, String> row : _data){
if(row.get(columnName).equals(columnValue)){
return row;
}
}
return null;
}
So now that I have all that, my code would look something like...
#Test
public void newTest1()
{
TableData customerTable = getTable(driver);
HashMap<String, String> rowWeWant = customerTable.returnRow("ID", "1");
String valueWeWant = rowWeWant.get("Name");
}