typescript - 在 Playwright 中以两种不同方式定位元素的区别

await page.locator('nb-calendar-pageable-navigation [data-name="chevron-right]').click();
await page.locator('nb-calendar-pageable-navigation').locator('[data-name="chevron-right]').click();

我刚接触 Playwright。

使用 Playwright (ts) 查找特定元素的这两种方法有什么区别？在使用其中一种方法时有偏好吗？

试着在同样的情况下使用它们，结果也是一样的

答案＃1

从可重用性和维护性的角度来看，会选择第二种方法：

1. 模块化：作为一个命名变量，它可以为代码带来模块化，因为它可以在多个地方与其他定位器/子定位器组合重复使用。

2. 易于维护：如果某个部分发生变化，它可以很容易地修改，而不会影响其他部分，因为其他部分可能也用于其他子定位器。

3. 灵活性：这样你可以定义许多部分定位器，并根据需要将它们组合在一起。

我在一个大型项目中使用这种方法，该项目中我有成千上万个部分定位器，它们根据需要在不同的地方以不同的方式组合。

答案＃2

没有区别。我更喜欢第一个，因为它更短。

也就是说，尽量避免使用 CSS 选择器，除非万不得已。更推荐使用用户可见的定位方式，如 getByRole、getByPlaceholder、getByText 等。