Предисловие.
В последнее время стал замечать в разных местах - в автоматических тестах, в статьях, в обсуждениях на форумах, что люди стали очень часто использовать 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
Эту и многие другие интересные статьи Вы можете найти на сайте http://perfect-test.com
