Testing CSS counters using Cucumber / Selenium

Question

One of the requirements I'm trying to create step definitions for is that each element should be numbered. Is there an API for checking whether an item has the correct CSS generated content?

We're using Selenium, Cucumber & Capybara to test our app.

The CSS that we'd like to test automatically:

ul {
    counter-reset: steps;
}

li:before {
    content: counter(steps) ".";
    counter-increment: steps;
}

Alternatively, we could put the actual content in the DOM, but I don't like writing code just to satisfy the webdriver and this is quite a nice solution to the numbering problem, or stick with manually testing this behaviour.

Edit: Just to clarify, I think this will require an external API to query, such as Selenium Webdriver, because getComputedStyle doesn't return what actually renders: http://jsfiddle.net/yTUnt/

Answer 1

It is clear that there is no public, standard interface that would allow querying the value of the counter:

• How to access CSS generated content with JavaScript

• How can I read the applied CSS-counter value?

There is no evidence there or anywhere else that the situation has changed since these questions were originally asked, and that it is now possible to do it.

Maybe we can use a private API that a browser exposes to its own test suite to check that our application does what it is supposed to do, but private APIs may change or disappear whenever the browser's developers want, and these APIs are often specific to a browser.

There is no indication that WebDriver itself hooks into any private API to provide such functionality.

There is an option which does not rely on private APIs and does not require polluting the DOM or performing the numbering ourselves. This option is to first determine manually what CSS parameters need to be set on our elements to obtain the results we desire and then verify in a test suite that these parameters are indeed present at run time. I have an example here, based on the fiddle provided in the question. In the example, one list receives custom numbering because it has the custom class. A second list fails to get the numbering we desire because, due to a (simulated) typo, it has the costum class. By using getComputedStyle we can verify what is applied to the elements of interest once all styles that apply are applied. So we can detect if the elements are not getting the right CSS parameters due to typos in the CSS, typos in the style attribute, or CSS rules that interfere with one another.

In the examples the checks are performed on the browser side. The Selenium equivalent in Ruby would be to use the css_value method to get the value of the parameters we are interested in.