t.me/atinfo_chat Telegram группа по автоматизации тестирования

Selenium-RC: дружим с CSS


(Mykhailo Poliarush) #1

Безусловно, XPath-локатор является одним из наиболее универсальных и наиболее точных локаторов. Но к этой универсальности добавляется один из главнейших недостатков данного типа локаторов - низкая скорость обнаружения данного элемента. Это наиболее хорошо проявляется под IE, в то время как тот же Firefox работает нормально. Это связано с внутренними особенностями браузеров, в частности в способе аллоцирования элементов страницы. Но суть не в этом. Суть в том, что Селениум-тесты, которые интенсивно используют XPath работают крайне медленно под IE. И это вызывает ряд проблем как со скоростью выполнения тестов, так и с качеством этих тестов, особенно при работе с динамическим контентом. Как альтернатива XPath могут рассматриваться CSS локаторы. Что с ними можно делать?

Во-первых, CSS-локаторы тоже позволяют привязаться к иерархии объекта. Например, такой XPath-локатор:

{syntaxhighlighter brush: xml;fontsize: 100; first-line: 1; }xpath=//div//span/a{/syntaxhighlighter}

может быть описан через CSS вот так:

{syntaxhighlighter brush: java;fontsize: 100; first-line: 1; }css=div * span > a{/syntaxhighlighter}

Отсюда четко прослеживается аналогия элементов XPath и CSS, а именно:

  1. Знак "/", означающий следующий уровень иерархии объекта, соответствует оператору ">" в CSS.
  2. Знак "//", означающий любой элемент, находящийся по иерархии ниже текущего, соответствует оператору "*" в CSS

Во-вторых, как и в XPath, CSS-локаторы могут привязываться к значениям атрибутов. Например, такой XPath-локатор:

{syntaxhighlighter brush: java;fontsize: 100; first-line: 1; }xpath=//div[@id="some_id"]{/syntaxhighlighter}

может быть описан через CSS вот так:

{syntaxhighlighter brush: java;fontsize: 100; first-line: 1; }css=div[id=some_id]{/syntaxhighlighter}

Также есть возможность проверки на частичное совпадение значения атрибута. Но здесь CSS немного ограничен. Есть возможность проверки, что значение атрибута содержит несколько слов, разделенных пробелами, но одно из них четко соответствует значению. То есть, то, что в XPath может быть выражено вот так:

{syntaxhighlighter brush: java;fontsize: 100; first-line: 1; }xpath=//div[contains(@title="title")]{/syntaxhighlighter}

через CSS выражается вот так:

{syntaxhighlighter brush: java;fontsize: 100; first-line: 1; }css=div[@title~=title]{/syntaxhighlighter}

Оба этих локатора хорошо отловят элемент вида <div title="some multiword title" /> , в то же время вот такой элемент: <div title="my_title" /> CSS-локатором не отловится. Также в CSS есть атрибуты, которые могут иметь свою определенную упрощенную запись. Например, если у нас элемент задан по id, например как-то так: <div id=some_id />, то его CSS локатор будет иметь вид:

{syntaxhighlighter brush: java;fontsize: 100; first-line: 1; }css=div#some_id {/syntaxhighlighter}

Помимо этого в CSS отдельным образом можно работать с элементами, у которых задан атрибут class. То, что в XPath пишется так:

{syntaxhighlighter brush: java;fontsize: 100; first-line: 1; }xpath=//div[@class="myclass"] {/syntaxhighlighter}

через CSS выражается вот так:

{syntaxhighlighter brush: java;fontsize: 100; first-line: 1; }css=div.myclass{/syntaxhighlighter}

Это добавляет некоторое удобство. Более подробно о CSS можно почитать по адресу http://www.w3.org/TR/CSS2/selector.html. Таким образом, в ряде вещей CSS является аналогом XPath с одним серьезным преимуществом - CSS работает быстро независимо от браузеров. 

Конечно, у данного типа локаторов есть свои ограничения: проблемы с перебором индексов, проблемы с переходом вверх по иерархии и прочее. Но в любом случае, если вам важна скорость выполнения тестов, то желательно при первой же возможности менять XPath на CSS. А XPath уже использовать там, где все остальные локаторы бессильны.