There are times when we need to access elements (usually texts) that are within HTML tables. However, it is very seldom for a web designer to provide an id or name attribute to a certain cell in the table. Therefore, we cannot use the usual methods such as or “By.id()”, “By.name()”, In this case, the most reliable option is to access them using the “By.cssSelector()”. “By.xpath()” method. XPath Syntax Consider the HTML code below. We will use XPath to get the inner text of the cell containing the text cell”. “fourth Step 1 Set the Parent Element (table) – XPath locators in WebDriver always start with a double forward slash and then followed by “//” the parent element. Since we are dealing with tables, the parent element should always be the <table> tag. The first portion of our XPath locator should therefore start with “//table”. Step 2 Add the child elements – The element immediately under <table> is <tbody> so we can say that <tbody> is the of “child” <table>. And also, <table> is the of <tbody>. All child elements in XPath are placed to “parent” the right of their parent element, separated with one forward slash like the code shown below. “/” Step 3 Add Predicates – The <tbody> element contains two <tr> tags. We can now say that these two <tr> tags are of <tbody>. Consequently, we can say that <tbody> is the parent of both the <tr> “children” elements. Another thing we can conclude is that the two <tr> elements are siblings. Siblings refer to child elements having the same parent. To get to the <td> we wish to access (the one with the text cell”), we must first access the “fourth second <tr> and not the first. If we simply write then we will be accessing the “//table/tbody/tr”, first <tr> tag. So, how do we access the second <tr> then? The answer to this is to use Predicates.
There are times when we need to access elements (usually texts) that are within HTML tables. However, it is very seldom for a web designer to provide an id or name attribute to a certain cell in the table. Therefore, we cannot use the usual methods such as “By.id()”, “By.name()”, or “By.cssSelector()”. In this case, the most reliable option is to access them using the “By.xpath()” method. XPath Syntax Consider the HTML code below. We will use XPath to get the inner text of the cell containing the text “fourth cell”. Step 1 – Set the Parent Element (table) XPath locators in WebDriver always start with a double forward slash “//” and then followed by the parent element. Since we are dealing with tables, the parent element should always be the <table> tag. The first portion of our XPath locator should therefore start with “//table”. Step 2 – Add the child elements The element immediately under <table> is <tbody> so we can say that <tbody> is the “child” of <table>. And also, <table> is the “parent” of <tbody>. All child elements in XPath are placed to the right of their parent element, separated with one forward slash “/” like the code shown below. Step 3 – Add Predicates The <tbody> element contains two <tr> tags. We can now say that these two <tr> tags are “children” of <tbody>. Consequently, we can say that <tbody> is the parent of both the <tr> elements. Another thing we can conclude is that the two <tr> elements are siblings. Siblings refer to child elements having the same parent. To get to the <td> we wish to access (the one with the text “fourth cell”), we must first access the second <tr> and not the first. If we simply write “//table/tbody/tr”, then we will be accessing the first <tr> tag. So, how do we access the second <tr> then? The answer to this is to use Predicates.
Selenium-Notes.docx