剧作家与打字稿，locator.click() 和 page.click() 之间的区别

Question

阅读文档，我发现不鼓励使用

click()

元素的

page

功能，正如我们在here中看到的那样。

相反，我们可以使用

locator.click()

方法，如此处所示。

我有兴趣了解这两种方法之间是否存在一些“技术差异”，如果有的话，这种差异到底是什么。 我最近正在更新一堆一年前创建的旧函数，并且由于某些原因，例如当我更改时

await this.page.click('.add-card')

和

await this.page.locator('.add-card').click()

行为发生变化，某些元素不再等待；所以测试失败。 我非常确定在尝试再次运行所有内容之前我需要更改其余的代码，因为我认为问题不是由于此更改而是由于存在的各种旧函数。 但尽管如此，我还是有兴趣更好地了解

click

函数是否发生了变化，或者是否真的没有发生任何变化。

Answer 1

page.click()

会自动等待，所以这不是一个因素。我可以提供很多选择定位器的理由：

严格。默认情况下，

page.click()
1. 不强制执行严格性，因此如果页面上有两个元素，它将单击第一个元素而不会出现错误，而如果存在任何歧义，

   locator.click()

   将引发错误。这可以避免回归并有助于保证您找到的元素保持稳定。一致性和简单性。如果您始终使用基于定位器的操作，那么您的代码将保持一致的可读性。我通常假装
page.action()
2. 操作不存在，从而导致一致的测试套件主要由

   getByRole

   和其他一些关键方法组成。 Playwright 拥有相当广泛且复杂的 API，因此您可以采取任何措施将其部分方法设置为禁止使用，这是一件好事。以不同形式一遍又一遍地看到
page.locator(selector).action(options)
3. 有一定的节奏，不被

   page.action(selector, options)

   习语打破。一些 Playwright 用户对选项的去向感到困惑，并且可能没有使用 TypeScript，因此坚持使用第二种模式可以提高清晰度。定位器 API 的范围不仅仅只是
page.locator()
4. 。其他定位器包括

   page.getByRole()

   、

   page.getByLabel()

   、

   page.getByText()

   以及强制执行“用户可见”最佳实践选择的类似方法。如果您使用

   page.click()

   ，则您可能正在使用 CSS 或 XPath，这是不鼓励的。 API 尝试引导您使用 page.getByRole()，甚至是普通的

   page.locator()

   ，以及

   page.click()

   、

   page.$()

   等。能够链接和过滤。 Playwright 建议使用定位器进行链接和过滤，但这对于

   page.

   方法来说是不可能的。缺乏链接可能会导致过度依赖 CSS 和 XPath 来消除选择的歧义。
5. 定位器涵盖了不鼓励的方法 100% 的功能，因此使用

   page.click()

   的唯一好处是节省了一些击键次数。