【playwright篇】CSS 选择器 详细用法

server/2024/10/19 23:48:32/

在 Playwright 中，CSS 选择器是非常重要的，因为它们用于定位页面上的元素。CSS 选择器允许您通过 HTML 元素的属性、类名、ID 等来定位元素。以下是 CSS 选择器的一些基本用法和示例。

CSS 选择器基础

  1. 元素选择器:

    • 直接使用元素名称来选择元素。
    await page.click('button')  # 选择页面上的任意 <button> 元素

  2. 类选择器:

    • 使用 .classname 来选择具有特定类的元素。
    await page.click('.my-class')  # 选择具有 class="my-class" 的元素

  3. ID 选择器:

    • 使用 #idname 来选择具有特定 ID 的元素。
    await page.click('#my-id')  # 选择 id="my-id" 的元素

  4. 属性选择器:

    • 使用 [attribute=value] 来选择具有特定属性值的元素。
    await page.click('[type="submit"]')  # 选择 type="submit" 的元素

  5. 子元素选择器:

    • 使用空格来选择父元素下的子元素。
    await page.click('div .my-class')  # 选择 <div> 下的 .my-class 元素

  6. 后代选择器:

    • 使用空格来选择祖先元素下的后代元素。
    await page.click('body .my-class')  # 选择 body 内的 .my-class 元素

  7. 相邻兄弟选择器:

    • 使用 + 来选择紧接在另一个元素后的元素。
    await page.click('h1 + p')  # 选择紧跟在 <h1> 后的 <p> 元素

  8. 一般兄弟选择器:

    • 使用 ~ 来选择同一父元素下的其他元素。
    await page.click('h1 ~ p')  # 选择与 <h1> 同一父元素下的 <p> 元素

  9. 伪类选择器:

    • 使用 :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 选择器时，冒号 (:) 通常用于表示伪类选择器，这些选择器可以帮助您定位具有特定状态的元素。伪类选择器可以用来选择元素的不同状态，例如激活状态、悬停状态等。

常见的伪类选择器

  1. :hover:

    • 选择鼠标指针悬停在其上的元素。
    1await page.click('a:hover')  # 选择鼠标悬停在其上的 <a> 元素

  2. :active:

    • 选择被激活的元素，即正在被点击的元素。
    1await page.click('button:active')  # 选择正在被点击的 <button> 元素

  3. :focus:

    • 选择获得了焦点的元素。
    1await page.focus('input:focus')  # 选择获得了焦点的 <input> 元素

  4. :checked:

    • 选择被选中的复选框或单选按钮。
    1await page.click('input[type="checkbox"]:checked')  # 选择被选中的复选框

  5. :first-child:

    • 选择父元素的第一个子元素。
    1await page.click('li:first-child')  # 选择列表项的第一个 <li> 元素

  6. :last-child:

    • 选择父元素的最后一个子元素。
    1await page.click('li:last-child')  # 选择列表项的最后一个 <li> 元素

  7. :nth-child(n):

    • 选择父元素的第 n 个子元素。
    1await page.click('li:nth-child(2)')  # 选择列表项的第二个 <li> 元素

  8. :enabled:

    • 选择启用的表单控件。
    1await page.click('button:enabled')  # 选择启用的 <button> 元素

  9. :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) 伪类选择器。这些选择器允许您根据元素在父元素中的位置来选择特定的元素。

伪类选择器

  1. :nth-child(n):

    • 选择父元素中的第 n 个子元素。
    • n 可以是整数，也可以是公式，如 :nth-child(2n+1) 表示奇数位置的子元素。

  2. :nth-of-type(n):

    • 选择父元素中的第 n 个同类型的子元素。
    • 这意味着只有相同类型的元素才会被计数。

  3. 使用 :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')

