If you want to use XPath to locate elements with the Selenium IDE you have basically three options to figure out the XPath definition you have to use for your test.
- Use the built in record function of the Selenium IDE with XPath Locator Builders.
- Use a plugin to figure out the XPath of a specific element and use the result in the Selenium IDE.
- Analyse the HTML-structure and figure out the XPath yourself.
I will provide examples for the first two options since the third option is not really practical to work with.
Use the built in record function of the Selenium IDE with XPath Locator Builders
- Open Firefox and the Selenium IDE.
- Go to “Options”>”Options…” and switch to the tab “Locator Builders”.
- Here move via drag and drop the two entries “xpath:attributes” and “xpath:idRelative” to the top of the list as you see in the screenshot.
- Click “OK”.
- Now click on the red record button on the right side of the Selenium IDE to start recording.
- Switch to the main Firefox browser window and navigate to https://en.wikipedia.org
- Type into the search field: “Selenium” and hit enter or click on the search button.
- Now switch back again to the Selenium IDE window and click the red button to stop recording.
- Your recorded test should look something like you see the sample in the screenshot. As you can see the recorder used to locate the search box and the search button relative XPaths.
- If you hit the button to play the current test cases, the test should pass by using all the XPaths to locate the elements.
Use a plugin to figure out the XPath of a specific element and use the result in the Selenium IDE
- First you need to install some kind of XPath plugin in the browser of your choice that can help you to find out XPaths of elements on any site you are currently surfing on. For this example we are using the XPath Helper with Google Chrome.
- After you installed XPath Helper in Chrome you should see the Icon with your other active plugins.
- In Chrome navigate to https://en.wikipedia.org
- Click on the icon of XPath helper to launch it.
- Hold the shift button while you hover with the mouse pointer over the search input field.
- Now you should see the full XPath of the search input field in the black box of the XPath helper.
- Starting at the end of the XPath select as much of it as you think is necessary to have a unique XPath to the desired element. It is important that your selected fraction of the XPath always starts with a slash (“/”). Since the site probably only has one “searchInput” we only select the small portion:”/input
[@id=’searchInput’]”
- Copy it.
- Switch to the Selenium IDE window and start a new test case.
- In the Base URL field put “https://en.wikipedia.org/” and as first command use: “open” with the target: “/”
- As second command use “sendKeys” and paste in the target-field your copied XPath fraction. At the beginning of the XPath fraction you need to add a second slash (“/”). So the full input for the target field should be: “//input[@id=’searchInput’]”
- As third command use “clickAt”. For the target field you need to find out the XPath of the search submit button for the search input field. To do this switch back to your Chrome browser and use the XPath helper again in the same way as you did before for the search input field. Your target field should contain at the end: “//input[@id=’searchButton’]”
- Now your test case is ready to run and should send you to the Wikpedia article of Selenium.
Note: The double slash at the beginning of the XPath means you are using relative XPaths. It will also work if you use longer fractions of the XPath than we chose in our example. Longer fractions will also be unique but the longer the fraction is the more likely it is to be subject to any changes on the site an break your test suits.
Nice post. Sometimes it’s very useful to create a complex script using IDE and then export it in webdriver format. It saves a lot of time.