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

Question

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

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

当屏幕上没有图标时，有一个长度为 0 的空 NodeList，例如 NodeList 是节点列表 [i.fal.fa-lock.lock-icon]，当图标在屏幕上时长度为 1。所以这证明它有效。但是我无法在后端创建 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 始终不为空时如何设置条件，即使数据选择器不在屏幕上也不为空...我不是刚明白..

Answer 1

你可以看看 waitForSelector 方法，以防有 CSS 属性，如 display

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

它将return false当display 属性设置为none

如果只有一个元素匹配您的选择器，这应该有效

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

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

然后来自 chai 文档： expect(node).to.be.null;

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

How to check that data selector is not on the screen using puppeteer

dom

element

chai

puppeteer