Playwright选择器

Playwright支持多种元素定位方式，比如传统的CSS选择器、XPATH选择器和playwright自定义的文字选择器、位置选择器等，在本篇文章中我会带大家了解一下相关内容。

CSS选择器

Playwright支持所有CSS选择器语法，同时，很多自定义的选择器也是基于CSS选择器的语法来实现的，因此，想要使用playwright掌握CSS选择器可以说是必须的。下面给大家介绍小CSS选择器的常用语法。

标签

html元素标签，直接写标签名，如

<button value="title">button>

page.click('button')  # 点击标签为button的按钮

ID

元素中的ID属性，在ID前标识#，如

<input id="user">input>

page.fill('#user', 'username')  # 在id=user的输入框中输入username

Class

元素中的class属性，在class前标识.，如

<input class="btn" type="button">input>

page.click('.btn')  # 点击class为btn的按钮

其他属性

元素中除ID和Class的其他属性，使用[attr<=value>]语法，如

<input type="password">input>
<input type="checkbox" name="vehicle" value="Bike" checked>I have a bike<br>

page.fill('[type=password]', 'password')  # 在具有属性type=password的输入框中输入password
page.click('[checked]')  # 点击具有属性checked的按钮

多种属性同时使用

上述多种选择器可以同时使用，连在一起写即可，如

page.fill('input[type=password]', 'password')  # 在具有属性type=password同时标签为input的输入框中输入passwordpage.click('input.btn')  # 点击class为btn同时标签为input的按钮

组合选择器

当元素本身的属性不足以唯一定位到我们想要的元素时，可以使用组合选择器，通过元素的父节点或祖先节点来进行唯一定位，如

<div id="user"><button>button>div><div id="userinfo"><button>button>div>

page.click('#userinfo button')  # 点击id为userinfo内部的标签为button的按钮，使用空格分隔page.click('#userinfo>button')  # 点击父元素为id为userinfo的标签为button的按钮，使用>分隔

伪类

并非页面上的属性，而是某种表现形式，可以理解为函数，通过:进行调用，如

page.click('input:nth-child(2)')  # 点击具有同一个父节点的第二个inputpage.click('button:not([disabled])')  # 点击不具有disabled属性的button按钮

XPATH选择器

由于playwright自定义的扩展选择器使用的是CSS选择器语法，所以建议在使用playwright时主要使用CSS选择器，将XPATH选择器作为补充使用。

playwright自定义选择器

playwright使用CSS选择器的伪类语法自定义了很多扩展选择器，下面将常用的列举如下

文本选择器

文本选择器按照页面显示出的文本定位元素

page.click("text=Log in")  # 点击包含文字Log in的元素，不区分大小写且匹配子字符串page.click("text='Log in'")  # 文字通过使用引号进行转义，表示只搜索准确文本节点Log in的元素page.click("'Log in'")  # 等同于text='Log in'page.click("text=/Log\s*in/i")  # javascript正则表达式语法支持page.click("#nav-bar :text('Home')")  # text伪类等同于text=*，用于配合CSS选择器一起使用page.click('#nav-bar :text-is("Home")')  # text-is伪类等同于text='*'，严格匹配文字page.click('#nav-bar :text-matches("reg?ex", "i")')  # text=matches伪类等同于text=/reg?ex/i，匹配正则表达式page.click('article:has-text("All products")')  # has-text伪类匹配所有包含内部文字的元素，包括body，一般需要配合css选择器一起使用

定位可见元素

:visible伪类匹配可见的元素。例如，input匹配页面上的所有输入框，而input:visible仅匹配可见输入框。这对于区分非常相似但可见性不同的元素很有用。

例如有两个按钮的页面，第一个是不可见的，第二个是可见的：

<button style='display: none'>Invisiblebutton><button>Visiblebutton>

page.click("button")  # 定位到第一个按钮，因为他是第一个。然后等待按钮变为可见后点击，或超时page.click("button:visible")  # 定位到第二个按钮，因为他是可见的

:visible需要小心使用，它有两个主要缺点：

• 当元素动态更改其可见性时，:visible将基于时序给出不可预测的结果。
• :visible可能导致查询变慢，尤其是与方法page.waitForSelector(selector[, options])一起使用时。

按包含的元素定位

:has 伪类是实验性的，它将定位到包含所给元素定位的元素，如下代码返回包含

元素的

的元素的文本内容：

page.textContent("article:has(div.promo)")

根据页面布局定位元素

playwright可以根据页面布局选择元素，与常规CSS结合使用以获得更好的效果，例如 input:right-of(:text("Password"))匹配文本"Password"右侧的输入框

• :right-of(inner > selector)- 匹配与内部选择器匹配的任何元素右侧的元素。
• :left-of(inner > selector)- 匹配与内部选择器匹配的任何元素左侧的元素。
• :above(inner > selector)- 匹配位于与内部选择器匹配的任何元素上方的元素。
• :below(inner > selector)- 匹配与内部选择器匹配的任何元素下方的元素。
• :near(inner > selector)- 匹配与内部选择器匹配的任何元素附近（50 个 CSS 像素内）的元素。

# 在"Username"右侧的输入框中填写'value'.page.fill('input:right-of(:text("Username"))', 'value')# 点击 promo card 附近的按钮.page.click('button:near(.promo-card)')

定位第n个元素

有时页面包含许多相似的元素，并且很难选择特定的元素。例如：

<section> <button>Buybutton> section><article><div> <button>Buybutton> div>article><div><div> <button>Buybutton> div>div>

在这种情况下， :nth-match(:text("Buy"), 3)将从上面的片段中选择第三个按钮。请注意，索引是从 1 开始的。

# 点击第三个"Buy"按钮page.click(":nth-match(:text('Buy'), 3)"

可以使用:nth-match()配合 page.wait_for_selector(selector, **kwargs)等待指定数量的元素出现：

# 等到出现3个可见的按钮page.wait_for_selector(":nth-match(:text('Buy'), 3)")

注意：不同于 :nth-child()，元素不一定是兄弟元素，可以是位于页面上的任何位置

总结

Playwright为我们提供了很多好用的自定义选择器，配合基本的CSS选择器，可以满足我们常见的大多数元素定位需求，为我们的UI自动化测试提供良好的支持。