JavaScript allows us to do many things. And when combined with Selenium, we can overcome particularly tricky situations which would present a problem if done without JavaScript. In our last discussion.,we saw how we can use JavaScript power, using the JavaScriptExecutor and ExecuteScript methods in Selenium.
When designing with HTML, there are times when the UI designers might want to hide a few things from the UI. This might be due to a particular scenario, condition or a combination of both, which might drive some elements to be hidden from the plain sight of the UI or the user. Although these elements are still present in the HTML back end, they won’t be in visible to normal user and that in turn would also mean that they won’t be available to Selenium too, since Selenium almost behaves the same way as the normal user would do.
But, unlike users, we as testers, would like to test the hidden elements to ensure that they don’t meddle with the regular elements that we would want to show the users.
Before getting to know how to handle these elements, we need to know how to know how we hide elements in a web page. This can be done in multiple ways
style=”Display:none;”
We can hide an element using the style attribute and using a Display : none value to hide an element.
For example, this would hide the element
<div class="owl-prev" style="display: none;">prev</div>
style=”Display:block;”
Using a “block” value for the Display property within the style attribute for an element would also make it hidden- like this
<div data-easeout="bounceOutLeft" data-easein="bounceInRight" data-stop="7800" data-start="300" data-height="26" data-width="184" data-y="155" data-x="183" class="md-object md-layer-1-0-0 bounceInRight" style="width: 9.58333%; height: 5.97701%; top: 35.6322%; left: 9.53125%; display: block;">DO YOU NEED AN</div>
style=”;”
Using a “hidden” value for the property visibility would also make an element hidden.
<div style="position: absolute; width: 9999px; visibility: hidden; display: none; max-width: none;"></div>
type=”hidden”
Giving a hidden value to the type attribute makes an element hidden to the normal HTML layout.
<input type="hidden" value="form-w1cPBpyG9r-0a26cL3dRYB5fM-V6O_18Ojgef4qOoXo" name="form_build_id">
Now, I may have messed up with calling the names of the HTML attributes or style attributes, because my CSS is not that great, but in a short and crisp way, you would know how an element is made hidden in HTML page.
Now, since these are hidden, they are also not visible to Selenium. But we need to test for these hidden elements.And now we will see how we can test for these hidden element.
We have two basic ways in which we can handle these hidden elements and make them “visible” for our Selenium tests. The first method uses the JavaScript Executor and uses the power of JS to make our tests “see” these elements.
Suppose we have a unique id for the element then we can use the id of that element and pass it to JS Executor. Let we have an element with id “name”, and we that is an hidden element and we want to click on it. We would use the
getElementById
method of JS and grab the id for the element in this way
string1 = str("javascript:document.getElementById('name').click();")
driver.execute_script(string1)
Now most often, we would see that the elements don’t have unique id’s or name’s for them. Then we can use the power of Xpath’s (
read how to create an Xpath here
),and use this in our JS Executor method. Let us see how
element1= driver.find_element_by_xpath("//div[@class='inputElementClass']")
driver.execute_script("arguments[0].click();",element1)
The significance of
arguments[0].click()
is that this argument holds the webelement holding the object of the element we found in the above statement.
Now. apart from using the direct methods of JS to unhide a hidden element, we can go about another indirect route, which will make an element not-hidden for our Selenium tests. As you saw from above,how we used the CSS to hide element. Now we play with the CSS and reverse this to use to our advantage.
Here we have used the for the style attribute so that we can hide this element.
We will change this
value of the style attribute to
visibility:visible
at run time when we’re running our test like this
This changing of the style attribute would cause a momentarily change in the CSS of the drop down and would make it visible to the Selenium test script. This can’t be hard coded though- if you are thinking. We shall here again call our almighty powerful JS Executor to help us and go over this by executing this line in out script
driver.execute_script("arguments[0].setAttribute('style','visibility:visible;');",element1)
where “element1” is the element that we want to make visible. And it goes without saying that we would first find this element using any of the locator methods that we discussed
here
.
Like this:
Like
Loading...
