Playwright 常用元素定位方式（进阶版）

Playwright 常用元素定位方式（进阶版）

这次根据上篇文章的基础定位方式，记录下一些进阶使用的定位方法，也都是基于之前的基础定位来的。
在 playwright中是支持多层筛选的，我们可以根据一个元素的信息来定位其子元素的信息。

一、nth()

根据元素索引来选择元素，当符合定位信息的元素有多个时，我们通常要挑选出我们需要的元素，可以使用 nth()来进行挑选我们需要的是哪一个元素。索引是从 0 开始的

# 定位文本信息为 公司名称 的第二个元素
page.get_by_text('公司名称'， exact=True).nth(1)

二、first 和 last

根据名称我们就可以知道，这是定位的第一个和最后一个元素，这两个是作为类属性使用的，使用时不需要加（）

# 定位第一个名称为确定的按钮
page.get_by_role('button', name='确定').first

三、filter()

根据名称我们就可以知道，这个是用来做筛选的。他的作用主要是在元素定位后，进行二次筛选。有利于在复杂的页面当中，过滤出我们需要的元素。主要用到的参数有两个，has_text: 包含的文本信息 has_not_text: 不包含的文本信息。

# 在 div 中定位文本信息为公司名称的元素
page.locator('div').filter(has_text='公司名称')

通常我们还会进一步进行筛选

# 在 div 中定位文本信息为公司名称的字段，并定位到其提示信息为请输入的输入框
page.locator('div').filter(has_text='公司名称').get_by_placeholder('请输入')

四、链式选择器

我们先来认识一下链式选择器中的两个符号，常用的是 >>

1. >: 定位子元素，定位和父级元素相邻的元素，只能定位“亲儿子”
2. >>:定位后代元素，定位父级元素下的所有元素，只要位于父元素下，都可以定位
   链式选择器用来根据多个 css 样式定位元素。当元素没有 id 并且 css 样式又繁多的时候，我们可以通过使用链式选择器，来根据多个 css 样式进行元素定位。

# 定位 van-popover__wrapper 样式下样式为 MPMicon 的元素
page.locator('.van-popover__wrapper >> .MPMicon')

五、正则表达式

我们在根据文本信息进行元素定位时，有文本的部分内容会发生变化的情况，我们可以通过正则表达式，来根据某些固定的内容，进行元素定位。首先需要先了解一下正则表达式的知识

# 定位名称由1-9数字开头和“ 个 进行中” 文字结尾的按钮
page.get_by_role("button", name=re.compile(r"[1-9]\d* 个 进行中$"))

以上为playwright进阶版的定位方式分享，后面会根据实际的使用进行更新，大家有什么关于 playwright使用的问题或者想要学习的内容，可以进行评论讨论，博主看到后会进行回复或文章分享～～～