Web元素定位

Web元素定位

分类：ID、Name、Class、Link Text、Partial Link Text、XPath、Css、Tag

1. ID：直接使用：kw

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

2. Name：直接使用：wd

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

3. Class：直接使用：s_ipt

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

3. Class特殊情况，当class值含有多个含有空格字段值时，可以按照如下情况进行获取。
示例网站：https://mail.126.com/

<input data-placeholder="邮箱账号或手机号码" name="email" data-type="email" data-loginname="loginEmail" 
data-required="true" class="j-inputtext dlemail j-nameforslide" type="text" autocomplete="off" tabindex="1" 
spellcheck="false" id="auto-id-1699855936907" placeholder="邮箱账号或手机号码" style="width: 243px;">

• 取出其中某一个字段，需要确保唯一性：j-nameforslide
• 使用css selector:[class='j-inputtext dlemail j-nameforslide']
• 使用.(.代表class属性)进行连接：.j-inputtext.dlemail.j-nameforslide 或 .j-inputtext.dlemail 或 .j-inputtext.j-nameforslide 或 .j-inputtext 或 .dlemail 或 .j-nameforslide

4. Tag：由于页面包含相同标签可能性极高，因此极少使用tag标签，如果使用：input

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

5. Link Text：只能是超链接标签的文本，直接使用：新闻

<a href="http://news.baidu.com" target="_blank" class="mnav c-font-normal c-color-t">新闻</a>

6. Partial Link Text：只能是超链接标签的文本，直接使用：新 或 闻

<a href="http://news.baidu.com" target="_blank" class="mnav c-font-normal c-color-t">新闻</a>

7. XPath:

表达式	说明	举例
/	从更节点开始选取，也称为绝对路径	/html/div/span
//	从任意节点开始选取，也称为相对路径	//input
.	选取当前节点
..	选取当前节点的父节点	//input/..会选取input的父节点
@	选取属性或者根据属性选取	//input[@data]选取具备data属性的input元素//@data 选取所有data属性
*	通配符，表示任意节点或任意属性

 

 

 

  

• 根据属性名定位元素：

定位具有特定属性名的元素：//*[@attribute_name]

示例：//*[@class] 会匹配所有具有 "class" 属性的元素。

• 根据属性名和属性值定位元素：如果class含有空格且多个元素时，需要将所有值放入其中。

定位具有特定属性名和属性值的元素：//*[@attribute_name='value']

示例：//*[@id='myElement'] 会匹配 id 属性值为 "myElement" 的元素。

• 根据部分属性值定位元素：如果class含有空格且多个元素时，需要将部分值放入其中，即不能包含空格拼接。

定位具有属性值包含特定文本的元素：//*[contains(@attribute_name,'value')]

示例：//*[contains(@class,'active')] 会匹配 class 属性值包含 "active" 的元素。

• 根据多个属性进行定位：如果class含有空格且多个元素时，需要将所有值放入其中。

定位具有多个属性及其对应值的元素：//*[@attribute_name_1='value_1' and @attribute_name_2='value_2']

示例：//*[@class='active' and @data-type='button'] 会匹配同时具有 class 属性值为"active" 和 data-type 属性值为 "button" 的元素

• 定位符合特定索引的元素：

//tagname[position()]：通过位置索引来定位元素。索引从 1 开始。

示例：//ul/li[position() = 3] 可以匹配位于 <ul> 下的第三个 <li> 元素。

• 使用 not 运算符：

//tagname[not(@attribute='value')]：使用 not 运算符否定一个属性条件，定位不满足该条件的元素。

示例：//div[not(@class='header')] 可以匹配class属性不为"header"的div元素，如果对应div标签中不含有class属性时，同时也会被过滤出来。

• 使用变量传入的两种方式：

"//span[contains(text(),'%s')]" % var
"//span[contains(text(),'" + var + "')]"

• 根据父节点定位子节点：//*[text()='国家']/child::div
• 根据子节点定位父节点：//div[text()='上海']/parent::*/parent::span
• 根据兄节点定位弟节点，选取当前节点之后的同级节点：//*[text()='上海']/following-sibling::span
• 根据弟节点定位兄节点，取当前节点之前的同级节点：//*[text()='上海']/preceding-sibling::span

 

8. Css：

• 通过id属性定位(#号表示通过id属性定位)：#kw
• 通过class属性定位(.表示通过class属性定位)：.s_ipt
• 通过其他属性定位([]表示通过其他属性定位)：[name='wd']
• id组合属性定位：input#kw 或 *#kw
• class组合属性定位：input.s_ipt 或 *.kw
• 其他属性组合定位：input[name='wd']
• 两个其他属性组合定位：[name='wd'][autocomplete='off']
• 通过层级定位：form#form>span>input

 

• 匹配属性值以xx字符串开头的方法：input[class^='s']
• 匹配属性值以xx字符串结尾的方法：input[class$='ipt']