Playwright的元素定位器

以下是 Playwright 元素定位器的核心要点整理，结合官方推荐实践和实际应用场景：

一、内置定位器（推荐优先使用）

1. ​角色定位器（get_by_role）​​

   通过 ARIA 角色定位元素，符合无障碍规范，稳定性高

   # 示例：定位登录按钮
   page.get_by_role("button", name="Sign in").click()
   # 支持角色类型：button/checkbox/radio/link/heading/list/table 等

2. ​文本定位器（get_by_text）​​

   通过文本内容匹配元素，支持模糊/精确匹配

   # 精确匹配（需设置 exact=True）
   page.get_by_text("Submit", exact=True)
   # 正则匹配
   page.locator("text=re.compile(r'welcome', re.IGNORECASE)")

3. ​标签定位器（get_by_label）​​

   通过关联标签文本定位表单控件

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

4. ​测试ID定位器（get_by_test_id）​​

   通过 data-testid属性定位（推荐自定义测试ID）

   page.get_by_test_id("submit-btn").click()

二、CSS/XPath 定位（慎用）

1. ​CSS 选择器​

   # 基础用法
   page.locator(".menu-item > a")
   # 组合选择器
   page.locator("form >> #username")

2. ​XPath​

   # 绝对路径
   page.locator("//*[@id='nav']/a[1]")
   # 相对路径
   page.locator("//button[contains(text(),'Login')]")

三、高级定位技巧

1. ​相对定位​

   通过元素关系缩小范围

   # 定位右侧元素
   page.locator("#search >> right-of:button")

2. ​过滤器（Filter）​​

   # 筛选包含特定子元素
   page.get_by_role("listitem").filter(has=page.locator("img"))
   # 排除元素
   page.locator("li").filter(has_not_text="Out of stock")

3. ​Shadow DOM 定位​

   # 定位 Shadow 内容
   page.locator("div", has_text="Shadow Content") 
   # 穿透 Shadow Root
   page.locator("#host").locator("div.shadow-content")

四、最佳实践

1. 定位器选择优先级

1. ​稳定性建议​

   • 避免使用长链式 CSS/XPath（易受 DOM 变更影响）
   • 使用 locator.wait_for(state="visible")确保元素加载完成
   • 对动态元素添加重试逻辑

2. ​调试技巧​

   # 生成定位器代码
   print(page.locator("button:has-text('Submit')").selector)
   # 可视化高亮元素
   page.locator("#element").highlight()

五、常见陷阱

1. ​XPath 的局限性​

   • 无法穿透 Shadow DOM（除非使用 ::shadow伪类）
   • 性能低于 CSS 选择器
   • 对页面结构变更敏感

2. ​文本定位注意事项​

   • 自动标准化空格和换行
   • 区分大小写（除非使用正则）
   • 非交互元素优先使用文本定位