Quality Assurance

Hidden Auto Suggestion drop-down values – How to handle in Selenium

tiethnic colleagues sitting at desk looking at laptop computer in office. stock photo

Handling Hidden dropdown suggestions/Auto suggestion values in your Selenium Automation script?

In our day-to-day automation work we have encountered many drop-down elements and that can also be handled by many ways.

One of them is hidden auto suggestion drop-down values which we can’t inspect hence can’t automate.

 

Problem 1:

  1. Go to https://www.flipkart.com/
  2. Enter any product name in a Search bar.
  3. Try to inspect any suggestion value from the list.
  4. It can’t be inspected.

Please refer following video –

 

Solution:

to handle auto suggestion drop-down values:

  1. Open developer tool.
  2. From the right panel, go to ‘Event Listeners’ tab.
  3. Look for ‘blur’ property.
  4. Click on ‘Remove’ button next each property values to remove it.
  5. Try to inspect the drop-down values again.
  6. Voila, now we can find that element.

Refer following video –

 

Problem 2:

Try to apply above solution on the Perficient website:

  1. Go to https://www.perficient.com/
  2. Click on Search icon.
  3. Enter any keyword to search.
  4. Try to inspect the suggested value.
  5. It will fail to inspect.

Refer following video –

 

The steps provided for Flipkart is not working for Perficient. But why?

Web elements and features depends on the AJAX as well, so the DOM changes on user action. Now we need to change our procedure little bit.

 

Solution:

This will need one more step to inspect the element.

  1. First inspect the text field using developer tool selector or simply do right click > Inspect.
  2. Go to ‘Event Listeners’ tab from right side panel.
  3. Look for ‘blur’ property (Here we get some new property values as compared to Flipkart, because we have inspected the text field first).
  4. Remove all the values.
  5. Enter keyword.
  6. Try to inspect the suggested value.
  7. Hurray it works..
  8. Now use this xpath in selenium script and you are good to go.

Refer following video –

 

Sample Selenium code to handle these hidden drop-down values:

Refer the following video –

Thoughts on “Hidden Auto Suggestion drop-down values – How to handle in Selenium”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Imranur Raheem

Imranur Raheem works as a QA Technical Consultant at Perficient, where he is involved in an API testing and AEM testing project and has 5+ years of testing experience. Enthusiastic about acquiring new talents and passing those skills on to others. Sharing his talent via his blog.

More from this Author

Subscribe to the Weekly Blog Digest:

Sign Up
Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram