Playwright定位器详解：自动化测试的核心工具
Playwright定位器详解：自动化测试的核心工具
摘要：本文全面解析Playwright定位器的功能和使用方法，涵盖各种定位策略及其实例，助力测试人员高效、稳定地进行Web应用测试。
引言
在Playwright的自动化测试框架中，定位器（Locators）扮演着至关重要的角色。它们不仅支持自动等待和重试机制，还能以用户感知的方式定位页面元素，确保测试的稳定性和可靠性。
定位器简介
定位器是Playwright自动等待和重试能力的核心。它们提供了一种在页面上任何时刻查找元素的方式。推荐使用内置定位器，如page.get_by_role()、page.get_by_text()、page.get_by_label()等，以提高测试的健壮性。
快速指南
以下是Playwright推荐的内置定位器及其用途：
page.get_by_role()：通过显式和隐式可访问性属性定位元素。page.get_by_text()：通过文本内容定位元素。page.get_by_label()：通过关联标签文本定位表单控件。page.get_by_placeholder()：通过占位符定位输入框。page.get_by_alt_text()：通过替代文本定位图像等元素。page.get_by_title()：通过title属性定位元素。page.get_by_test_id()：基于data-testid属性定位元素。
定位元素的最佳实践
Playwright提供了多种内置定位器，建议优先使用面向用户的属性和明确的合约，如page.get_by_role()。例如，对于以下DOM结构：
<button>Sign in</button>
可以通过其角色和名称进行定位：
page.get_by_role("button", name="Sign in").click()
定位器的动态特性
每次使用定位器执行操作时，都会在页面中查找最新的DOM元素。这意味着即使DOM在操作之间重新渲染，也会使用与定位器对应的新元素。
角色定位器
page.get_by_role()定位器反映了用户和辅助技术对页面的感知方式。定位时通常需要传递可访问名称，以便精确定位元素。例如：
<h3>Sign up</h3>
<label><input type="checkbox" /> Subscribe
</label>
<button>Submit</button>
可以按以下方式定位元素：
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()
标签定位器
对于表单控件，可以使用page.get_by_label()通过关联标签文本定位。例如：
<label>Password <input type="password" /></label>
可以通过标签文本定位输入框：
page.get_by_label("Password").fill("secret")
占位符定位器
对于带有占位符属性的输入框，可以使用page.get_by_placeholder()定位。例如：
<input type="email" placeholder="name@example.com" />
可以通过占位符文本定位输入框：
page.get_by_placeholder("name@example.com").fill("playwright@microsoft.com")
文本定位器
通过元素包含的文本定位，可以使用Substring、Exact String或Regular Expression。例如：
<span>Welcome, John</span>
可以通过文本内容定位元素：
expect(page.get_by_text("Welcome, John")).to_be_visible()
Alt文本定位器
对于图像等支持alt属性的元素，可以使用page.get_by_alt_text()定位。例如：
<img alt="playwright logo" src="/img/playwright-logo.svg" width="100" />
可以通过alt文本定位图像：
page.get_by_alt_text("playwright logo").click()
Title定位器
通过元素的title属性定位，可以使用page.get_by_title()。例如：
<span title='Issues count'>25 issues</span>
可以通过title文本定位元素：
expect(page.get_by_title("Issues count")).to_have_text("25 issues")
测试ID定位器
使用测试ID进行测试是最稳定的方式之一。QA和开发人员应定义明确的测试ID，并通过page.get_by_test_id()查询。例如：
<button data-testid="directions">Itinéraire</button>
可以通过测试ID定位元素：
page.get_by_test_id("directions").click()
自定义测试ID属性
默认情况下，page.get_by_test_id()基于data-testid属性定位元素，但可以通过selectors.set_test_id_attribute()配置自定义属性。例如：
playwright.selectors.set_test_id_attribute("data-pw")
然后在HTML中使用自定义属性：
<button data-pw="directions">Itinéraire</button>
CSS或XPath定位器
如果必须使用CSS或XPath定位器，可以使用page.locator()创建定位器。Playwright支持CSS和XPath选择器，并能自动检测它们。例如：
page.locator("css=button").click()
page.locator("xpath=//button").click()
Shadow DOM中的定位
Playwright的定位器默认支持Shadow DOM中的元素。例如，对于以下自定义Web组件：
<x-details role=button aria-expanded=true aria-controls=inner-details><div>Title</div>#shadow-root<div id=inner-details>Details</div>
</x-details>
可以像没有Shadow根一样定位元素：
page.get_by_text("Details").click()
定位器过滤
通过locator.filter()方法可以根据文本过滤定位器。例如，在以下DOM结构中点击第二个产品卡片的购买按钮：
<ul><li><h3>Product 1</h3><button>Add to cart</button></li><li><h3>Product 2</h3><button>Add to cart</button></li>
</ul>
可以通过文本过滤定位器：
page.get_by_role("listitem").filter(has_text="Product 2").get_by_role("button", name="Add to cart").click()
定位器操作符
可以链式调用创建定位器的方法，如page.get_by_text()或locator.get_by_role()，以缩小搜索范围。例如：
product = page.get_by_role("listitem").filter(has_text="Product 2")
product.get_by_role("button", name="Add to cart").click()
列表操作
可以对定位器进行断言，以计算列表中的项目数量或获取特定项目。例如：
expect(page.get_by_role("listitem")).to_have_count(3)
expect(page.get_by_role("listitem")).to_have_text(["apple", "banana", "orange"])
严格性
定位器是严格的，如果匹配到多个元素，将抛出异常。可以通过locator.first、locator.last和locator.nth()明确选择元素，但建议创建唯一标识目标元素的定位器。
结论
Playwright定位器提供了强大的元素查找功能，支持多种定位策略，确保测试的稳定性和可靠性。通过合理选择和组合定位器，可以高效地进行Web应用测试。
进一步学习资源
- Playwright官方文档
- Playwright定位器指南
- Playwright社区支持