其他分享
首页 > 其他分享> > XPath 与 CSS 定位方式

XPath 与 CSS 定位方式

作者：互联网

目录


XPath

XPath 简介

什么是 XPath？

XPath 术语

XPath 表达式

表达式 描述
nodename 选取此节点的所有子节点
/ 作为起始符时，表示从根节点开始选取；
作为中间符时，表示从子节点中选取
// 作为起始符时，表示相对路径；
作为中间符时，表示从子孙节点中选取
. 选取当前节点
.. 选取当前节点的父节点
@ 选取属性

XPath 运算符

image

亲属关系匹配

表达式 结果
parent::* 表示当前节点的父节点元素
ancestor::* 表示当前节点的祖先节点元素
child::* 表示当前节点的子元素
descendant::* 表示当前节点的所有后代元素
self::* 表示当前节点的自身元素
ancestor-or-self::* 表示当前节点的及它的祖先节点元素
descendant-or-self::* 表示当前节点的及它们的后代元素
following-sibling::* 表示当前节点的后序所有兄弟节点元素
preceding-sibling::* 表示当前节点的前面所有兄弟节点元素
following::* 表示当前节点的后序所有元素
preceding::* 表示当前节点的所有元素

综合示例

http://www.w3school.com.cn/example/xmle/books.xml

image

路径表达式 结果
/bookstore 选取根元素 bookstore
//book 选取所有 book 子元素，而不管它们在文档中的位置
//* 选取文档中的所有元素
/bookstore/* 选取 bookstore 元素的所有子元素
/bookstore//book 选取属于 bookstore 元素的后代的所有 book 元素，而不管它们位于 bookstore 之下的什么位置
/bookstore/book[1] 选取属于 bookstore 子元素的第一个 book 元素
/bookstore/book[last()] 选取属于 bookstore 子元素的最后一个 book 元素
/bookstore/book[last()-1] 选取属于 bookstore 子元素的倒数第二个 book 元素
/bookstore/book[position()<3] 选取最前面的两个属于 bookstore 元素的子元素的 book 元素
//*[@lang] 选取包含 lang 属性的所有元素
//title[@lang='eng'] 选取所有 title 元素，且这些元素拥有值为 eng 的 lang 属性
/bookstore/book[price>35.00] 选取 bookstore 元素的所有 book 元素，且其中的 price 元素的值须大于 35.00
/bookstore/book[price>35.00]/title 选取 bookstore 元素中的 book 元素的所有 title 元素，且其中的 price 元素的值须大于 35.00
//book[@category='web' and @cover='paperback'] 使用多个属性构成唯一的属性组合
//*[.='Everyday Italian'] 精确匹配文本
//*[text()='Everyday Italian'] 精确匹配文本
//title[contains(., 'Everyday')] 模糊匹配文本
//title[contains(text(), 'Everyday')]/.. 模糊匹配文本
//title[starts-with(text(), 'Every')]/.. 匹配文本开头
//title[ends-with(text(), 'day')]/.. 匹配文本结尾
//book[2]/child::title 定位到下一级的 title 节点
//book[2]/child::* 定位到下一级的所有子节点
//book[2]/title/.. 定位父节点
//book[2]/title/parent::book 定位父节点

CSS Selector（选择器）

选择器 例子 例子描述
.class .introl 选择 class="intro" 的所有元素
#id #firstname 选择 id="firstname" 的所有元素
* * 选择所有元素
element p 选择所有 <p> 元素
element,element div,p 选择所有 <div> 元素和所有 <p> 元素
element element div p 选择所有 <div> 元素内部的所有 <p> 元素
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素
[attribute] [target] 选择带有 target 属性的所有元素
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素

XPath 与 CSS Selector 区别

1）CSS Selector 比 XPath 速度快，特别是在 IE 下面（IE 没有自己的XPath 解析器）。

2）对于文本的处理，xpath 的使用更强大。

需要注意的是，Xpath 的 text() 获取的是当前元素的文本，而不包括其子元素的文本。

<div id="id1">
    <span>Memo<span>
    Please click here
</div>

3）对于 class 属性，CSS 能直接模糊匹配；而 Xpath 对于 class 属性跟普通属性一致，需要使用 contains() 函数才能匹配部分字符串。

<div class="class1 popup js-dragable alert-msg">
    <div class ="class2 submit-box ">
            <input class ="class3"/>            
    </div>
</div>

String locatorXpath1 = "//div[@class='class1 popup js-dragable alert-msg']//input[@class='class3']";
String locatorXpath2 = "//div[contains(@class,'popup js-dragable alert-msg')]//input[@class='class3']";

String locatorCss = ".class1.js-dragable .class3"

4）使用祖先元素属性与当前元素属性组合处理时。

<div class="111">
    <div>
        <div>
            <input class = "222"/>
        </div>
    </div>
</div>

String locatorXpath1 = "//div[@class='111'/*/*/*[@class='222']]";
String locatorXpath2 = "//div[@class='111'//[@class='222']]";

String locatorCss = ".111 .222";

5）模糊匹配。

模糊匹配属性值中的部分文本：

XPath Css
//span[contains(@class,'popup-btn js-dragable')] span[title*='456']
//input[starts-with(@name,'name1')] input[name^='name1']
//input[ends-with(@name,'name1')] input[name$='name1']

标签：XPath,定位,元素,选取,book,bookstore,节点,CSS
来源： https://www.cnblogs.com/juno3550/p/15449918.html