如何定位并点击首个含3个selection的wrapper对应按钮

以下是不同自动化测试工具下的实现代码：

Cypress #

cy.get('[data-testid="wrapper"]')
  .filter((index, element) => {
    return Cypress.$(element).find('[data-testid^="selection"]').length === 3;
  })
  .first()
  .find('[data-testid="button"]')
  .click();

Playwright #

简洁写法 #

await page.locator('[data-testid="wrapper"]')
  .filter({ has: page.locator('.selections').filter({ hasCount: 3 }) })
  .first()
  .locator('[data-testid="button"]')
  .click();

灵活判断写法 #

const targetWrapper = page.locator('[data-testid="wrapper"]').filter(async (wrapper) => {
  const selectionsCount = await wrapper.locator('[data-testid^="selection"]').count();
  return selectionsCount === 3;
});

await targetWrapper.first().locator('[data-testid="button"]').click();

Selenium (Java) #

List<WebElement> wrappers = driver.findElements(By.cssSelector("[data-testid='wrapper']"));

for (WebElement wrapper : wrappers) {
    List<WebElement> selections = wrapper.findElements(By.cssSelector("[data-testid^='selection']"));
    if (selections.size() == 3) {
        wrapper.findElement(By.cssSelector("[data-testid='button']")).click();
        break;
    }
}

内容的提问来源于stack exchange，提问作者Ivan Haralampiev