元素定位

WebDriver是通过页面元素的标签名和属性值来定位元素的

 

定位方式:

  • 根据元素本身属性
  • 根据元素所在位置
  • 根据与元素相关的其他元素的属性

 

八种元素定位方法:

序号

定位依据

python函数

说明

备注

1

id

find_element_by_id()

标签的id属性

唯一

2

name

find_element_by_name()

标签的name属性

 

3

class name

find_element_by_class_name()

标签的class属性

 

4

tag name

find_element_by_tag_name()

标签名

 

5

link text

find_element_by_link_text()

标签对之间的文本数据

专门用来定位文本链接

6

partial link text

find_element_by_partial_link_text()

标签对之间的部分文本数据

 

7

xpath

find_element_by_xpath()

标签的层级关系

提供灵活的定位策略

8

css selector

find_element_by_css_selector()

标签的层级关系

 

XPath 是一种在xml文档中定位元素的语言

· 绝对路径定位

          find_element_by_xpath('/html/body/div/div[2]/div/div/div/from/span/input')

          即:用标签名的层级关系来定位元素的绝对路径

                div[2]表示当前层级下的第二个div标签

· 利用元素属性定位

          find_element_by_xpath('//input[@id="kw"]')

         即://表示当前页面某个目录下,input表示定位元素的标签名,[@id=’kw’]表示这个元素的id属性值等于kw.

          find_element_by_xpath('//*[@id="kw"]')

          不想指定标签名,可用*代替. 

· 层级与属性结合

         find_element_by_xpath('//form[@id="form"]/span/input')

         即:找到有唯一属性的父级,结合层级定位元素.

· 使用逻辑运算符

find_element_by_xpath('//input[@id="kw" and @class="su"]')

即:使用逻辑运算符 and连接多个属性来查找元素


CSS是一种用来描述HTML和XML文档的表现的语言

它使用选择器来为页面元素绑定属性;Selenium可用这些选择器来定位。

CSS定位速度比XPath快,且更简洁;但理解和使用的难度更大一点。

常用选择器如下:

序号 选择器 例子 描述
1 .class .intro 选择class="intro"的所有元素
2 #id #firstname 选择id="firstname"的所有元素
3 * * 选择所有元素
4 element p 选择所有<p>元素
5 element>element div>input 选择父元素为<div>的所有<input>元素
6 element+element div+input 选择同一级别中紧接在<div>元素之后的所有<input>元素
7 [attribute=value] [target=_blank] 选择target="_blank"的所有元素
 例如:

find_element_by_css_selector(".s_ipt")
find_element_by_css_selector("#kw")
find_element_by_css_selector("input")
find_element_by_css_selector("span>input")
find_element_by_css_selector("[name='username']") # 属性值可加引号也可不加
find_element_by_css_selector("form.fm>span>input#kw")


用By定位元素

上述8种定位方式的本质就是find_element(定位类型, 定位方式)


定位一组元素

应用场景:

  • 批量操作元素
  • 先获取一组元素再从这组对象中过滤出需要操作的元素 .pop()获取最后一个元素,pop(0)获取第一个元素



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Playwright是一个用于自动化浏览器操作的工具,它提供了多种元素定位方式来定位网页中的元素。以下是一些常用的Playwright元素定位方式: 1. 基础定位方式: - 通过选择器定位元素:使用`page.$(selector)`方法,其中`selector`是一个CSS选择器字符串。 - 通过XPath定位元素:使用`page.$x(expression)`方法,其中`expression`是一个XPath表达式字符串。 2. 进阶定位方式: - 定位元素:可以使用`element.$(selector)`方法来定位一个元素的子元素,其中`element`是一个已经定位到的元素对象。 - 定位相邻元素:可以使用`element.nextSibling`和`element.previousSibling`属性来定位一个元素的相邻元素。 - 定位元素:可以使用`element.$xpath(expression)`方法来定位一个元素的父元素,其中`expression`是一个XPath表达式字符串。 3. 使用剧作家选择器(playwright-relative-selector): - 剧作家选择器是一个Playwright的扩展包,它允许您相对于其他元素定位元素。 - 首先,您需要安装`playwright-relative-selector`包:`npm install --save-dev playwright-relative-selector`。 - 然后,在您的Node.js脚本中,您可以使用`require`来引入该包,并与Playwright一起使用。 以下是一个使用Playwright进行元素定位的示例代码: ```javascript const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto('https://example.com'); // 使用CSS选择器定位元素 const element1 = await page.$('.my-class'); // 使用XPath定位元素 const element2 = await page.$x('//div[@id="my-id"]'); // 定位元素 const childElement = await element1.$('.child-class'); // 定位相邻元素 const nextSibling = await element1.nextSibling; const previousSibling = await element1.previousSibling; // 定位元素 const parentElement = await element1.$xpath('..'); // 使用剧作家选择器定位元素 const relativeSelector = require('playwright-relative-selector'); const relativeElement = await relativeSelector(page, 'parent > child'); await browser.close(); })(); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值