注意事项

  1. 选择器的特异性:

    • 更具体的 CSS 选择器将优先于更通用的选择器。例如，ID 选择器的优先级高于类选择器。

  2. 元素的存在性:

    • 确保在使用选择器之前元素确实存在于页面上。使用 wait_for_selector 方法来等待元素出现。

  3. 错误处理:

    • 当选择器没有匹配到任何元素时，Playwright 的方法可能会抛出异常。确保添加适当的错误处理逻辑。

  4. XPath 选择器:

    • 如果 CSS 选择器不足以满足您的需求，您还可以使用 XPath 表达式。但是，通常建议优先使用 CSS 选择器，因为它们更简洁且性能更好。


http://www.ppmy.cn/server/99978.html

相关文章

gin获得get和post请求参数，获得请求头信息

gin获得get和post请求参数，获得请求头信息

获得头信息 router.GET("/", func(c *gin.Context) {name : c.Query("id")fmt.Println(name)Token : c.GetHeader("Token")c.JSON(http.StatusOK, Token)})获得get和post信息 package mainimport ("fmt""github.com/SimonWang00…
阅读更多...
鸿蒙 webview 出现 Can not read properties of null (reading ‘getltem‘) 错

鸿蒙 webview 出现 Can not read properties of null (reading ‘getltem‘) 错

1, 先看原来的代码 import web_webview from ohos.web.webview;interface PerUrl {url: string,age: number } Component export struct Url {controller: web_webview.WebviewController new web_webview.WebviewController();ports: web_webview.WebMessagePort[] [];Lin…
阅读更多...
C# 设计模式之命令模式

C# 设计模式之命令模式

总目录 前言 命令模式在日常中&#xff0c;也是比较常见的&#xff0c;就比如&#xff1a;妈妈和爸爸说&#xff0c;你去让孩子把地扫一下&#xff1b;这就是是一个命令&#xff0c;命令中的 下达命令的是妈妈&#xff0c;传达命令的是爸爸&#xff0c;接受命令做事的是孩子&a…
阅读更多...
C语言学习——函数（数组作为函数参数）

C语言学习——函数（数组作为函数参数）

目录 8.7数组作为函数参数 数组元素作函数实参 数组名作参数函数 8.7数组作为函数参数 我们知道可以用变量作函数参数&#xff0c;显然&#xff0c;数组元素也可以作函数实参&#xff0c;其用法与变量相同。此外&#xff0c;数组名也可以作实参和形参&#xff0c;传递的是数…
阅读更多...
深入解析基于 Spring Boot 和 Element UI 的图片上传全过程

深入解析基于 Spring Boot 和 Element UI 的图片上传全过程

在 Web 开发中&#xff0c;图片上传是一个常见且重要的功能。本文将详细介绍一个基于 Spring Boot 后端和 Element UI 前端框架实现的图片上传功能&#xff0c;包括前端组件的配置、相关方法的调用以及后端的处理过程。 一、前端部分 1. 上传组件配置 在前端页面中&#xff…
阅读更多...
IDEA：Dangling Javadoc comment

IDEA：Dangling Javadoc comment

JetBrains对JavaDocs的描述&#xff1a; Javadoc comments are usually placed above classes, methods, or fields in your source code. A Javadoc provides a description of the code element located under it and contains block tags marked with with specific metada…
阅读更多...
数学建模——评价决策类算法（层次分析法、Topsis）

数学建模——评价决策类算法（层次分析法、Topsis）

一、层次分析法 概念原理 通过相互比较确定各准则对于目标的权重, 及各方案对于每一准则的权重&#xff0c;这些权重在人的思维过程中通常是定性的, 而在层次分析法中则要给出得到权重的定量方法. 将方案层对准则层的权重及准则层对目标层的权重进行综合, 最终确定方案层对目标…
阅读更多...
在宝塔面板下安装WordPress

在宝塔面板下安装WordPress

宝塔面板是服务器管理好助手&#xff0c;尤其在Linux系统下&#xff0c;提高了管理的可视化&#xff0c;降低了Linux服务器的使用门槛。 WordPress是个非常好的博客系统&#xff0c;由于支持海量主题模板、各种类型的插件&#xff0c;因此已经成为建设各类网站的首选框架。 今…
阅读更多...
最新文章

Copyright @ 2022~2023