@troccoli You're not actively hiding the element, right? You just expect when it is scrolled past that element/is above the viewport that it is no longer visible because it is out of view? Unless you're actively hiding the element this doesn't feel like something that has value in testing tbh. It is implicit that if you scroll something out of view that you can't see it. E2E tests are built to test actions/responses. Though you could probably put some fancy javascript in there that tacks a data attribute to the logo when it is out of the view port. Doing that would allow you to use assertDataAttribute on the element when it is out of view. That said, seems like a lot of work for not much value. Maybe I am misunderstanding the goal of this.
Asserting an element is, or is not, in the viewport with Laravel Dusk
I am pretty sure I have read somewhere that Dusk's methods assertVisible and assertMissing work on the viewport, but apparently they don't.
I have created a sample repo. I have added quite a few blocks of text on the homepage just to make sure the logo disappears when scrolling to the bottom of the page.
https://github.com/troccoli/dusk-assert-missing-issue
This is confirmed by the two screenshots I take during the test, but the test still fails.
Does anyone have an idea how I can test whether an element is visible in the viewport?
I am pretty sure I have read somewhere that Dusk's methods assertVisible and assertMissing work on the viewport, but apparently they don't.
As Dusk uses php-webdriver/webdriver under the hood I am pretty sure you haven't read from any official docs or any tutorial written by known evangelists on the Laravel community.
As you can read from the docblock on the isDisplayed method (from the underlying php-webdriver/webdriver Dusk uses):
Is this element displayed or not? This method avoids the problem of having to parse an element's "style" attribute.
So it checks visibility against CSS styles, which is not guaranteed to be in viewport.
Although I agree with @fylzero and, from your demo project, I can't see a obvious reason to test or not if the logo is displayed when the view is scrolled to the end, as this is granted behavior on large content pages, and no user action or JavaScript that could have changed the DOM or CSS is involved, but if you really want to test it, Dusk allows you to run arbitrary JavaScript and get the results:
First DuckDuckGo's result for js check if element in in viewport seems to be pretty staightforward:
Good luck!
@rodrigo.pedra Oh, that executing javascript thing is cool! I didn't even know about that. Super neat!
@fylzero Laravel docs are insane to keep up with all the details
By the way congrats on both the top 10 and 1 million achievements, well deserved =)
Thank you @rodrigo.pedra and @fylzero for you responses.
The demo repo was just to show what I meant, it is not exactly what I am trying to test.
So, for context, I have a sticky menu bar and I want to test that it sticks, basically. So, if the user scrolls down, the menu bar is still visible in the viewport. This is why I disagree with you, I think this kind of tests, i.e. whether something is in the viewport or not, is valuable.
I'll check that article, and maybe even submit a PR to add something like assertVisibleInViewport().
Please or to participate in this conversation.