Тестирование CSS-счетчиков с использованием Cucumber / Selenium

Question

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

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

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

ul {
    counter-reset: steps;
}

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

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

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

Answer 1

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

• Как получить доступ к сгенерированному CSS контенту с помощью JavaScript

• Как я могу прочитать примененное значение CSS-счетчика?

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

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

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

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

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