понедельник, 11 ноября 2013 г.

Selenium - CSS или XPath?

Предисловие.
В последнее время стал замечать в разных местах - в автоматических тестах, в статьях, в обсуждениях на форумах, что люди стали очень часто использовать XPath для определения элеметов в web тестах написанных с использованием Selenium WebDriver. Единого ответа на вопрос - почему - я так и не смог получить. Лично я как-то никогда особо xpath не любил(уж не знаю почему) и при написании использовал исключительно CSS. И вот я решил разобраться и попытаться сравнить(больше для себя, а может и кому-нибудь полезно будет) эти 2 способа поиска элементов - CSS и XPath. Основными критериями для сравнения хочется взять следующие:


а)скорость - оценить, кто же быстрее ищет элементы?

б)красота и удобство написания локаторов - достаточно субъективная оценка, но все же
в)возможности и ограничения - что может один и не может другой?



Скорость.
Наверное самый интересующий показатель в данном исследовании - это скорость. Раздел будет состоять из 2-х частей:
а)как проводилась проверка - описание теста, входные данные и тп
        б)анализ результатов


Входные данные:
Для проверки был написан небольшой тест на  java. Суть его проста - были выбраны 3 способа поиска:
а)по id. Для этого был выбран элемент с id = “text” с сайта yandex.ru.
CSS: #text
Xpath: //input[@id='text']
б)по классу, при этом выбирается элемент внутри другого. Элемент имеет класс “news_list_slot” и находится внутри элемента c классом “news__list” , сайт - mail.ru
CSS: div[class='news__list'] div[class='news__list__slot']
Xpath: //div[@class='news__list']/div[@class='news__list__slot']
в)по содержанию текста в аттрибуте, выбран элемент , у которого аттрибут title содержит слово “виджетом” c сайта yandex.ru
CSS: a[title*='виджетом']
Xpath: //a[contains(@title,'виджетом')]
В ходе проведения эксперимента, стало понятно, что на первый поиск элемента тратится времени существенно больше, чем на второй, что обусловлено инициализацией различных сущностей в классах selenium’а. В связи с этим - первый поиск элемента в результатах не учитывался.
Сама суть теста была в следующем - в цикле запускался поиск для css и для xpath. Запускался одинаковое количество раз для того и для другого. Были выбраны следующие “контрольные точки” - количество операций поиска в цикле: 1,10,100.
В качестве операции был выбран метод findElement. Интересовало время именно выполнения этой операции, так как остальные частоиспользуемые операции( нажатия, ввода текста) оперируют уже непосредственно определенным до этого объектом webelement и используют уже его внутренний id, следовательно поиск - самая интересная в этом смысле операция.
Тестирование проводилось на самых используемых браузерах - Chrome(самая свежая версия на время тестов), Firefox 9.0.1, IE 8.
Версия webdriver - 2.35.0

Результаты:
Chrome:
XPATH:

Поиск по классу
Поиск по id
Поиск по тексту
1
21
21
22
10
281
230
252
100
2178
2163
2206

CSS:

Поиск по классу
Поиск по id
Поиск по тексту
1
22
26
23
10
220
218
225
100
2110
2156
2182

Итого: в принципе результаты получаются практически одинаковые.

Firefox:
XPATH:

Поиск по классу
Поиск по id
Поиск по тексту
1
13
13
9
10
116
117
87
100
1154
1114
990

CSS:

Поиск по классу
Поиск по id
Поиск по тексту
1
10
9
8
10
93
86
92
100
972
1054
1160

Итого: Небольшое приимущество CSS


Explorer:
XPATH:

Поиск по классу
Поиск по id
Поиск по тексту
1
132
192
185
10
1197
1666
1150
100
11840
12399
15323

CSS:

Поиск по классу
Поиск по id
Поиск по тексту
1
210
300
230
10
2117
2535
2325
100
20850
25100
23274

Итого: вот тут сильно разнятся, причем проигрывает CSS. Чуть ли не в 2 раза. Если честно - я не ожидал.

Подводя итоги - для 3-х этих браузеров - в случае Chrome или firefox - разницы нету. А вот Explorer…. как обычно “на высоте” - резлультаты по времени в 10 раз превышают другие браузеры. Да и еще мой любимый css проиграл в чистую.. эх..


Красота и удобство.
Достаточно субьективный показатель.
Не так давно наткнулся на один интересный ресурс, на котором есть очень неплохая табличка сравнения и описания локаторов :  https://www.simple-talk.com/content/article.aspx?article=1269.
Лично моё мнение - css более красивый, чем xpath. И, так как я уже к нему очень привык - для меня более понятный. Хотя , присмотревшись к табличке , расположенной внутри ресурса(ссылка выше) - кажется, что для прочтения и быстрого понимания xpath проще. Взять хотя бы пример из вышеуказанного теста - найти элемент, у которого аттрибут содержит какой либо текст. В случае css - это: имя_тэга[имя_аттрибута*=’текст’], в случае xpath : //имя_тэга[contains(@имя_аттрибута,'текст')]. Второе выглядит как то понятнее, как будто вызываешь метод в программе, в отличии от первого, где это просто звездочка и равно.
Во некоторых случаях - xpath более громоздкий. Если обратиться к той же таблице - раздел Parent and child, к примеру. Я, если честно, в своей практике использовал такие сложные запросы раз или два. В основном взаимотношение “отцов и сыновей” в разрезе тэгов я решаю на программном уровне(findElements()). Особенно “громоздкость” видна на примере поиска по id - css: #id_элемента ; xpath: //имя_тэга[@id=’id_элемента’]

Подводя итоги - я бы сказал так - каждому своё. Здесь я бы сказал - ничья.


Возможности и ограничения.
Ну начнем опять же с таблички(ссылка в предыдущем разделе). Как мы видим из нее - в столбце CSS  достаточно много NA. Большинство - в разделе Parent and child и Sibling, так же ряд в разделе Text&Link. Что же - да, тут получается, что у css возможностей чуть-чуть меньше, но, основываясь на своем личном опыте, скажу - они все с легкостью решаются в коде.
Немного поизучав просторы интернета, я не один и не два раза наталкивался на фразы, что css плохо, а зачастую и вообще не работает, с различными версиями браузеров IE(или не работало, я , если честно, за IE давненько не слежу). Не возьмусь судить о работоспособности в целом, но раздел про скорость в данной статье показывает, что css для IE - медленнее.
Из того, что я нарыл - это наверное всё.


Заключение.
Что хотелось бы сказать - однозначного ответа на свой вопрос я не нашел. Кто же круче? Получается, что никто. А с некоторой стороны - перевес наверное на стороне xpath. При том, что во многих статьях на просторах интернета все рьяно агитируют как раз в сторону css, причем большинство делают упор именно на скорость. Посмотев на таблички в разделе “Скорость” - я бы не был так уверен, так как в некоторых случаях xpath явно быстрее.
CSS однозначно является более “модным”. Он и используется в jquery, и еще много где. Но модное не всегда бывает оптимальным и правильным.

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



Автор - Сидельников Михаил
email: sidelnikovmike@gmail.com
Эту и многие другие интересные статьи Вы можете найти на сайте http://perfect-test.com