Тестирование счетчиков CSS с использованием огурца/селена

Одно из требований, которое я пытаюсь создать для определения шагов, состоит в том, что каждый элемент должен быть пронумерован. Есть ли API для проверки того, имеет ли элемент правильный CSS-контент?

Мы используем Selenium, Cucumber и Capybara для тестирования нашего приложения.

CSS, который мы хотим проверить автоматически:

ul {
    counter-reset: steps;
}

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

В качестве альтернативы мы могли бы поместить фактический контент в DOM, но мне не нравится писать код, чтобы удовлетворить веб-редактор, и это довольно хорошее решение проблемы с нумерацией или ручное тестирование этого поведения вручную.

Edit: Чтобы уточнить, я думаю, для этого потребуется внешний API для запроса, такой как Selenium Webdriver, поскольку getComputedStyle не возвращает то, что на самом деле отображает: http://jsfiddle.net/yTUnt/

Ответ 1

Понятно, что нет общедоступного стандартного интерфейса, позволяющего запрашивать значение счетчика:

Нет никаких доказательств того, что ситуация изменилась с тех пор, как были заданы эти вопросы, и что теперь это возможно.

Может быть, мы можем использовать частный API, который браузер предоставляет своему собственному набору тестов, чтобы проверить, что наше приложение выполняет то, что оно должно делать, но частные API могут меняться или исчезать всякий раз, когда хотят разработчики браузеров, и эти API часто специфичный для браузера.

Нет никаких указаний на то, что WebDriver сам подключается к любому частному API для предоставления таких функций.

Существует опция, которая не полагается на частные API и не требует загрязнения DOM или выполнения нумерации. Этот параметр заключается в том, чтобы сначала определить вручную, какие параметры CSS необходимо установить для наших элементов, чтобы получить желаемые результаты, а затем проверить в тестовом наборе, что эти параметры действительно присутствуют во время выполнения. У меня есть пример здесь, основанный на скрипте, предоставленной в вопросе. В этом примере один список получает пользовательскую нумерацию, поскольку имеет класс custom. Во втором списке не хватает нумерации, потому что из-за (имитированной) опечатки она имеет класс costum. Используя getComputedStyle, мы можем проверить, что применяется к интересующим элементам, когда применяются все применяемые стили. Таким образом, мы можем определить, не получают ли элементы правильные параметры CSS из-за опечаток в CSS, опечатки в атрибуте style или правила CSS, которые мешают друг другу.

В примерах проверки выполняются на стороне браузера. Селен-эквивалент в Ruby должен был бы использовать метод css_value, чтобы получить значение интересующих нас параметров.