【playwright篇】CSS 选择器-用法汇总

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

基础选择器

• 1-元素选择器

  1. await page.click('button')  # 选择button元素

• 2-类选择器

  1. await page.click('.my-class')  # 选择具有 class="my-class" 的元素

• ID 选择器

  • await page.click('#my-id')  # 选择 id="my-id" 的元素

• 3-属性选择器

        await page.click('[type="submit"]')  # 选择 type="submit" 的元素

• 4-祖先元素下的后代元素(使用空格 )

        await page.click('body .my-class')  # 选择 body 内的 .my-class 元素

• 5-直接子元素(使用>)

        await page.click('div.my-class > button[type="submit"]') 

        查询：类名 my-class 的 div 元素下的直接子元素 button，并且button中具有属性type="submit"

• 6-相邻兄弟选择器

  await page.click('h1 + p')  # 选择紧跟在 <h1> 后的 <p> 元素

  • 使用 + 来选择紧接在另一个元素后的元素。

• 7-一般兄弟选择器

  await page.click('h1 ~ p')  # 选择与 <h1> 同一父元素下的 <p> 元素

  • 使用 ~ 来选择同一父元素下的其他元素。它仅选择紧跟在前面元素后面的同级元素。

• 复合选择器

        1/查询：类名 my-class 的 div 元素下的直接子元素 button，并且button中具有属性type="submit"

await page.click('div.my-class > button[type="submit"]') 

# 创建定位器对象，#span子元素
span_locator = page.locator('.container > span')  
        
# 通过父元素定位同一目录下的 div 元素（父元素使用：.parent）
sibling_div_locator = span_locator.first.parent.locator('div')

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']"

伪类选择器

伪类选择器，使用冒号 (:) 通常用于表示，这些选择器可以帮助您定位具有特定状态的元素。

伪类选择器可以用来选择元素的不同状态，例如激活状态、悬停状态等。

1. :hover:

   • 选择鼠标指针悬停在其上的元素。

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

2. :active:

   • 选择被激活的元素，即正在被点击的元素。

   await page.click('button:active')  # 选择正在被点击的 <button> 元素

3. :focus:

   • 选择获得了焦点的元素。

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

4. :checked:

   • 选择被选中的复选框或单选按钮。

   await page.click('input[type="checkbox"]:checked')  # 选择被选中的复选框

6. :enabled:

   • 选择启用的表单控件。

   await page.click('button:enabled')  # 选择启用的 <button> 元素

7. :disabled:

   • 选择禁用的表单控件。

   await page.click('button:disabled')  # 选择禁用的 <button> 元素

        示例代码

import asyncio
from playwright.async_api import async_playwright


async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        context = await browser.new_context()
        page = await context.new_page()

        # 访问一个网站
        await page.goto('https://example.com')

        # 点击一个处于激活状态的按钮
        await page.click('button:active')

        # 获取一个获得了焦点的输入框的值
        input_value = await page.input_value('input:focus')
        print(f'Input value: {input_value}')

        # 等待一个元素变得可见
        await page.wait_for_selector('.result', state='visible')

        # 获取元素的文本内容
        result_text = await page.inner_text('.result')
        print(f'Result text: {result_text}')

        # 关闭浏览器
        await browser.close()


# 运行异步函数
asyncio.run(main())

索引选择

在 Playwright 中使用 CSS 选择器时，如果您想根据索引位置来选择元素，可以使用 :nth-child(n) 或 :nth-of-type(n) 伪类选择器。这些选择器允许您根据元素在父元素中的位置来选择特定的元素。

• :nth-child(n):

  • 选择父元素中的第 n 个子元素。
  • n 可以是整数，也可以是公式，如 :nth-child(2n+1) 表示奇数位置的子元素。
  • 用于定位父元素的第 index 个子元素，无论它们的标签名是什么。

• :first-child

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

​​​​​​  :last-child:

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

        选择父元素的最后一个子元素

     :nth-last-child(n) 

        用于选择倒数第 n 个子元素

 :nth-of-type(n):

        用于定位具有相同标签名的元素中的第 index 个元素。（不依赖父子关系）

     

      :nth-last-of-type(n)

            倒数第 n 个同类型的元素

playwright, $ 和$$用法

$ 方法用于查找页面上第一个匹配给定选择器的元素。如果找到了匹配的元素，则返回一个 ElementHandle 对象；如果没有找到匹配的元素，则返回 None。

语法

element = await page.$(selector)

示例

假设您想要获取页面上第一个 input 元素：

input_element = await page.$('input')

$$ 方法

$$ 方法用于查找页面上所有匹配给定选择器的元素，并返回一个 ElementHandle 对象的数组。即使没有找到匹配的元素，也会返回一个空数组。

语法

elements = await page.$$('selector')

匹配字符

完全匹配

全部匹配，使用not(去掉不满足条件的)

"locator": "button:text('Cc'):not(:has-text('acc'))"}
"locator": "button:has-text('Cc'):not(:has-text('acc'))"}

部分匹配：text()

   匹配方式：不区分大小写，部分匹配
   page.locator("span:text('AaB')")

部分匹配：has-text()

      匹配方式：不区分大小写，部分匹配

      locator('div:has-text("new")')

text() 和has-text() 没有什么区别，都可以正常使用。

开头匹配

        # 定位所有以 'a' 开头的类名的元素
        elements = page.locator('[class^="a"]').all()

         # 使用 Locator 的 .filter() 方法定位所有文本以 'c' 开头的 p 元素
         elements = page.locator('p').filter(has_text=lambda text: text.startswith('c')).all()

注意事项

1. 选择器的特异性:

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

2. 元素的存在性:

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

3. 错误处理:

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

4. XPath 选择器:

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