Playwright - 选择不是另一个元素的子元素的元素

Question

使用 Playwright，如何选择不是另一个元素的后代的元素？

我有两个几乎相同的元素，但我只对其中一个感兴趣。定义一个仅选择我需要的定位器是很困难的，但我不需要的定位器是我可以轻松选择的另一个元素的子元素。这可以吗？

Answer 1

根据 @ggorlen 的评论，您的场景的一个具体的、简化的示例将非常有帮助。您可能会使用多种不同的策略，并且它们在长期可靠性方面有不同的权衡。这是一个 jsfiddle 和一个 Playwright 测试，使用 3 种不同的方法来识别其中的第一个按钮。

    import { test, expect } from '@playwright/test';
    
    test('test', async ({ page }) => {
      await page.goto('https://jsfiddle.net/c2o0u68n/');
      await page.frameLocator('iframe[name="result"]').getByRole('button', { name: 'Twin buttons' }).first().highlight();  //first match
      await page.frameLocator('iframe[name="result"]').locator(':above(div#easyToFind > button)').getByRole("button", { name: 'Twin buttons' }).highlight(); //higher than the other one
      await page.frameLocator('iframe[name="result"]').locator('div > div:not(#easyToFind)').getByRole("button", { name: 'Twin buttons' }).highlight(); //not inside the other one
    });

第一个只接受有多个匹配的选择器并获取第一个。您的项目总是第一个/最后一个/第n个吗？如果不是，那么这就是片状的。

第二个找到按钮，因为它位于您可以轻松识别的项目上方。如果屏幕尺寸发生变化并且网站采用响应式设计，这很容易被破坏。

第三个指定按钮位于 div 内，而不是您可以识别的那个。使用 CSS 定位器并不是很好（这只是一个简单的示例），但您的元素可能有更清晰的方法可用，例如

locator.filter({hasNot: page.locator('blah')})