在 Web 测试中使用不同于 ID 的选择器是否安全？
Is it safe to use selectors different then IDs in web testing?
我与 cypress 一起工作了几个月，我习惯了与 data-auto-id 一起工作，这基本上是独一无二的 select 或者在我的理解中。
<button data-auto-id="my-nice-button">
然后我可以 select 它在赛普拉斯
cy.get([data-auto-id='my-nice-button']...
现在我尝试了 playwright 但是 select 通过文本或类似的东西对我来说似乎很不安全。
他们网站上的示例：
await page.locator('article:has-text("Playwright")').click();
什么被认为是安全的方法？我应该在 playwright 中使用 ID 还是可以跳转到 CSS、text 和其他 selectors？请注意，我没有真实世界的经验，所以我不知道什么是最佳实践。这个问题不是基于意见，它更像是安全还是不安全？
对我们来说幸运的是，Playwright 与众不同 selector engines。您可以选择更适合您的场景的那个。
编剧也描写的不错set of best practices。例如：
- 文本内容、输入占位符、可访问性角色和标签等属性是 user-facing 很少更改的属性。这些属性不受 DOM 结构变化的影响。
- 当user-facing属性频繁变化时，建议使用显式测试id，如data-test-id。 CSS 和 id 选择器支持这些 data-* 属性。
- 并且，XPath 和 CSS 可以绑定到 DOM 结构或实现。当 DOM 结构发生变化时，这些选择器可能会中断。
如果您的团队一直使用 data- 个属性，您可以继续使用它们。
我与 cypress 一起工作了几个月，我习惯了与 data-auto-id 一起工作，这基本上是独一无二的 select 或者在我的理解中。
<button data-auto-id="my-nice-button">
然后我可以 select 它在赛普拉斯
cy.get([data-auto-id='my-nice-button']...
现在我尝试了 playwright 但是 select 通过文本或类似的东西对我来说似乎很不安全。 他们网站上的示例：
await page.locator('article:has-text("Playwright")').click();
什么被认为是安全的方法？我应该在 playwright 中使用 ID 还是可以跳转到 CSS、text 和其他 selectors？请注意，我没有真实世界的经验，所以我不知道什么是最佳实践。这个问题不是基于意见，它更像是安全还是不安全？
对我们来说幸运的是，Playwright 与众不同 selector engines。您可以选择更适合您的场景的那个。 编剧也描写的不错set of best practices。例如：
- 文本内容、输入占位符、可访问性角色和标签等属性是 user-facing 很少更改的属性。这些属性不受 DOM 结构变化的影响。
- 当user-facing属性频繁变化时，建议使用显式测试id，如data-test-id。 CSS 和 id 选择器支持这些 data-* 属性。
- 并且，XPath 和 CSS 可以绑定到 DOM 结构或实现。当 DOM 结构发生变化时，这些选择器可能会中断。
如果您的团队一直使用 data- 个属性，您可以继续使用它们。