xpathVsCss

Решил на днях систематизировать свои познания в таких важных для автоматизатора вещах, как Xpath и СSS селекторы. Результатом работы стала небольшая шпаргалка. В ней я постарался описать те фишки, которых вполне достаточно для автоматизатора, чтобы написать любой селектор. Если вы считаете, что что-то упущено, то пишите в комментариях (эта возможность пока бесплатная).

Цель

CSS

Xpath

Любой элемент
*
//*
Любой <div>
div
//div
Любой потомк <div> элемента
div > *
//div/*
Элемент с id=“foo
#foo
//*[@id='foo']
Элемент с class=“foo
.foo
//*[@class='foo']
Элемент имеющие атрибут “foo”
*[foo]
//*[@foo]
Элемент <p> который имеет потомка <a>
невозможно
//p[a]
Элемент <p> поток div с id=“foo
div#foo p
//div[@id='foo']//p
Следующий за <p> элемент <span>
p + span
//p/following-sibling::span
Элемент <a> с href начинающиеся на foo
a[href^='foo']
//a[starts-with(@href, 'foo')]
Элемент <a> c href заканчивающейся на foo
a[href$='foo']
//a[ends-with(@href, 'foo')]
Элемент <a> с href содержащим foo
a[href*='foo']
//a[contains(@href, 'foo')]
Элемент <p> содержит текст foo
невозможно
//p[text()='foo']
Первый потомок <span>
span > *:first-child
//span/*[0]
n-й потомок <div>
div > *:nth-of-type(n)
//div/*[n]
Предок <p> элемента
невозможно
//div/..
<p> элемент у которого Id и classfoo
p[id='foo'][class=’foo’]
//p[@id='foo' and @class='foo']
<p> элемент у которого id=“foo” или “doo
p[id='foo'],[id='doo']
//p[@id='foo' or @id='doo']
<p> элемент у которого id=“foo”, а class нет
p[id='foo']:not(p[class='foo'])
//p[@id='foo' and not(@class='foo')]

 

Также скачать оффлайн версию шпаргалки можно ТУТ.

Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Яндекс