How to write XPath for Hidden and Invisible dropdown elements: SelectorsHub
Вставка
- Опубліковано 15 вер 2024
- In this video, you will learn how you can quickly write the XPath for hidden dropdown elements and for those elements which got disappeared from the DOM after inspecting.
SelectorsHub helps to generate, write and verify the XPath & cssSelector.
SelectorsHub is the complete new way to generate, write and verify the XPath and cssSelectors.
Checkout SelectorsHub primary Sponsor TestProject- A FREE end-to-end test automation tool.
bit.ly/Sh_TestP...
Please be a patron and support SelectorsHub to run it FREE forever.
Even 1-5$ (a coffee cost) per month will be a great help.
/ sanjaykumar_s. .
SelectorsHub-
1) It suggests all possible XPath and cssSelector functions while typing like smart editor along with their occurrences to complete Selectors quickly. Now you need not to copy and paste attribute values from DOM anymore to build XPath and cssSelector.
2) Generate all types of possible selectors in single click.
3) Copy XPath, cssSelector and JS path from the context menu itself. No need to open DevTools and SelectorsHub tab anymore.
4) Feature to customise contextMenu.
5) Feature to disable and enable SelectorsHub in contextMenu
6) It gives robust unique relative cssSelector and XPath.
7) It also supports shadowDOM, iframe, frame and SVG elements.
8) It gives the proper error message like what is wrong in your xpath and cssSelector.
9) It also gives the index based xpath in auto suggest.
10) It has the feature to generate selector with the desired attribute.
11) You can also generate selectors with driver command.
12) You can customise the UI as you want.
13) All the config will be saves in local so next time when you open it, it open with your configs.
14) To copy the Selector's value, just click on copy icon or the Selector's Header.
15) To edit Selector's value, just click on selector's value, it will put the value in box where you can edit it and verify.
Please follow video tutorial to make the best use of SelectorsHub.
• SelectorsHub 2.0 detai...
If you face any issue or feedback, feel free to reach out to me at selectorshub@gmail.com
Please find the change log here-
www.selectorsh...
For more details please checkout homepage-
www.selectorsh...
Very simple steps to use the tool-
1. Open DevTools.
2. On right side, the last sidebar tab is SelectorsHub. Click on it.
3. Here it show all possible selectors for inspected element. For whichever element you want to generate selector, just inspect that and it will generate all possible selectors for that element.
4. To build own XPath or cssSelector, start typing in the selector input box.
5. SelectorsHub will automatically suggest all attributes and everything to complete Selectors quickly. Now you need not to copy and paste attribute values anymore. With this you can save huge amount of time.
6. After typing just press enter.
7. It will high light all matching node and list down them in the SelectorsHub tab.
8. It will also scroll the web element to viewable area.
9. To copy selectors value, click on copy icon.
10. To edit selector value, click on that selector value.
thank you for this material, this guide helps me a lot to understand dropdown behavior. Greetings from Chile :D
Hi Sanjay sir thank you so much for your unconditional support your trick has worked wonders for me...
You have guided to select iFrames using selenium switch_to command, but after selecting there is a need to unselect the frame as well to start working with elements in the default screen, for this we need to type driver.switch_to.default_content() inorder to unselect the selected frame. Thanks
Really Helpful, Thanks For the Solution
Thank You Bro. I blocked with some issue. This Videos plotted a way to clear it.
Glad to hear.
Thank you! But even in debugger mode, I get the tag and when I click on the div to expand, it disappears. So I am getting an empty list.
It indeed helpful brother.
Thankyou
You are great Sanjay 👍
Your welcome. You can join my live training to learn more concepts about xpath etc here - selectorshub.com/selectorshub-training/
Thanks bro ... it really helped me alot
Thank you very much.
Hi it is very useful but what to do if I have to get xpath for a suggestion which occur while searching any item through search box in flipkart , because as soon as I right click that suggestion it get gets disappear .
With the help of SelectorsHub Debugger feature you can inspect any kind of dynamic drop-down, suggestions dropdown and dynamic element. Here I have shown flipkart example- ua-cam.com/video/nB8QA68PwvQ/v-deo.htmlsi=ubhYW2XurKMS_HvP
Thank you❤
thank you very much! Do you help a lot!
Your welcome. You can join my live training to learn more concepts about xpath etc here - selectorshub.com/selectorshub-training/
Thanks it really helped!!
Glad to hear that. Please share SelectorsHub with your colleagues.
thanks!
Sir what if as we right click on the element and download starts and we are not able to inspect the element
Sure, you can use the SelectorsHub Debugger feature for such elements. Follow this tutorial - ua-cam.com/video/TlnTG641i_o/v-deo.html
Just freeze the page from sources in devtool and your dropdown will not going to collapse. And you can check and find any element locator.
Sir in gobibo when I am click on from and enter the suggestion then it is showing the autosuggestion but when right click then its disappear.
how to find xpath of such element
Please follow this video-
ua-cam.com/video/CW00y97mXBA/v-deo.html
Hi actully in some popover dropdowns when we rightclick on the dropdown element,that element will get selected.so how to handle that one
Use SelectorsHub debugger feature for that.
The organization with which I am working won’t allow us to download and use this … is there any other way
Sure you can easily get it unblocked and also you can try on firefox. On firefox, they must have not blocked.
Follow this video to get it unblock-
ua-cam.com/video/wH3qbioP_3w/v-deo.html
it's not helpful because everytime i right click, the options of the drop downs they disappear
Pls use SelectorsHub Debugger feature. You can follow this tutorial- ua-cam.com/video/nB8QA68PwvQ/v-deo.htmlsi=t7dLPwP8IiF0Z7PP
nothing new functionality/ If your element drop down list or info gets from your cookies - this method is not worked
How to select drop-down value if drop-down is in shadow root
what if there is ::after pseudocode in the ::after and the dropdownlist only appears when we click on the arrow which is ::after and it is not interactable when we try to automate it even with the selectorshub
This is a pseudo element which can’t be located through locators as you mentioned well. So for this you will have to figure out if there is any element on which by clicking dropdown will appear.
@@SelectorsHub yes its an arrow inside a div tag and i don't know any other way to find it other than inspect tool. Its not an anchor tag, or any other clickable element, when i use the inspect element arrow it focuses to the :after code on html section.
Thank you for your quick response btw.
@@harmansingh-bq2rm please connect with me on SelectorsHub slack channel, i will help you on this
@@SelectorsHub Where do i find that channel
@@harmansingh-bq2rm I am facing the same issue. Were you able to find a workaround for this?
But in my application on right click, drop-down is disappearing.how can I get xpath for this elements.could anyone have solution for this, please let me know
Yes you can use debugger feature of SelectorsHub. Please checkout the debugger feature
Hi my dropdown gets double click even if its just single click so yeah the contents are still hidden.. any ideas pls?
I will have to look into the dropdown. Please connect on SelectorsHub slack group.
@@SelectorsHub where is the group located? Fb group?
@@theglorioussapphiremonkey4750 bit.ly/SH_Slack
Help me for delete delivered pdf file on web whatsapp via vba.🙏🏻
Not working for my application
copy doesnot copy anything for me
For which website? Could you please connect slack channel.
But this is not working for all drop list
Yes for that SelectorsHub has debugger feature. Please find the tutorial for it here
ua-cam.com/video/ypWrpy920ug/v-deo.html
Hi.
So i have the xpath:
//a[normalize-space()='Ambassador Program']
And how to write the method so Selenium can open that link:
driver.findElement(By.xpath("//a[normalize-space()='Ambassador Program']")).click();
?
Thank you for the answer.
It's OK, I figured it out. I solved it :) Thanks anyway