在 Playwright 中,CSS 选择器是非常重要的,因为它们用于定位页面上的元素。CSS 选择器允许您通过 HTML 元素的属性、类名、ID 等来定位元素。以下是 CSS 选择器的一些基本用法和示例。
CSS 选择器基础
-
元素选择器:
-
直接使用元素名称来选择元素。
await page.click('button') # 选择页面上的任意 <button> 元素
-
-
类选择器:
-
使用
.classname
来选择具有特定类的元素。await page.click('.my-class') # 选择具有 class="my-class" 的元素
-
-
ID 选择器:
-
使用
#idname
来选择具有特定 ID 的元素。await page.click('#my-id') # 选择 id="my-id" 的元素
-
-
属性选择器:
-
使用
[attribute=value]
来选择具有特定属性值的元素。await page.click('[type="submit"]') # 选择 type="submit" 的元素
-
-
子元素选择器:
-
使用空格来选择父元素下的子元素。
await page.click('div .my-class') # 选择
下的 .my-class 元素后代选择器:
-
使用空格来选择祖先元素下的后代元素。
await page.click('body .my-class') # 选择 body 内的 .my-class 元素
相邻兄弟选择器:
-
使用
+
来选择紧接在另一个元素后的元素。await page.click('h1 + p') # 选择紧跟在
后的
元素
一般兄弟选择器:
-
使用
~
来选择同一父元素下的其他元素。await page.click('h1 ~ p') # 选择与
同一父元素下的
元素
伪类选择器:
-
使用
:pseudo-class
来选择具有特定状态的元素。await page.click('a:visited') # 选择已被访问的链接
复合选择器
1/查询:类名
my-class
的div
元素下的直接子元素button,并且button中具有属性type="submit"
await page.click('div.my-class > button[type="submit"]')
2/查询:类名
my-class
的div
元素下的,任意层级内的子元素button,并且button中具有属性type="submit"
await page.click('div.my-class button[type="submit"]')
3/查询:该元素具有
data-type
属性值为"bbb"
且class
包含"active"
的<button>
元素。await page.click('button[data-type="bbb"].active')
4/查询:input元素,属性具有id='idSIButton9' 并且 type='submit'
input[id='idSIButton9'][type='submit']"
CSS 选择器时,冒号 (
:
) 通常用于表示伪类选择器,这些选择器可以帮助您定位具有特定状态的元素。伪类选择器可以用来选择元素的不同状态,例如激活状态、悬停状态等。常见的伪类选择器
-
:hover
:-
选择鼠标指针悬停在其上的元素。
1await page.click('a:hover') # 选择鼠标悬停在其上的 元素
-
-
:active
:-
选择被激活的元素,即正在被点击的元素。
1await page.click('button:active') # 选择正在被点击的 <button> 元素
-
-
:focus
:-
选择获得了焦点的元素。
1await page.focus('input:focus') # 选择获得了焦点的 元素
-
-
:checked
:-
选择被选中的复选框或单选按钮。
1await page.click('input[type="checkbox"]:checked') # 选择被选中的复选框
-
-
:first-child
:-
选择父元素的第一个子元素。
1await page.click('li:first-child') # 选择列表项的第一个
- 元素
-
-
:last-child
:-
选择父元素的最后一个子元素。
1await page.click('li:last-child') # 选择列表项的最后一个
- 元素
-
-
:nth-child(n)
:-
选择父元素的第 n 个子元素。
1await page.click('li:nth-child(2)') # 选择列表项的第二个
- 元素
-
-
:enabled
:-
选择启用的表单控件。
1await page.click('button:enabled') # 选择启用的 <button> 元素
-
-
:disabled
:-
选择禁用的表单控件。
1await page.click('button:disabled') # 选择禁用的 <button> 元素
-
示例代码
下面是一个示例脚本,演示如何使用 Playwright 和 CSS 选择器来定位具有特定状态的元素:
1import asyncio 2from playwright.async_api import async_playwright 3 4 5async def main(): 6 async with async_playwright() as p: 7 browser = await p.chromium.launch() 8 context = await browser.new_context() 9 page = await context.new_page() 10 11 # 访问一个网站 12 await page.goto('https://example.com') 13 14 # 点击一个处于激活状态的按钮 15 await page.click('button:active') 16 17 # 获取一个获得了焦点的输入框的值 18 input_value = await page.input_value('input:focus') 19 print(f'Input value: {input_value}') 20 21 # 等待一个元素变得可见 22 await page.wait_for_selector('.result', state='visible') 23 24 # 获取元素的文本内容 25 result_text = await page.inner_text('.result') 26 print(f'Result text: {result_text}') 27 28 # 关闭浏览器 29 await browser.close() 30 31 32# 运行异步函数 33asyncio.run(main())
playwright, css选择器 指定索引位置用法
在 Playwright 中使用 CSS 选择器时,如果您想根据索引位置来选择元素,可以使用
:nth-child(n)
或:nth-of-type(n)
伪类选择器。这些选择器允许您根据元素在父元素中的位置来选择特定的元素。伪类选择器
-
:nth-child(n)
:- 选择父元素中的第 n 个子元素。
n
可以是整数,也可以是公式,如:nth-child(2n+1)
表示奇数位置的子元素。
-
:nth-of-type(n)
:- 选择父元素中的第 n 个同类型的子元素。
- 这意味着只有相同类型的元素才会被计数。
使用
:nth-last-child(n)
和:nth-last-of-type(n)
这些伪类选择器用于选择倒数第 n 个子元素或倒数第 n 个同类型的子元素。
示例
假设您有一个包含多个
<li>
元素的<ul>
列表,您想要选择第三个<li>
元素:1<ul> 2 <li>Item 1</li> 3 <li>Item 2</li> 4 <li>Item 3</li> 5 <li>Item 4</li> 6</ul>
示例代码
下面是一个示例脚本,演示如何使用 Playwright 和 CSS 选择器来定位具有特定索引位置的元素:
1import asyncio 2from playwright.async_api import async_playwright 3 4 5async def main(): 6 async with async_playwright() as p: 7 browser = await p.chromium.launch() 8 context = await browser.new_context() 9 page = await context.new_page() 10 11 # 访问一个网站 12 await page.goto('https://example.com') 13 14 # 选择第三个 <li> 元素 15 await page.click('ul li:nth-child(3)') 16 17 # 获取第三个 <li> 元素的文本内容 18 item_text = await page.inner_text('ul li:nth-child(3)') 19 print(f'Text of the third item: {item_text}') 20 21 # 进行其他操作... 22 # 例如,等待某个元素出现 23 await page.wait_for_selector('.result', state='visible') 24 25 # 获取元素的文本内容 26 result_text = await page.inner_text('.result') 27 print(f'Result text: {result_text}') 28 29 # 关闭浏览器 30 await browser.close() 31 32 33# 运行异步函数 34asyncio.run(main())
playwright, $ 和$$用法
$
方法用于查找页面上第一个匹配给定选择器的元素。如果找到了匹配的元素,则返回一个ElementHandle
对象;如果没有找到匹配的元素,则返回None
。语法
1element = await page.$(selector)
示例
假设您想要获取页面上第一个
input
元素:1input_element = await page.$('input')
$$
方法$$
方法用于查找页面上所有匹配给定选择器的元素,并返回一个ElementHandle
对象的数组。即使没有找到匹配的元素,也会返回一个空数组。语法
1elements = await page.$$('selector')
注意事项
-
选择器的特异性:
- 更具体的 CSS 选择器将优先于更通用的选择器。例如,ID 选择器的优先级高于类选择器。
-
元素的存在性:
- 确保在使用选择器之前元素确实存在于页面上。使用
wait_for_selector
方法来等待元素出现。
- 确保在使用选择器之前元素确实存在于页面上。使用
-
错误处理:
- 当选择器没有匹配到任何元素时,Playwright 的方法可能会抛出异常。确保添加适当的错误处理逻辑。
-
XPath 选择器:
- 如果 CSS 选择器不足以满足您的需求,您还可以使用 XPath 表达式。但是,通常建议优先使用 CSS 选择器,因为它们更简洁且性能更好。
-