CODEWITHSUNDEEP
javascripthtmlcssselenium
Timothy Rajan
Timothy Rajan

Reputation: 1957

Selenium - Able to get the list of Webelements rendered & displayed in a Web page

I am on the look out for a solution to get only the web elements which is displayed on a web page. For example, for the web page https://login.yahoo.com/, there is only a few web elements which are rendered to the browser ( 1 input box, 7 links, 1 button etc )

When I try to get only these web elements, all I am getting is a large number of web elements in my collection.

For example, I am getting the select web element when I query the HTML

<select type="select" name="countryCodeIntl" aria-required="true" role="combobox" aria-multiline="false" aria-labelledby="country-code-lbl-aria" disabled="">
    <option role="option" data-code="+93" value="AF">Afghanistan ‪(+93)‬</option>       
</select>

This Select element is not available in the web page. Not sure how to ignore this web element while querying the DOM

I tried the following approaches

 1. Displayed==true ( Selenium funcitonality )

 2. IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
            Boolean elementVisible = (Boolean)js.ExecuteScript("return arguments[0].offsetWidth > 0", myCurElement);
            Boolean elementVisible1 = (Boolean)js.ExecuteScript("return arguments[0].offsetHeight > 0", myCurElement);
            Boolean elementVisible2 = (Boolean)js.ExecuteScript("return arguments[0].getClientRects().length > 0", myCurElement);
            if (elementVisible ==true&& elementVisible1== true && elementVisible2 == true)
            {}

Both the above approaches returns elements which are invisible in the web page.

Any pointers on how to get only the HTML webelements which are visible to human eye in the browser? Can this be done using javascript?

Thanks a lot for the help.

Upvotes: 1

Views: 408

Answers (1)

undetected Selenium
undetected Selenium

Reputation: 193088

As you are trying to to get only the web elements which is displayed on a web page doesn't justifies to me as a valid Business Case. A typical Testcase may want you to verify if a particular element (Button, Text, etc) is displayed or not.

As you mentioned for the web page https://login.yahoo.com/, there is only a few web elements which are rendered to the browser ( 1 input box, 7 links, 1 button etc ). Yes you saw it right as a End User. Here you missed out the fact that those ( 1 input box, 7 links, 1 button etc ) are with property visible set to value true. Hence you see them when you access the URL.

Next when you try to get only these web elements, all I am getting is a large number of web elements in my collection because of different reasons:

  1. To find/search particular element/elements you need to take help of locators (either id, name, linkText, css, xpath). All these locators are unique for each and every element present on the HTML DOM. So if you are trying to use xpath or css ensure that the locators you constructed identifies a unique element (unique set of elements) on the HTML DOM.
  2. All the elements on the HTML DOM necessarily doesn't shows up on the Website. That's because, some elements are kept hidden so they are not displayed on the Web page to restrict the End Users to perform any actions on them. These elements though not visible in the Website but they do exists as Hidden Elements

Conclusion:

So When I try to get only these web elements consider identifying each element through respective locator which identifies the element uniquely on the HTML DOM. Once identified, you can perform any desired action (sendKey(), click(), etc) on them till they are attached to the HTML DOM

Upvotes: 1

Related Questions