Playwright选择器 CSS选择器标签IDClass其他属性多种属性同时使用组合选择器伪类 XPATH选择器playwright自定义选择器文本选择器定位可见元素按包含的元素定位根据页面布局定位元素定位第n个元素 总结
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的输入框中输入passwordpage.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=/Logs*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'>Invisible</button><button>Visible</button> page.click("button") # 定位到第一个按钮，因为他是第一个。然后等待按钮变为可见后点击，或超时page.click("button:visible") # 定位到第二个按钮，因为他是可见的:visible需要小心使用，它有两个主要缺点：
当元素动态更改其可见性时，:visible将基于时序给出不可预测的结果。:visible可能导致查询变慢，尤其是与方法page.waitForSelector(selector[, options])一起使用时。 按包含的元素定位:has 伪类是实验性的，它将定位到包含所给元素定位的元素，如下代码返回包含 <div class=promo>元素的 <article>的元素的文本内容：
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>Buy</button> </section><article><div> <button>Buy</button> </div></article><div><div> <button>Buy</button> </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自动化测试提供良好的支持。