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

Question

I need to check that data-selector is visible only in case I press one button. On front end it works that one button runs some code and there appeare one fa-lock icon. When I press another button than this icon disappeare. When I try to inspect element in console for developer I see that using this:
document.querySelectorAll('[data-selector="private-inbox-lock-icon"]')
there is empty NodeList with length 0 when icon is not on the screen and NodeList is e.g. NodeList [i.fal.fa-lock.lock-icon] with length 1 whene icon is on the screen. So this is proof that it works. But I am not able to make chai assertion condition to check this in backend.
I get all selectors from the screen
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. ElementHandle type. So this is alway full of data...
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.......
How to set up condition when lockIcons is always not null, no empty even if data-selector is not on the screen... I don´t just got it..

Answer 1

you might take a look at waitForSelector method, in case there are CSS properties like display
const node = await page.waitForSelector('[data-selector="private-inbox-lock-icon"]', { visible: true });
it will return false when display property will be set to none
this should work if there's only one element matching your selector
Other scenario:
if you expecting element to be removed from DOM then simple
await page.$('[data-selector="private-inbox-lock-icon"]') will return null because there's no element matching selector
then from chai docs:
expect(node).to.be.null;