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/

Poulos

Generated content is only applicable to the :before and :after pseudo-elements - are you sure your CSS is correct? – Mooned

@BoltClock'saUnicorn No, no I am not :D rectified - thanks! – Poulos

Well, you can't using standard API (DOM, CSSOM, ...). Which browser(s) are you targeting? – Mentholated

@CarloCannas yeah, realise that. Think I was hoping that the Webdriver would provide some sort of interface to those pseudo-elements. In this case the target is Firefox. – Poulos

seems that jquery isn't getting the value neither jsfiddle.net/yTUnt/3 – Haleakala

@SimonScarfe: I never used Selenium, but I looked at its source and documentation and I couldn't find anything userful for this problem. Even in Firefox there isn't a JavaScript API to access CSS generated content, I only managed to find an accessibility test case that is capable to get the generated content, but it needs chrome privileges, so you would need to patch the Selenium driver. Here it is: mxr.mozilla.org/mozilla-central/source/accessible/tests/… – Mentholated

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.

Lohse