Finding HTML table cell using JUnit / Selenium

Question

I am testing a webpage with Selenium IDE that contains a table. I would like to verify text in a table cell (row, column) via CSS selector. The HTML structure of the table is very simple. Here is a sample of the table where every row represents a different attribute of a person:

<html...>
  <head>
  </head>
  <body>
    <div class="pageBody">
      <table>
        <tbody>
          <tr>
            <td></td>
            <td>AGE</td>
            <td>49</td>
          </tr>
          <tr>
            <td></td>
            <td>WEIGHT</td>
            <td>165</td>
          </tr>
... and so on

In Selenium IDE, I am able to find "49" in the table row containing AGE using the following CSS selector:

(APPROACH 1) css=#pageBody table tbody tr:nth-child(1) td:nth-child(3)

However, if I am not certain every table will have the same number of rows (in the event of dynamically created tables based on data available for each person), I could change the pseudo selector from nth-child to contains:

(APPROACH 2) css=#pageBody table tbody tr:contains('AGE') td:nth-child(3)

The problem comes when I export these approaches as JUnit code. The following block of JUnit code works:

(using APPROACH 1)
WebDriver.findElement (By.cssSelector ("#pageBody table tbody tr:nth-child(1) td:nth-child(3)"))

where the following block of JUnit code fails:

(using APPROACH 2)
WebDriver.findElement (By.cssSelector ("#pageBody table tbody tr:contains('AGE') td:nth-child(3)"))

Does anyone know why the JUnit APPROACH 2 is failing to find the CSS selector where it is perfectly valid and works very well in Selenium IDE? Please ask questions for clarification. Thank you kindly for any light you can shed on this.

You mean td:nth-child(3) and not tr:nth-child(3) in all your approaches, right? — BoltClock
– BoltClock, Commented Apr 9, 2012 at 14:14
Yes... I've updated the post... thank you for catching that!!! — fuzzynavel
– fuzzynavel, Commented Apr 9, 2012 at 14:17
Is there should be <div id="pageBody"> instead of <div class="pageBody">? Then xpath will be: //div[@id='pageBody']//td[contains(text(), 'AGE')]/following::td — Aleh Douhi
– Aleh Douhi, Commented Apr 10, 2012 at 13:16

prestomanifesto · Accepted Answer · 2012-04-09 17:57:09Z

1

As far as I know the selector :contains is not supported in CSS. To select elements based on textual content you should instead use XPath.

answered Apr 9, 2012 at 17:57

prestomanifesto

12.8k6 gold badges38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

fuzzynavel Over a year ago

As mentioned above, the :contains works fine in Selenium IDE using CSS selectors to find page elements. Wouldn't this imply :contains is supported in CSS?

BoltClock Over a year ago

@fuzzynavel: No, :contains() was dropped from the CSS spec, whereas Selenium just happens to implement a previous revision of the spec that did describe :contains(). See this answer.

fuzzynavel Over a year ago

So do you have any suggestions given the current specifications for CSS3 how one would reproduce the same functionality of contains() in order to verify text of '49' in a row with 'AGE' given the table structure above? Any hints on how the XPath for this would look? Thank you.

prestomanifesto Over a year ago

For XPath something like so: //*[@id='pageBody']/table/tbody/tr[contains(., 'AGE')]/td[position()=3] or a shorter version: //tr[contains(., 'AGE')]/td[position()=3]

Collectives™ on Stack Overflow

Finding HTML table cell using JUnit / Selenium

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related