【Playwright+Python】系列教程(五)元素定位

一、常见元素定位

定位器是 Playwright 自动等待和重试能力的核心部分。简而言之,定位器代表了一种随时在页面上查找元素的方法,以下是常用的内置定位器。

1、按角色定位

按显式和隐式可访问性属性进行定位
语法: page.get_by_role()
Dom结构示例1:

示例代码1:

page.get_by_role("button", name="Sign in").click()

说明:按名称为“Sign in”button的角色找到元素。
Dom结构示例2:

示例代码2

expect(page.get_by_role("heading", name="Sign up")).to_be_visible()

page.get_by_role("checkbox", name="Subscribe").check()

page.get_by_role("button", name=re.compile("submit", re.IGNORECASE)).click()

说明:

  • 角色定位器包括按钮、复选框、标题、链接、列表、表格等,并遵循 ARIA 角色、ARIA 属性和可访问名称的 W3C 规范。请注意,许多 html 元素(如
  • 建议优先考虑角色定位器来定位元素,因为这是最接近用户和辅助技术感知页面的方式。

page.get_by_label() 通过关联标签的文本查找表单控件。

2、 按标签定位

通过关联标签的文本查找表单控件
语法: page.get_by_label()
Dom结构示例:

示例代码:

page.get_by_label("Password").fill("secret")

3、按占位符定位

语法: page.get_by_placeholder()
Dom结构示例:

示例代码:

page.get_by_placeholder("name@example.com").fill("playwright@microsoft.com")

4、通过文本定位

按占位符查找输入
语法: page.get_by_text()
Dom结构示例:

示例代码:

# 可以通过元素包含的文本找到该元素
page.get_by_text("Welcome, John")
# 设置完全匹配
page.get_by_text("Welcome, John", exact=True)
# 正则表达式匹配
page.get_by_text(re.compile("welcome, john", re.IGNORECASE))

说明:

  • 按文本匹配始终会规范化空格,即使完全匹配也是如此。例如,它将多个空格转换为一个空格,将换行符转换为空格,并忽略前导和尾随空格。
  • 建议使用文本定位器来查找非交互式元素,如 div、span、p 等。对于button、a、input等交互式元素,请使用角色定位器。

5、通过替代文本定位

通过其文本替代来定位元素(通常是图像),所有图片都应具有描述图像的 alt 属性。可以使用 page.get_by_alt_text() 根据替代文本查找图片。
语法: page.get_by_alt_text()
Dom结构示例:

示例代码:

page.get_by_alt_text("playwright logo").click()

说明 :当元素支持替代文本(如 img 和 area 元素)时,建议使用此定位器

6、按标题定位

按元素的 title 属性查找元素
语法: page.get_by_title()
Dom结构示例:

示例代码:

expect(page.get_by_title("Issues count")).to_have_text("25 issues")

说明:当元素具有 title 属性时,建议使用此定位器
7、按测试 ID 查找
根据元素data-testid 属性来定位元素(可以配置其他属性)
语法: page.get_by_title()
Dom结构示例:

示例代码:

page.get_by_test_id("directions").click()

8、设置自定义测试 ID 属性

默认情况下,page.get_by_test_id() 将根据 data-testid 属性查找元素,但您可以在测试配置中或通过调用 selectors.set_test_id_attribute() 来配置它。
将测试 ID 设置为对测试使用自定义数据属性,示例代码:

playwright.selectors.set_test_id_attribute("data-pw")

Dom结构:

然后像往常一样找到该元素,示例代码如下:

page.get_by_test_id("directions").click()

9、通过 CSS 或 XPath 定位

如果绝对必须使用 CSS 或 XPath 定位器,则可以使用 page.locator() 创建一个定位器,该定位器采用一个选择器来描述如何在页面中查找元素。Playwright 支持 CSS 和 XPath 选择器,如果省略 css= 或 xpath= 前缀,则会自动检测它们。
示例代码:

page.locator("css=button").click()
page.locator("xpath=//button").click()

page.locator("button").click()
page.locator("//button").click()

说明:

  • XPath 和 CSS 选择器可以绑定到 DOM 结构或实现。当 DOM 结构更改时,这些选择器可能会中断。
  • 不建议使用 CSS 和 XPath,因为 DOM 经常会更改,从而导致无法复原的测试。相反,请尝试提供一个接近用户感知页面的定位器,例如角色定位器,或者使用测试 ID 定义显式测试协定。

二、在 Shadow DOM 中定位

1、什么是Shadow DOM?

Shadow DOM 是 Web Components 技术的一部分,它提供了一种将 HTML 结构、样式和行为封装在一个独立的、封闭的 DOM 中的机制。以下是一个使用 Shadow DOM 的例子,该例子展示了如何创建一个简单的自定义组件,并将内容、样式封装在 Shadow DOM 中。
示例代码:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Shadow DOM Example</title>  
    <style>  
        /* 外部样式,不会影响 Shadow DOM 内部 */  
        .container {  
            font-size: 20px;  
            color: red;  
        }  
    </style>  
</head>  
<body>  
    <div id="hostElement" class="container">Shadow Host (这里不会显示 Shadow DOM 的内容)</div>  
  
    <script>  
        // 自定义元素定义及 Shadow DOM 创建  
        class MyCustomElement extends HTMLElement {  
            constructor() {  
                super();  
                // 创建 Shadow Root  
                const shadowRoot = this.attachShadow({ mode: 'open' });  
  
                // Shadow DOM 内部样式和内容  
                shadowRoot.innerHTML = `  
                    <style>  
                        .shadow-content {  
                            font-size: 16px;  
                            color: blue;  
                        }  
                    </style>  
                    <div class="shadow-content">This is inside the Shadow DOM.</div>  
                `;  
            }  
        }  
  
        // 注册自定义元素  
        customElements.define('my-custom-element', MyCustomElement);  
  
        // 将自定义元素添加到文档中  
        const customElement = document.createElement('my-custom-element');  
        document.body.appendChild(customElement);  
  
        // 注意:在实际应用中,你可能会将自定义元素直接写在 HTML 中,如:<my-custom-element></my-custom-element>  
        // 而不是通过 JavaScript 动态创建和添加。  
    </script>  
</body>  
</html>

dom结构:

2、如何查看Shadow DOM

首先打开浏览器控制台的设置选项

然后再找到Preference -> Elements,把show user anent shadow dom勾上

这时候我们再来看一下此时的dom元素发生了什么变化

我们会发现这些标签内部都大有乾坤,在这些标签下面都多了一个 shadow root ,在它里面才是这些标签的真实布局。

3、在 Shadow DOM 中定位

默认情况下 ,Playwright 中的所有定位器都使用 Shadow DOM 中的元素。例外情况包括:

  • 通过 XPath 定位不会刺穿阴影根
  • 不支持闭合模式阴影根

要定位,使用 page.get_by_text("") page.locator("", has_text="") 都可以,要确保

标签:游戏攻略