Is an element that's outside the viewport considered visible?-CodePudding

Basically what the title says, is an element that's outside the viewport considered visible? Should a waitForVisibility throw an error if that element is ie. in the bottom of the page, outside the user's eye?

CodePudding user response：

The viewport of Selenium is not exactly the same area we, actual human users, can see.
I mean there may be elements that are visible and clickable for Selenium but not actually visible for real human users.
So, Selenium viewport may be larger than the actual human user viewport.

CodePudding user response：

is an element that's outside the viewport considered visible?

Yes it is.

Visibility refers to the displayed state of the element in the DOM. This works best if you think of both states: visible vs invisible:

Visible = the user can see it.
Invisible = the user cannot see it.

Even if it's not in the viewport - and you'd need to scroll to make it appear on screen - it is still visible. You can see when you get to it.

Think of it this way - you can't see me, but I'm visible :-)

I would also say that's how the expected conditions for explicit waits are implemented.

You don't specify a language but, if you have a look at the .net selenium support libraries here you can get a good look inside how they look for visibility of element

Key bit 1, line 119 - the expected condition for ElementIsVisible

  public static Func<IWebDriver, IWebElement> ElementIsVisible(By locator)
        {
            return (driver) =>
                {
                    try
                    {
                        return ElementIfVisible(driver.FindElement(locator));
                    }
                    catch (StaleElementReferenceException)
                    {
                        return null;
                    }
                };
        }

Key bit 2 (line 616), definition of ElementIfVisible - it only predicates on element.Displayed:

  private static IWebElement ElementIfVisible(IWebElement element)
        {
            return element.Displayed ? element : null;
        }

This does fall in line with web development standards.

In CSS there are lots of displayed values. The one to pick out: display: none: The element is completely removed That would be in the DOM but would be invisible to the user.