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

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:

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

Please refer following video –

Solution:

to handle auto suggestion drop-down values:

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

Refer following video –

Try to apply above solution on the Perficient website:

Go to https://www.perficient.com/
Click on Search icon.
Enter any keyword to search.
Try to inspect the suggested value.
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.

First inspect the text field using developer tool selector or simply do right click > Inspect.
Go to ‘Event Listeners’ tab from right side panel.
Look for ‘blur’ property (Here we get some new property values as compared to Flipkart, because we have inspected the text field first).
Remove all the values.
Enter keyword.
Try to inspect the suggested value.
Hurray it works..
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: