Can an element be visible on the page even if it doesn't have a defined height and width

I came across a piece of code in an existing Selenium automation framework that checks for the width and height of an element before determining if it is interactable. It seems like the element can only be clicked or double-clicked if both its width and height have positive values.

public boolean isElementInteractable(WebElement element) {
    JavascriptExecutor js = (JavascriptExecutor) driver;
    String offsetWidth = js.executeScript("return arguments[0].offsetWidth;", element).toString();
    String offsetHeight = js.executeScript("return arguments[0].offsetHeight;", element).toString();

    if ((Integer.parseInt(offsetWidth) != 0 && Integer.parseInt(offsetHeight) != 0) && element.isDisplayed()) {
        return true;
    }
    return false;
}

Based on my understanding, any visible or interactable element should already have a positive height and width. I find it puzzling why this specific code was implemented in the first place.

I would appreciate it if you could validate my understanding. If I am mistaken, please provide insight into scenarios where this approach may be necessary.

Answer №1

WebElement must possess width and height for interactivity. It can also be considered visible under two circumstances: it has a positive stroke-width or contains a child node/text node with positive dimensions

Referenced from WebDriver specifications Element displayedness

The element displayed algorithm is a boolean state where true signifies that the element is displayed, and false means that it is not. To determine the state of an element, use Call(bot.dom.isShown, null, element).

Extracted from bot.dom.isShown_ on github (line 437)

function positiveSize(e) {
    var rect = bot.dom.getClientRect(e);
    if (rect.height > 0 && rect.width > 0) {
      return true;
    }
    
    // An SVG Path element with zero width or height will still be "shown" with a positive stroke-width.
    if (bot.dom.isElement(e, 'PATH') && (rect.height > 0 || rect.width > 0)) {
      var strokeWidth = bot.dom.getEffectiveStyle(e, 'stroke-width');
      return !!strokeWidth && (parseInt(strokeWidth, 10) > 0);
    }
    
    // Zero-sized elements should be recognized as having positive size if they contain a child element or text node with positive dimensions, unless they have an 'overflow' style of 'hidden'.
    return bot.dom.getEffectiveStyle(e, 'overflow') != 'hidden' &&
        goog.array.some(e.childNodes, function(n) {
          return n.nodeType == goog.dom.NodeType.TEXT ||
                 (bot.dom.isElement(n) && positiveSize(n));
        });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing AngularJS ng-repeat and Bootstrap to showcase database items in columns

I am currently customizing a template for my MEAN app and I am trying to showcase some information retrieved from the database in three columns. However, I am facing an issue where the ng-repeat function is only displaying the data in a single column. Bel ...

How do I incorporate scrolling into Material-UI Tabs?

I am currently incorporating Material-ui Tablist into my AppBar component. However, I am facing an issue with the responsiveness of the tabs. When there are too many tabs, some of them become hidden on smaller screens. For more information on the componen ...

Can someone assist me with developing a selenium script that includes POST request method links?

I need help creating a findelement().click code that will click on a button with a Post Method link. I'm struggling to figure out how to write the code myself, so I would appreciate any assistance. Please see the screenshot provided below for referenc ...

Animated CSS Checkmark Design

How can I create an animated Check-mark using CSS with SVG animation? I attempted the following code but it doesn't seem to be working. Any suggestions? DEMO: https://jsfiddle.net/b7Ln0jns/ CSS: @import "bourbon"; $color--green: #7ac142; $curve: c ...

Changing the visibility of an element in Selenium with C#

Encountering an issue where I am unable to click an excel button on a webpage due to an "element not interactable" error. Upon debugging, I noticed that the element's display is set to false. Interestingly, when I manually go to the page and click o ...

Exploring the contrast between the JsonWireProtocol mechanisms and the latest standards outlined in the W3C Living Document in the context of

Curious about the distinctions between the functionalities of JsonWireProtocol (now considered OBSOLETE) and the latest W3C Living Document dated 31 December 2019 (the updated standard) when utilizing Selenium for conducting UI tests. The process of initia ...

Tips for creating a scrolling animation effect with images

I'm currently attempting to create an animation on an image using HTML/CSS. The issue I'm facing is that the animation triggers upon page load, but I would like it to activate when scrolling down to the image. Below is my snippet of HTML: <fi ...

Changing the color of a Datatable row through a SQL query in an ASP.NET C# application

I am looking to add color to specific rows in my asp.net c# table. I have a table displayed using an ASP:Repeater with HTML: <div class="panel-body"> <div class="table-responsive"> <table class="table table-striped table-bordered tabl ...

Unable to locate the Selenium server

After setting up the latest Selenium Standalone Server (3.0.0-beta2) on my Windows Server 2012 R2 Standard machine, with Java version "1.8.0_101" installed, I ran into an issue. Despite executing the JAR file using the command: java -jar selenium-server-s ...

"Troubleshooting issue in Django 1.6.2 where CSS styles are not being applied to

I am encountering an issue with this code and would greatly appreciate some assistance. The base.html file contains a {% block content %}{% endblock %}. I have created a Signup.html file structured like this: {%extends 'base.html'%} {% block co ...

Persistent extra pixels found in CSS radiobutton group buttons that persist despite attempts to remove them

UPDATE: I have corrected the title of this post, as it was mistakenly taken from another post. For the past few months, I've been working on a sports app using React. However, I am facing a minor cosmetic problem with my radio buttons. Despite my eff ...

When you click, you will be directed to the specific details of the object

I have a recipe component that displays a list of recipes from my database and a recipe-detail component that should show the details of a selected recipe. What I aim to achieve is that when someone clicks on a recipe name, they are routed to the recipe-de ...

Ensuring the footer sticks to the bottom when the body height is set to 100%

I prefer to design my styles based on the height of the window, which I achieve by setting the html and body elements to a height of 100%. html, body{ min-height: 100%; height: 100%; } From there, I can customize the heights of other elements accor ...

The app is unexpectedly crashing when attempting to present a view controller in a modal fashion

I am encountering a specific exception while attempting to display a modal view controller: "Application tried to present modally an active controller <ViewController: 0x16e9d270>" This crash only happens in one particular scenario. Essentially, ...

transform Django's color using URL links

I've successfully implemented 'urlize' in Django (version 4.0.1) within a 'project description' field and it's working perfectly. <h6>{{ project.description | urlize }}</h6> Is there an easy way to apply a diff ...

Picking out specific SharePoint components using jQuery

I encountered an issue with making my two radio boxes readonly. To resolve this, I attempted to disable the unchecked option. Despite trying to access the elements using jQuery and reviewing the data from the console, the solution did not work as expected. ...

An issue occurred with AJAX while using JavaScript

I have been successfully using the following function, but recently I keep encountering this error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIXMLHttpRequest.send]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" locat ...

"Is there a way to switch out div2 with div1 in JavaScript or jQuery while keeping them in the exact same position as div

How can I swap two div elements in HTML by clicking a button, replacing the current div with another div at the same position? .team-intro { margin-top:38%; height:250px; background-color:#7BD2FF; /*background-image:url('images/backgrounds/down ...

`The background video is not being displayed on the transparent PNG`

I have created a transparent PNG image featuring a theater setup and I am attempting to overlay a 1-second video as a background element, similar to a GIF. However, when I try to display the video, instead of seeing it, the background color appears. Additi ...

Utilize the Step Function in Jquery to create animated rotation at a specific degree angle

I have a div that is currently rotated at -35 degrees (as set in the CSS file). I would like to be able to click on it so that it rotates back to 0 degrees. Here is the code from my Javascript file: $("div#words").on("click",function(e){ $(this).anim ...