Playwright 元素定位：CSS选择器

点此免费加入Python网络爬虫学习交流QQ群：428518750

Playwright支持所有CSS选择器语法，同时，很多自定义的选择器也是基于CSS选择器的语法来实现的。

html元素标签

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)')  # 点击具有同一个父节点的第二个input
page.click('button:not([disabled])')  # 点击不具有disabled属性的button按钮
page.textContent("article:has(div.promo)")

点此免费加入Python网络爬虫学习交流QQ群：428518750