playwright 自动化框架python教程(二)[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="su