Is there a way for me to select an element in a web browser, using Selenium IDE and get an XPath of the item I clicked on (regardless of whether it is text or button?)
TIA
There is no such thing as "the" XPath. Every element has many Xpath, there is no definitive.
Some Xpath are brittle, some are stable, some are reliable, some are unstable.
The "best" and most suitable has to be a human decision. Browsers allow you to test and experiment with Xpath.
You can get "the" xpath - but it would be an absolute path to the element which is usually not reliable and very fragile. In the firebug firefox extension find an element and select "Copy xpath" from the menu.
In Selenium IDE, click the Select button beside the Target text box. And then move your mouse pointer to the web element that you want to check (it will be highlighted). Click on the element. In the IDE, click the Target dropdown box. Select the xpath that you want to use.
Alternatively, if you do not want to use IDE, you can also use the Developer Tool panel in Chrome or Firebug plugin in Firefox to get the xpath.
In Selenium IDE, by keeping the recording mode on, then clicking on the element you want to capture, you can find all the locators of that web element that are captured by the Selenium IDE (if the selenium IDE is able to capture the web element). After recording that element in IDE , click on the drop down in the Target bar (on right end of Target bar), you will find all the locators including xPath (css as well).
Related
We are using Eclipse, Java and Selenium. Most of our sites can be accessed with Chrome. With Chrome you can right-click something and select "inspect". it will show the html and you can type an xpath into the search box (after ctrl-f) and it will highlight the elements.
With IE you can inspect and it will show the html (sometimes you need to refresh). But you can't search for xpaths, etc.
I can write the html to a file, strip out everything with in it, and use Chrome on it but that is limited in what it does.
Wondering how others debug with IE?
You can also search for the elements in IE 11. You can't use xpath but you can enter the css selector in the search bar on the top of right in DOM Explorer Tab, then it will auto focus on the element you want:
I am trying to find a way to use FireBug for FF. Unfortunately it's not supported for selenium v3.6. What can be done if I have to locate the elements, will "Inspect" element will be sufficient?
If I get down to less version of selenium, will that help?
If you visit the GitHub Page of FirePath, it clearly mentions that :
FirePath is a Firebug extension that adds a development tool to edit, inspect and generate XPath expressions and CSS3 Selectors
Now if you visit the Home Page of FireBug, it clearly mentions that :
The Firebug extension isn't being developed or maintained any longer. We invite you to use the Firefox DevTools instead, which ship with Firebug next.
So the direction is clear that, we have to use Development Tools which comes integrated with the Mozilla Firefox 56.x + release onwards.
Example Usage :
Now, let us assume we have to identify the xpath or cssSelector of the Search Box on Google Home Page https://www.google.com/.
Open Mozilla Firefox or Google Chrome browser and browse to the url https://www.google.co.in
Press F12 or Ctrl+Shift+I to open the Developer Tools
Within the Developer Tools console, with in the Elements tab, once you click on the Inspector and mouse hover the Search Box and the WebElement pertaining to the Search Box gets highlighted within the DOM Tree.
Within the HTML DOM you can right click and on mouse hover over Copy item you can clck on either of the following sub menu item:
Copy selector: To copy the CssSelector (absolute)
Copy XPath: To copy the XPath (absolute)
Snapshot:
Additional Steps
Referring the copied CssSelector or XPath you can also construct a logical unique XPath or a CssSelector.
Testing your own XPath
To test your own written XPath, within the Developer Tools console, click on the Console tab and within the editor paste the logical unique xpath you have constructed in the following format and hit Enter or Return:
$x("//*[#name='q']")
Example:
Testing your own CssSelector
To test your own written CssSelector, within the Developer Tools console, click on the Console tab and within the editor paste the logical unique cssSelector you have constructed in the following format and hit Enter or Return:
$$("[name='q']")
Example:
Inspect element is sufficient if you only want to inspect element.
I found Firepath helpful with testing the locators. Downgrading to Firefox 30 – 54 should be enough. It has nothing to do with Selenium version.
Also you can look at Chropath for Chrome
Try this step in your case and check.
Open A Blank Tab in Firefox
Type about:config in address bar then press enter (click on I accept the risk!)
Find browser.tabs.remote.autostart
Select the option then click the mouse right side
Turn The Option As False
Close the browser for restart browser
Open browser again, inspect the element. I hope It Works Properly.
ChroPath extension for xpath and best replacement for FirePath. It has no dependency on other extension like firepath was dependent on firebug. Just add ChroPath to Chrome browser and use it.
Download link- ChroPath
Features-
gives unique xpath and css selectors
It opens as sidebar tab in devtools panel where you can access DOM, inspect element in left side and write the XPath/CSS in right side.
verify xpath and css selectors
gives the list of matched node
highlight the web element on hover
scroll the hidden element in view area on hover.
ChroPath is the only extension which gives unique CSS selectors for selected or inspected element.
I want to use XPath expressions in Selenium code, but I don't know how to get it from a site's HTML code.
I'm using the Google Chrome web browser.
The easiest way is to inspect the element you want to get the XPath expression for. Then click on the highlighted code and Copy → Copy XPath which give you a full XPath patch you can copy to your code.
For Firefox, you should install Firebug or another extension like this.
As neliCZka suggests, you could also try to build a relative path if its possible by trying to find the proper XPath in the search bar in Chrome after inspecting the element.
I see that someone has downvoted the suggestions to use the Copy XPath option from different inspection tools. That's probably because these paths can often be difficult to maintain as the application changes, won't work in Selenium because they're not sufficiently unique, or can just be unreasonably complex for complex HTML.
Copy XPath... is useful as a starting point though. If you're not familiar with XPath, this tool can help you to get a better feel for how to apply it to your HTML content, but it's very important to learn how to use XPath yourself.
Right click on the element you want to have an XPath expression for, and then click Inspect Element. A new frame will open with the HTML source code.
Now right-click on the code and select "Copy XPath".
Note: you will have to remove " WITH ' after copying it into your code
Install Firebug for Firefox. ...
Open the website that you want to inspect. ...
Click the Firebug button. ...
Click the element inspector button. ...
Click the web page element that you want to inspect. ...
Right-click the highlighted code in the Firebug panel. ...
Select "Copy XPath" from the menu.
You can press F12 to get the check page, select your hoped HTML code, and hit the mouse 2. It has the copy option, and there is a copy XPath.
I am new to selenium. Is there anyway i could test if an element, for example an edit buttons is present in a page. There are multiple edit button and they all have different Xpath positions. Will it work if i use verifytext and give the value as "Edit"?
I am using the Selenium IDE extension for testing webpages in FireFox and I was able to find out how to perform almost every command that I need to automate testing for my webpage.
Unfortunately I was not able to find out how to do this through the list of commands that you can manually enter into the queue of Selenium IDE.
I was wondering if anyone knew how to do this in the Firefox extension. Thanks!
You can use dragAndDropToObject command which locates the target element and drags it to the centre of the destination element.
dragAndDropToObject
target: locator of the element to drag
value: locator of the destination element
There is also a dragAndDrop command which drags the element by specified amount of pixels and drop it.
For one thing, you might want to use Selenium Builder instead of Selenium IDE. Also, there are some things that Builder or IDE cannot record, such as iFrame interactions, certain AJAX actions, and also drag and drops. For those, you need to code them by hand afterwards and get them working.