No ID? You're not coming in
A quick glance at the WebDriver google group will confirm 2 things for you really quickly
There are a LOT of people using that group
There are a LOT of people still using some really dirty, brittle & possibly auto-generated xpath or css locators in their scripts
Brittle locators might be being used by ignorance or necessity.
In the case of the former, start with Santi from SauceLabs' excellent posts here and here then check out his video here too.
In the case of the later, Adam Goucher recently posted about this on his blog and suggested that if the project team aren't willing to support the automation effort and add ID's when needed it might be is time to pull the plug.
Luckily, I haven't run into too many situations where this has happened but I have had this conversation more than once,
Me: Can you put some ID's on this for me so I can automate it
Dev: Sure, what exactly would you like
To avoid this embarrassment, I started putting together a list of ways our dev team can make the application easier to automate.
Today, I'll talk about how we mark up tables and define a locator strategy to crawl through a table and grab whatever we need.
It's usually always better not to reinvent the wheel so I looked around for some standards on how to markup tables and found this at W3Schools.
Wicked, let's start with that. Use the ID of a column in the table header as the header attribute of the same column in the table body.
How would that look for a simple users table?
<table id="usersTable">
<thead>
<th id="name"> Name </th>
<th id="email"> Email </th>
<th id="likes_owls"> Do you like Owls? </th>
</thead>
<tbody>
<tr>
<td headers="name"> Iain </td>
<td headers="email"> [email protected] </td>
<td headers="likes_owls"> Yes </td>
</tr>
<tr>
<td headers="name"> Mr. Bastard </td>
<td headers="email"> [email protected] </td>
<td headers="likes_owls"> No </td>
</tr>
</tbody>
</table>
This allows us to define the locators we need for this table like this,
By usersTableLocator = By.id("usersTable");
By nameLocator = By.css("td[header='username']");
By emailLocator = By.css("td[header='email']");
By likesOwlsLocator = By.css("td[header='likes_owls']");
Using these locators allows us to grab all the WebElements in a particular column of the table body by doing something like this,
List<WebElement> names = driver.findElements(nameLocator);
Awesome, we can iterate over that and find what we need but now what if we want to grab a specific field in a specific row in the table? Oh yeah, we also need this to work no matter how many rows exist in the table and no matter what order the rows are listed.
In this case, I'd go back to the dev team and ask them to add the unique identifier of the artefacts presented in the table (in this case 'users') as the ID of each <tr> element in the table body. The unique identifier for users is usually userId or similar so let's use that in our example.
<table id="usersTable">
<thead>
<th id="name"> Name </th>
<th id="email"> Email </th>
<th id="likes_owls"> Do you like Owls? </th>
</thead>
<tbody>
<tr id="userId_1">
<td headers="name"> Iain </td>
<td headers="email"> [email protected] </td>
<td headers="likes_owls"> Yes </td>
</tr>
<tr id="userId_2">
<td headers="name"> Mr. Bastard </td>
<td headers="email"> [email protected] </td>
<td headers="likes_owls"> No </td>
</tr>
</tbody>
</table>
Now we can create a WebElement representing any field in any row of of the table and interact with it however we want.
// Create a WebElement representing the whole table
WebElement usersTable = driver.findElement(usersTableLocator);
// Create a WebElement representing the row containing userId_1
WebElement rowForUser1 = usersTable.findElement(By.id("userId_1"));
// Create a WebElement representing the email field for userId_1
WebElement emailForUser1 = rowForUser1.findElement(emailLocator);
// Get the email for userId_1
String email = emailForUser1.getText();
Using this approach has meant that the work required by the development team to support the automation effort is kept to a minimum and we also create (and maintain) the minimum number of locators we need for navigating the table.
The developers only have to add ID's to
Each <th> element in the table header
The header attribute of each <td> element in the table body
Each <tr> element in the table body
The testers only have to create locators for
Each column in the table body
This works pretty well for my team and as it's basically just following some published web standards the developers are happy to add the ID's I need as a result. It's a double win, my automation is easier and the developers look like studs in their code review.
How are the rest of you doing this?
romaincrisis
tangentwithtanner
kaledo-art
vaporwave
areudirty
discoholicmusic
ellievsbear