Как составлять xpath и css селекторы

Материал из AOW

Перейти к: навигация, поиск

В этой записи я хочу поделиться с вами Видеуроком от портала automated-testing.info, показывать нам все это будет Михаил Поляруш. Вообще как правильно писать css и xpath локаторы я уже писал в статье xpath и css

Но это видео благодаря очень хорошему объяснению раскроет тему настолкьо подробно, что у вас уже никогда не возникнет вопросов, как правильно составить xpath или css селектор, благодаря это видео вы научитесь составлять запросы любой сложности. Лично я от видео был просто в восторге.

(link )


Ниже прикладываю шпаргалку по css и xpath, которую я записал, смотря на этот курс:

Содержание

css локаторы:

  • div#pocks — ищем див, у котрого айдишник равен pocks
  • div.perl — ищем див, у которого класс обзывается perl
  • body[vlink=1] — ищем тег боди, у котрого атрибут vlink=1
  • body[vlink*=1] — ищем тег боди, у котрого атрибут vlink содержит в себе единичку
  • body[vlink$=1] — ищем тег боди, у котрого атрибут vlink аканчивается на еденичку
  • body[vlink^=1] — ищем тег боди, у котрого атрибут vlink начинается на еденичку

Пробел находит все потомков у элемента. Пример:

  • div#ires a — находит все ссылки у дива с айдишником ires
  • div#ires a:nth-of-type(1) — находит все ссылки у дива с айдишником ires первые
  • div >a — все дивы, у которых сразу за ними есть потомок а
  • div+div — находит див который идет сразу за первым дивом
  • div+a — все дивы за которыми сразу идут a элементы(ссылки)
  • div ~ div — пропускает элемент за элементом
  • a:contains(«ggdgdgd») — находит а

На 37 минуте примеры, где можно потренькаться

  • *.warning — любой элемент с классом warning
  • div * p — ищем элемент p у котрого есть предок div и между ними могут быть элементы
  • h1.opener+h2 — ищем элемент h2 соседм перед которым элемент h1 имеющий класс opener
  • a[rel~="copyring"] — ищем ссылку с атрибутом rel, у которого внутри есть класс со значнием copyring
  • span[hello='Cleveland'][goodbye='Columbus'] — ищет элемент span, у котрого есть атрибут hello со значнеием Cleveland и атрибут goodbye *со значнием Columbus
  • div.flyout > a — Найти все ссылки, которые находятся сразу после div элемента с классом flyout
  • div#action_list_body_current li:nth-of-type(1) — Найти вторую задачу в списке current
  • #quick search a[accesskey ="p"] -Найти вторую картинку с атрибутом accesskey «p» в quick search
  • #context_list a:contains(‘line’) -найти контекст в таблице Contexts который содержит текст «line»

xpath локаторы:

  • /body/.. — родитель бади, тобишь тег штмль

В чем отличие xpath от css, в икспасе мы можем ходить снизу вверх, а в css только сверху вниз. //

  • //a[text()='some value'] — найти ссылку с текстом some value
  • author[last-name [position()=1]= «Bob»] — найти элемент author у которого есть элемент last-name и у last-name это первая позиция
  • //div[@id='header'] — элемент див с айди хедер
  • //div[1] — первый див
  • //div[position()=1] — как я понимаю все равно что //div[1]
  • //div[2 and 3] — второй и третий див

В xpath отношения элементов определяют оси

  • // — означает что ищем по всем вложенным элементам
  • /descendant:div[@id='header'] — находит всех потомков дива с айди хеадер
  • book/*/last-name — находим элемент бук после котрого идет любой элемент а за ним сразу идет элемент ластнейм
  • *[@specialty] — любой элемент с атрибутом specialty
  • author[first-name][3] — элемент с названием author у которого есть потомок элемент first-name и он третий
  • author[not(degree or award) and publication] — находим элемент author у котрого нет потомка элемента degree или award, но есть элемент *publication
  • ancestor::author[parent::book][1] — находим предка у которого есть название элемента author и у которого есть непорсдетсвенный *родитель book и выбираем первую позицию
  • //a[text() ="Preferences"][ancestor::*[@id='header']] — найти ссылку Preferences в верхнем меню (идем сверху вниз, вначале пишем ссылку с текстом Preferences
  • //*[@id ='action_list_curent']//span[@class='next_action_name'][following-sibling::*/a[contains(@href,'contexts') and text() ='Offline']] — Найти все задачи в списке current с контекстом Offline

ссылки: http://prostoitblog.ru/xpath-i-css/kak-sostavlyat-xpath-i-css-selektoryi (Источник) w3.org/TR/selectors/ w3schools.com/css/css_examples.asp

Личные инструменты

Разработка веб-сайтов, автоматизация.
По всем вопросам обращайтесь по телефонам:

+7 495 640 29 90
http://artofweb.ru