playwright
playwright copied to clipboard
microsoft
[Feature] add expect(locator).isInViewport() / isIntersectingViewport
Now we have to use this method, the implementation of which is taken from puppeteer. It would be more convenient if it was in the playwright itself
/**
* @returns {!Promise<boolean>}
* @summary Проверка, что нужный элемент находится в текущей области видимости(viewPort)
*/
isIntersectingViewport(selector: string): Promise<boolean> {
return this.page.$eval(selector, async element => {
const visibleRatio: number = await new Promise(resolve => {
const observer = new IntersectionObserver(entries => {
resolve(entries[0].intersectionRatio);
observer.disconnect();
});
observer.observe(element);
// Firefox doesn't call IntersectionObserver callback unless
// there are rafs.
requestAnimationFrame(() => {});
});
return visibleRatio > 0;
});
}
Context: https://playwright.slack.com/archives/CSUHZPVLM/p1631008178339400
What's your use case for the method? (Helps us prioritize)
We have some card elements, on clicking on which another subcards appears, and this appearance should occur in the user's field of view(there may be bugs that the subcards appeared below and the user will not even notice that something appeared)
I can, in principle, use the above method, which you actually suggested, thank you:) Therefore, I would not give this task a high priority if there are no new applicants
I also would like this feature as we have an anchor tag and on mobile we want to check that after the click the page scrolls down to the anchor correctly.
We have long list of vertical pages of a report. When we select a particular page ( e.g. 10) we want to verify if the scroll has been performed and the page is now in the viewport.
Hi @pavelfeldman @dgozman @mxschmitt ,
Use case from our app (greetings from MSFT as well, well technically LinkedIn 😄 ) Our page is loaded to a specific section of the page (essentially your pretty scrolled down) User clicks the breadcrumb, and it scrolls them up to the first container of their page
I would like to assert the top container is in the viewport
https://user-images.githubusercontent.com/6743796/160018972-d69db8f3-4d31-4da0-8229-9d0c72d0a114.mp4
My use-case from #13131: I have a sidebar in my app which, when collapsed, animates out of the viewport using transform: translateX(-100%) (see more in the linked issue). I want to write a test which asserts that when I press the collapse button, the sidebar animates out of the viewport and becomes "hidden".
+1 on the use case of anchor tags that scroll to different sections of the page
What's your use case for the method? (Helps us prioritize)
Why not to add it directly into Playwright itself, when the method already exist? :D I don't think it would require a lot of work just to make this method available to everyone :D Or would it be? :D
Does anybody know, how can I create this method, to check if an element is in viewport in C#? Because this method is in Javascript (which I hate) and I am not really able to port it into C# :D Thanks for any help, I will greatly appreciate :)
+1 In my case this assertion will be very useful. I don't have any possibility how to check if element is fully visible at this moment.
I need this to determine if the radio button is on negative coordinates and the corresponding label must be clicked or not.
+1 for this. We recently had a regression where scrolling stopped working in our side panel which opens to show detailed information about a row clicked in a table.
I would want to:
- Assert that the bottom-most element in the side panel is not in the viewport initially (there is always a delete button at the bottom of the side panel to delete the selected item from the table)
- Scroll the delete button element into view
- Assert that the delete button element is now in the viewport
There are various other parts of our UI that would benefit from this kind of regression testing including to check that long tables scroll correctly, navigation menu scrolls if the viewport is shorter than the menu height, etc. It seems this is a feature in Puppeteer and it has many potential benefits.
