How to check if web element is really visible on screen

If element is not found on the page then obviously it is not visible. But there are many cases when an element is present on the page and even located within the view port of a browser but it is not visible. So existence  of an element is not a criteria of visibility.

Why an element may be not visible on screen? There are several core reasons:

• element may have zero height or width,
• it may be covered by another element,
• it may be hidden using CSS styles: opacity: 0, visibility: hidden, display: none,
• or moved off-screen.

You may practice with such invisible elements on Visibility page of the UI Test Automation Playground.

Rapise 6.2+

Starting from Rapise 6.2 you may use Navigator.CheckObjectVisible action to test if object is visible or not.

Legacy

In versions prior 6.2 you may use properties of HTMLObject to check element size and position as well as its style attribute. For example:

function CheckObjectVisible(/**objectId*/ objectId)
{
    var obj = SeSFindObj(objectId);
    
    if (!obj)
    {
        return false;
    }
    
    var width = obj.GetWidth();
    var height = obj.GetHeight();
    
    if (width * height == 0)
    {
        return false;
    }
    
    var x = obj.GetX();
    var y = obj.GetY();
    
    if (x < 0 || y < 0)
    {
        return false;
    }
        
    var style = obj._DoDOMGetAttribute("style");
    if (style)
    {
        style = Global.DoTrim(style.toLowerCase(), true);
        if (style.indexOf("opacity:0") != -1)
        {
            return false;
        }
        if (style.indexOf("visibility:hidden") != -1)
        {
            return false;
        }
        
        if (style.indexOf("display:none") != -1)        
        {
            return false;
        }
    }
        
    return true;
}