如何在Playwright.js中检查页面上是否存在元素

Question

我正在使用剧作家.js为 https://target.com 编写脚本，在您提交送货信息的页面上，如果您之前在该目标帐户上完成结帐流程，它将提供使用已保存地址的选项。

我想在每次运行脚本时输入新的运输信息，因此我必须让剧作家单击删除(如果页面上存在)，然后输入运输信息。

下面显示的函数可以单击删除，但随后它会在if (await page.$$("text='Delete'") != [])超时，而不是执行函数的else部分。

如何重写此函数，以便它仅检查元素(选择器：text='Delete')是否存在，如果存在，请单击它，如果不存在，则执行函数的填充部分？

async function deliveryAddress() {
if (await page.$$("text='Delete'") != []) {
await page.click("text='Delete'", {force:true})
await deliveryAddress()
} else {
await page.focus('input#full_name')
await page.type('input#full_name', fullName, {delay: delayms});
await page.focus('input#address_line1')
await page.type('input#address_line1', address, {delay: delayms});
await page.focus('input#zip_code')
await page.type('input#zip_code', zipCode, {delay: delayms});
await page.focus('input#mobile')
await page.type('input#mobile', phoneNumber, {delay: delayms});
await page.click("text='Save & continue'", {force:true})
}
}

Answer 1

await page.isVisible("text='Delete'")

也许这就是你要找的那个。

从.isVisible()文档中：

返回元素是否可见。与任何元素不匹配的selector被视为不可见。

Answer 2

await expect(page.locator(".MyClass")).toHaveCount(0)

Answer 3

您有两个主要选项：

const deletes = await page.$$("text='Delete'");
if (deletes) {
// ...
}

或

const deletes = await page.$$("text='Delete'");
if (deletes.length) {
// ...
}

为了便于阅读，我个人会将$$命令保留在 if 语句之外，但这可能只有我自己。

页面上似乎只有一个带有值为"Delete"的属性文本的元素，因为您没有对$$返回的数组执行任何操作。如果是这样，您可以使用$：

const del = await page.$("text='Delete'");
if (del) {
// ...
}

Answer 4

通常，这在很多情况下都会有所帮助，当检查元素是否存在时。

if(await page.locator(your_selector).count()>0)

Answer 5

try {
await page.waitForSelector(selector, { timeout: 5000 })
// ...`enter code here`
} catch (error) {`enter code here`
console.log("The element didn't appear.")
}

从 - https://github.com/puppeteer/puppeteer/issues/1149#issuecomment-434302298

Answer 6

您可以尝试使用此简单的代码来检查元素的可见性并采取必要的操作。

下面的代码检查元素的可见性，如果元素在 DOM 上可见，请单击同一元素。

if(await page.locator('Your selector').isVisible()){
await page.locator("Your selector").click()
}

即使定位器在页面上不可见，也不会引发任何异常或错误。

Answer 7

await expect(page).toHaveSelectorCount('.floorNav__modal', 1);

Answer 8

试试这个，它处理所有具有错误处理的场景 -

async isSelectorExists(selector: string) {
return await this._page.$(selector).catch(() => null) !== null;
}

无效的选择器 - 返回 false

console.log(await isSelectorExists('$'))

有效的选择器并且存在 - 返回 true

console.log(await isSelectorExists('body'))

有效的选择器但不存在 - 返回 false

console.log(await isSelectorExists('h1'))

Answer 9

page.isVisible

不是一个断言。

isVisible 只是以布尔值的形式返回可见性状态，而不是在不满足条件时抛出。

您正在寻找的是：

await expect(page.locator('.somethingdoesnotexistYET')).toBeVisible()

如何在条件下使用：

let isVisible = await expect(locator).toBeVisible({timeout=2000});

If(isVisible) { // Do something man! }

使用剧作家推荐的 Web 断言作为最佳实践：

根据剧作家文档(v1.20)：

这将确保定位器指向附加的可见 DOM 元素。

参考：https：//github.com/microsoft/playwright/issues/18394

Answer 10

检查元素是否退出的最佳方法是：

if selector_exits(page, 'div[aria-label="Next"]'):
print('yeah it exits')
def selector_exists(page, selector, timeout=3000):
try:
element = page.locator(selector).is_visible(timeout=timeout)
return element
except:
return False

注意：这是一种基于 python 的方法。转换为您想要的语言。