feat: Add visible options to toMatchElement config

[xiaoyuhen]

Summary

Add visible options to toMatchElement config,.
wait for element to be present in DOM and to be visible, i.e. to not have display: none or visibility: hidden CSS properties. Defaults to false.

see #207

Test plan

see test case

[gregberge]

I think it is pretty "fragile", we don't have another option to detect if an element is visible or not?

[xiaoyuhen]

@neoziro

use selector is an easy way, but If we want to check the element not indeed appear, check that display and visibility are incomplete.

I will confirm if puppeteer will detect height === 0 and then determine how we do

[gregberge]

@xiaoyuhen does it work when the element has a class that has a "display: none"? If not, then it is not usable.

[xiaoyuhen]

@neoziro

Yeah, it works. i update the test case.

[Aaron-Pool]

Have you guys considered using the Intersection Observer API for this case?

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

[gregberge]

@Aaron-Pool why not, if it works better, it is good for me.

[Aaron-Pool]

@neoziro I can't say with 100% certainty that it's "better". But I have used it before, and it seems pretty reliable and performant. Also, considering the MDN docs start with "Historically, detecting visibility of an element [...] has been a difficult task for which solutions have been unreliable", it seems like it was introduced for purposes just like these 👍

[Aaron-Pool]

@neoziro @xiaoyuhen Actually, the more I look at it, I'm curious as to why you guys decided to use page.waitForFunction in the toMatchElement function, rather than page.waitForSelector. If you used page.waitForSelector this functionality would be free, because the puppeteer team has already implemented it (see here)

You guys might have a perfectly good reason for doing so, just curious what it was 👍

[gregberge]

@xiaoyuhen tests are not passing, could you fix it please?

[gregberge]

@xiaoyuhen I think the class strategy does not work

[xiaoyuhen]

@neoziro
Yeah, you are right. It doesn't work. will use another way to solve this problem later

[xiaoyuhen]

@Aaron-Pool

thanks for your suggestion, we cant use page.waitForSelector, because we want to match a NodeList.

Intersection Observer API is a good solution, but it's too heavy, I choose the way same with puppeteer.

see https://github.com/GoogleChrome/puppeteer/blob/a064a6341b9ec19aef9253db1d79d228bd9018c1/lib/DOMWorld.js#L510

[xiaoyuhen]

@neoziro

it looks like works well now, could you please review this pr again?

[gregberge]

Good for me thanks!