7 Advanced SelectorsHub Tutorial For XPath And CSS Selector In Selenium WebDriver


Subscribe to our Newsletter

Locators in selenium play a very essential role to define your selenium testing scripts. If you fail to specify selenium locators appropriately then the selenium automation script won't be able to locate elements on the graphical user interface of your web application. 

CSS selector and XPath are two of the most essential ways for locating web elements for selenium test automation. Nevertheless dealing with them will also require a lot of time. But there is a tool named SelectorsHub that will help you in writing your own XPath and CSS selector in less than 5 seconds.

SelectorsHub is an Xpath, JSpath, CSS selector tool for Chrome extension, and is extremely straightforward to use and comprehend. It is vital to learn how to install SelectorsHub for Chrome in several browsers and how to use XPath and CSS selectors in a selenium WebDriver download test script with sophisticated Chrome dev tools. We'll take a look at a few additional SelectorsHub features in this advanced SelectorsHub tutorial.

7 Important features in the advanced SelectorsHub tutorial

Below are important features in the advanced SelectorsHub tutorial:

Get the iframe and iframe element XPath together

It is a very time taking process to get Xpath and iframe and then elements of the iframe. Also, it is very difficult to find that element is inside the iframe or on-page if the iframe is rendered inside the page. Now you can get XPath of iframe and XPath for CSS selector of iframe element using SelectorsHub Chrome extension at the same time. It will be easy to identify elements inside the iframe using the SelectorsHub Chrome extension. Let's see how you can do it:

  1. Open http://only-testing-blog.blogspot.com/2015/01/iframe1.html and you will find the iframe present on-page.
  2. Right-click on the check box present inside the iframe and inspect it and it will open devtool.
  3. Then go to selectors and have a subtab in the sidebar.
  4. The element identifier text will say that the element you are inspecting is present inside an iframe.
  5. It will provide XPath of iframe, Xpath, and CSS selector of web element at the same time.

You can also locate the nested iframe element and obtain XPath of both iframes using the advanced SelectorsHub tutorial.

Then you can copy it and use it in the selenium WebDriver automation test script.

Identify and locate Shadow Dom Elements for selenium WebDriver

XPath is supported for Shadow Dom Elements as it is very difficult to locate these elements using other selectors as well. It is very troublesome to understand if it is a normal web element or Shadow Dom web element and a lot of time will be wasted in locating it. 

Selecting advanced SelectorsHub tutorial chrome extension for Chrome identifies and tells if it is a Shadow Dom Element or not. Also, it provides scripts that are ready to use for such elements. Let's see how this works:

  1. Inspect Shadow Dom Element using Dev tool and open selectors have some tab from the sidebar.
  2. Here the element identifier says that it is a Shadow Dom Element.
  3. It will show an alert message that XPath is not supported for this element.
  4. Also, it will provide a user script ready to use for selenium WebDriver download. So you won't have to find an XPath of that element. You can easily copy and use it in your test script.

You will also be able to locate elements located inside the nested Shadow Dom using SelectorsHub.

Get JS path of an element using SelectorsHub Chrome extension

You can also get the JS path of any web element.

Generate Xpath or CSS selectors for SVG elements using SelectorsHub for Chrome

You will struggle to generate XPath or CSS selector of SVG elements on-page. But advanced SelectorsHub tutorial will make it easy to identify the SVG element and generate its XPath or CSS selectors. While identifying such SVG elements the element identifier will make sure that it is an SVG element.

Writing case-insensitive XPath and CSS selector

You should write case-sensitive attributes in XPath and CSS selectors. If you write case insensitive attributes it will fail to locate the element on-page. SelectorsHub Chrome offers conversion facilities from case sensitive to case sensitive to XPath and CSS selectors.

For converting it:

  1. Inspect elements using SelectorsHub.
  2. Click to make the selector case insensitive icon.
  3. CssSelector is transformed to input from input[title='Search']. You may thus now find the element by using the input[title = 'SEARCH' I or cssSelector to the input [title = 'SEArch' I
  4. XPath transformed from the input /input[@title='Search'] to /input[translate(@title, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ']. So, you don't have to write a capital letter attribute now. It works with little letters.

Generate and copy XPath and CSS selectors of all elements of the page together

It is a very time taking process for inspecting one element and copy its XPath and then inspect the second element and copy its XPath and then use it in your Selenium WebDriver test script. You may check all page components on one side and then copy all XPath or CSS selectors simultaneously with the advanced SelectorsHub tutorial Chrome add on. Let's see how this can be done:

  1. Open your page.
  2. Press the F12 button and click on the SelectorsHub tab on the sidebar.
  3. Click on click to generate automation code on the multiple paths icon.
  4. Check every aspect of your page one by one.
  5. Xpath and CSS selectors of all inspected elements will then be recorded.
  6. You can also append driver bi find an element or find element syntax on all XPath by clicking on the set attribute icon.
  7. Click on the set attribute icon to set it and set syntax FindElement(By.xpath("xpathvalue")) inbox.

Build XPath, CSS selectors And Run Them Over Selenium Grid On Cloud

XPath and CSS Selectors play a key role in determining the site components most appreciated by users. You may instantly create your own XPath and CSS Selectors with SelectorsHub. What next? What next? How can you quickly follow up on your Selenium tests?

You can utilize a Selenium Grid cloud instead of squandering the bandwidth and resources of your own project while maintaining your own Selenium Grid infrastructure. You now have to make the minimum effort to write your own XPath or CSS Selector with the assistance of an advanced SelectorsHub tutorial. Moreover, using cloud-based infrastructure you may test your Selenium scripts.

Contact Us

Hire vetted developers & testers with Appsierra to build & scale your software products

Trusted by 100x of startups and enterprise companies like

Read More

Subscribe to Our Newsletter