How can I count the number of elements that match my CSS selector?

Question

I am trying to use SeleniumRC to test my GWT App and am trying to match elements using CSS selectors.

I want to count the number of enabled buttons in the following HTML.

A button is enabled if it is under a <td> with class="x-panel-btn-td " and disabled if it is under a <td> with class="x-panel-btn-td x-hide-offsets".

So basically, I want to retrieve the number of buttons under all <td>s with the class x-panel-btn-td.

<table cellspacing="0">
    <tbody>
    <tr>
        <td id="ext-gen3504" class="x-panel-btn-td ">
            <em unselectable="on">
                <button id="ext-gen3506" class="x-btn-text" type="button">OK</button>
            </em>
        </td>
        <td id="ext-gen3512" class="x-panel-btn-td x-hide-offsets">
            <em unselectable="on">
                <button id="ext-gen3506" class="x-btn-text" type="button">Yes</button>
            </em>
        </td>
        <td id="ext-gen3520" class="x-panel-btn-td">
            <em unselectable="on">
                <button id="ext-gen3506" class="x-btn-text" type="button">No</button>
            </em>
        </td>
        <td id="ext-gen3528" class="x-panel-btn-td x-hide-offsets">
            <em unselectable="on">
                <button id="ext-gen3506" class="x-btn-text" type="button">Cancel</button>
            </em>
        </td>
    </tr>
    </tbody>
</table>

Answer 1

As far as I am aware you can't do this using CSS selectors, but there is a command in Selenium for counting by XPath. The following command will verify there are two disabled buttons:

verifyXpathCount | //td[contains(@class, 'x-hide-offsets')]//button | 2

In Selenium RC (Java) this would look more like

assertEquals(selenium.getXpathCount("//td[contains(@class, 'x-hide-offsets')]//button"), 2);

Answer 2

This is now also implemented (without any extra Javascript magic needed) in Selenium Webdriver API Since google still links to this question as a top result, even though Selenium RC has been replaced by Webdriver, hopefully this saves someone time.

Example java code:

int locatorElementSize = driver.findElements(By.cssSelector("yourCSSLocator")).size();

Answer 3

With newer versions of Selenium, there is a function GetCSSCount(string locator). Just thought an update to this question would be useful

Answer 4

This should be relatively simple. You can do it multiple ways but I would suggest using the getEval(...) in DefaultSelenium.

Write some JavaScript that:

1. gets all elements by id: ext-gen3506
2. iterates through all elements and checks to see if it's enabled
3. if it's enabled, increment a count
4. "return" the count.

Generally, getEval(...) will return the value of the last statement that ran... so that should give you the count.

Answer 5

Since Selenium is part of Firefox and the latter is supporting Selectors API one could simplify counting matches of a CSS locator using a test like this:

verifyEval | window.document.querySelectorAll("your#css > selector.here").length | 4

In this example count is verified to be 4, of course.

Answer 6

Here's another solution, using javascript, similar to post about Selector API / window.document.querySelectorAll:

http://blog.eviltester.com/2010/03/a-simple-getcsscount-helper-method-for-use-with-selenium-rc.html