dom - 如何使用 puppeteer 检查数据选择器是否不在屏幕上

Question

我需要检查数据选择器是否只有在我按下一个按钮时才可见。在前端，一个按钮运行一些代码并且出现一个锁图标。当我按下另一个按钮时，这个图标就会消失。当我尝试在控制台中为开发人员检查元素时，我看到使用这个：

document.querySelectorAll('[data-selector="private-inbox-lock-icon"]') 

当图标不在屏幕上时，有长度为 0 的空 NodeList，当图标在屏幕上时，NodeList 是长度为 1 的 NodeList [i.fal.fa-lock.lock-icon]。所以这是它有效的证明。但我无法制作 chai 断言条件来在后端检查这一点。

我从屏幕上获取所有选择器

const lockIcons = await 
World.page.$$('[data-selector="private-inbox-lock-icon"]');

But I am not able to set up condition when selector is not on the screen cause await alway returns me an array of elements. 元素句柄类型。所以这总是充满数据......

expect(lockIcons).to.not.be.empty; - true when Icon on the screen 
expect(lockIcons).to.be.empty; - doesn´t work cause lockIcons is not empty anytime.......

如何在 lockIcons 始终不为空时设置条件，即使数据选择器不在屏幕上也不为空......我不只是得到它..

标签： domelementpuppeteerchai

Answer 1

你可以看看waitForSelector方法，以防有类似的 CSS 属性display

const node = await page.waitForSelector('[data-selector="private-inbox-lock-icon"]', { visible: true });

它会false在display属性设置为时返回none

如果只有一个元素与您的选择器匹配，这应该可以工作

其他情况：如果您希望从 DOM 中删除元素，那么简单

await page.$('[data-selector="private-inbox-lock-icon"]')将返回null，因为没有元素匹配选择器

然后从柴文档： expect(node).to.be.null;