Catch the Disappearing elements

XPATH for DISAPPEARING ELEMENTS on a webpage

Have you noticed on some webpages, some text boxes have a “blurry” text and it disappears when you entera text? Search text boxes sometimes have such “search” text which is almost invisible. Have you considered how the word ‘search’ disappears once you start entering a value.? Let me tell you the webpage and the html document have been styled to look thus using javascript, or AngularJS.

When we started learning Selenium Automation, we started learning about webdriver, web elements and locators. We have understood that Selenium webdriver is used to automate browser Applications. The browser applications are nothing but the web Browsers configured using HTML

HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content

WebElements: A WebElement represents a HTML element.

The user interface is one of the major component of a web browser. This includes the address bar, back/forward button, bookmarking menu, different buttons, images, links, text boxes etc. These components are called Web Elements.

There are various techniques using which the WebDriver identifies the WebElements which are based on different properties like ID, Name, Class, XPath, Tagname, from the html document.

Selenium provides functionalities that help in locating the element on a web page. It makes use of element locators.

Locators : Locators are defined as an address that identifies a WebElement uniquely within a web page. It is a command that tells Selenium IDE which GUI elements it needs to operate, like – Text Box, Buttons, Check Boxes, etc.

XPATH is one such Locator. It’s the XMLPath to an element. When a XPATH locator is used, the Webdriver traverses the DOM (Document Object Model) along the nodes.

XPath is a syntax for finding elements on web pages, and XPath in Selenium can be used on both HTML and XML documents.

Most Web elements can be located with Xpath using their ID, Name, Class, Text, Tagname or other attributes, but sometimes there are elements like dropdowns which cannot be inspected as they “Disappear” the moment the cursor is moved. So, how can we Inspect such elements and do any action like click during automation? For this reason, we need to assist Selenium in locating such

“Disappearing elements” by writing appropriate xpath.

In my blog here , I have tried to explain two methods which can be useful in locating such elements.

In the First Method, while inspecting a Webpage, we can Use the DEBUGGER MODE to freeze the webpage when the disappearing elements are displayed. With The webpage frozen, Movement of cursors does not affect the elements on the webpage and it is easier to inspect the dropdown elements to find xpath. We can then write appropriate code accordingly to aide Selenium web driver to find such elements during automation

As an Example . I have tried to inspect such auto-suggestion drop downs in the “search” box of the Flipkart webpage. The search box auto-suggest few options when you try a search using a text. The suggestions in dropdown disappear when you try to inspect them which is by using click action on the inspect page. To find Xpaths of such elements we used the debugger mode.

DEBUGGER MODE DOM TRICK

The following steps can be adopted for the same:

1. Open the webBrowser under test.

2. Right “click” -> select Inspect

3. By default, the Elements panel will appear on the right side of the browser windows.

4. The elements represent the html doc of the webpage.

5. There is also a second section which has the styles. We will consider that later.

6. navigate to the sources tab next to the Element tab

7. select new script Snippet

8. It opens a blank section on the right. Add a small code snippet

9. Enter the code

debugger; 

10. Keep this code snippet open

11. Now go back to the search text box are and type a <text>”MOBILE“ which gives auto suggestion dropdown

12. At this point, move to the snippet-> Right click_> Run . The code Debugger is executed.

13. The web browser page is frozen with all the auto suggestion elements still displayed. A small yellow button object can be seen

14 Inspect the required element and write the correct Xpath to find the element.

15. When you are done, Un pause the debugger by pressing the play/pause button.

16. Sometimes, we can even use the functional keys “Fn +F8” for this mode.

17 Alternately, the same can be achieved by opening the Developer tools option from the browser. Next to the source tab, there is an option button which says press to Pause Script Execution. After entering the value in search section, click on this button to pause the script

The following screenshots illustrate how this was achieved.

EVENTLISTENERS -DOM TRICK

In the second Method, We try to capture the disappearing elements by manipulating the DOM style during inspection. An Event Listener is a procedure in JavaScript that waits for an event to occur. The blur event fires when an element has lost focus. By removing these listeners, the element is brought back to focus. When the element is in focus, Itis visible to be inspected and hence located using Xpath.

Example :

We are trying an e-commerce web browser like FLIPKART. The search Textbox on this webpage displays matching items as a dropdown when you type an item name like say WASHING MACHINE.

If you have come across this while testing, you may have noticed that it is very hard to create an XPath as the information required disappears as quickly as the element

When a user is using this browser, it poses no problem, but, if we automate this webpage using Selenium, then we have to write an xpath to locate such elements for automation to continue .

The following steps can be adopted for the same:

1. Open the webBrowser under test.

2. Right “click” -> select Inspect

3. By default, the Elements panel will appear on the right side of the browser windows.

4. The elements represent the html doc of the webpage.There is also a second section which has the styles

5. Choose the Event Listeners tab -> Select blur event-> expand-> find all the remove Tabs -> press Remove

6. Go back to the search Textbox and enter some value eg.”WASHING MACHINE”.

7. The autosuggestions drop down appears and doesnot disappear when you click anywhere.

8. Inspect the elements from the auto-suggestion and write Xpath for the element selected

Hope this blog would be helpful in some of your automation tests . Keep Exploring!

Thank you.