如何通过属性选择定位器？

Question

当产品没有库存时，我有以下属性：

<div class="sizeButton__container js-quickAddToCartSize -default-classic js-outOfStockSize -outOfStock " title="" data-productid="654354128" data-variantid="654354128002" data-available="null" data-allocation="0" >
</div>

当我的产品有库存时，我就有了属性

<div class="sizeButton__container js-quickAddToCartSize -default-classic  " title="" data-productid="654354128" data-variantid="654354128003" data-available="true" data-allocation="91">

所以，我搜索，但我没有找到剧作家如何点击具有属性的定位器：data-available = true'或data-allocation！= 0

那么你能帮我吗？

我尝试

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    testIdAttribute: 'data-available'
  }
});

并使用 data-available('true') 调用定位器，但它不起作用

Answer 1

为此，您应该使用

or()

方法。这将根据其中之一创建定位器。以下是一些阅读内容：https://playwright.dev/docs/api/class-locator#locator-or

就您而言，您的定位器可能类似于：

const product = this.page
  .locator("[data-available='null']")
  .or(this.page.locator("[data-available='true']"));

然后，要使用上面的其中一种，就可以等待了。一些效果：

await expect(product.first()).toBeVisible();

或点击：

await product.first().click();

注意

first()

方法的使用，如果您愿意，可以将其替换为

nth(0)

，不过我建议使用

first()

。

希望这有帮助！ :)