playwright自动化的机制
元素定位
1、css选择器
page.click(’#login-button’);// 通过 id
page.click(’.btn-primary’);// 通过 class
page.click(‘form > button’);// 通过层级关系
2、XPath选择器
page.click(’//button[text()=“登录”]’);
page.click(’//input[@name=“username”]’);
3、最佳定位
| 定位方法 | 核心思路 / 匹配依据 | 适用场景 | 优势 |
| getByRole() | 根据ARIA角色（如button、heading）和可访问名[name=citation:3] | 定位交互式元素（按钮、链接、输入框等） | 稳定性高，贴合无障碍特性，鼓励更好的代码语义化 |
| getByTestId() | 根据自定义的data-testid属性 | 定位任何为测试专门添加标识的元素 | 稳定性极高，专为测试设计，不受UI样式变化影响 |
| getByLabel() | 根据关联的``标签文本 | 定位表单控件 | 符合表单使用习惯，准确性高 |
| getByPlaceholder() | 根据输入框的占位符文本 | 定位没有标签或需要提示信息的输入框 | 在输入框定位中很直观 |
| getByText() | 根据元素可见的文本内容 | 定位非交互式元素（如div, span, p）中的文本 | 简单直观，适合验证内容 |
注：第一优先级（推荐）：getByRole() 和 getByTestId()。
-
对于常规交互元素，优先使用 getByRole()
-
如果开发团队已约定使用测试ID，则 getByTestId() 是最稳定可靠的选择
-
第二优先级（备用）：getByLabel()、getByPlaceholder() 等语义化方法。
-
在处理表单时，这些方法非常直观和高效
-
最后手段（谨慎使用）：CSS选择器、XPath 和 getByText()（用于交互元素）。
-
当上述方法都无法有效定位时，再考虑使用这些方法
-
CSS和XPath虽然灵活，但容易因页面结构微小变动而失效。getByText()用于交互元素时，文本的轻微改变就可能导致测试失败。
等待机制
1、显式等待
显式调用等待方法，例如等待某个选择器、文本或请求。
page.waitForSelector(’#result’, { state: ‘visible’ });
常见state值：
-
‘attached’ → 元素出现在 DOM 中
-
‘visible’ → 元素在页面可见
-
‘hidden’ → 元素隐藏
-
‘detached’ → 元素被移除
2、等待元素出现 / 消失
page.waitForSelector(’#loading’, { state: ‘visible’ });// 等待元素出现
page.waitForSelector(’#loading’, { state: ‘hidden’ });// 等待元素消失
3、等待网络请求完成
等待某个请求完成，常用于AJAX 请求或 API 调用。
page.waitForResponse(response =>response.url().includes(’/api/login’) && response.status() === 200);// 等待指定 URL 的请求完成
4、自定义等待条件
通过page.waitForFunction执行自定义等待逻辑。
page.waitForFunction(() => {return document.querySelector(’#count’).innerText === ‘10’;});// 等待页面上计数器达到 10