如何等待多个选择器？

Question

例如，我正在测试一个搜索页面，它将在 .text > span:nth-child(1) 中显示结果编号。

但是，如果没有任何结果，它只会显示text="nothing"或.text > span:nth-child(1)不存在。

那么如何才能同时等待这两个条件呢？

Answer 1

您可以等待两个元素，使用 try-catch 并设置一个布尔变量，具体取决于找到哪个元素。

在Java中你可以使用

Boolean nothingFound, resultsFound = false;

try {
    page.waitForSelector("text=\"nothing\"");
    nothingFound = true;

} catch (Exception e) {}

try {
    page.waitForSelector(".text > span:nth-child(1)");
    resultsFound = true;
} catch (Exception e) {}

我不是 Java脚本专家，但我认为这样的东西应该有用：

let  nothingFound, resultsFound = false;

try {
    await page.waitForSelector('text="nothing"');
    nothingFound = true;
}
catch (e) {}

try {
    await page.waitForSelector('.text > span:nth-child(1)');
    resultsFound = true;
}
catch (e) {}

Answer 2

您需要使用逗号分隔的 CSS 选择器列表，该列表将匹配可以被该列表中的一个选择器选择的所有元素：

//                                           ↓ comma
await page.locator('.text > span:nth-child(1), span:has-text("nothing")').innerText();

它将等待 .text > span:nth-child(1) 或 span:has-text("nothing")。

如何等待多个选择器？

How to wait for multiple selectors?

playwright