This tutorial explains how to perform navigation in the browser using Selenium Python. It will help you learn the basic interaction with the web page and its elements such as input text, buttons, and drop-downs.
Understanding Browser Navigation
After successfully opening a website, what do we wish to do next? We usually navigate to other pages. Mostly, the home page contains navigation links which we click and move to another web page. Alternatively, we can use site search and find the pages of our interest.
Let’s now see what different navigation methods Selenium Python provides and how to use them.
Navigation Method
The WebDriver provides a “get()” method to open a web page.
driver.get("http://www.google.com")WebDriver returns the control to the test script once the page is fully loaded. However, if the web page uses a lot of AJAX, the WebDriver may not be able to determine, when it has loaded completely. For such pages, we can use WebDriver <waits> to ensure the web page gets loaded completely.
While filling out a web form, we may have to work with the following HTML elements.
Interacting with textarea and text field
While navigating a page, we may also be interested in performing different actions. There are various HTML elements present on a web page. We can do a variety of operations on them.
WebDriver requires finding that element first before it can perform any action on it. For example, suppose the first element to search is a text field.
<input type="text" name="user" id="user_name" />
We can find it using either of the following methods:
element = driver.find_element_by_id("user_name")
element = driver.find_element_by_name("user")
element = driver.find_element_by_xpath("//input[@id='user_name']")If the given XPath leads to a list of items, the above command will return the first match.
While, if the element is a link, we can search it using the link text. We ensure that the search string is the same as the link text. However, if the search fails, then Webdriver will throw NoSuchElementException.
After finding the element, we can enter some text in the text field as:
element.send_keys("message")Moving up and down using arrow keys in a multi-line text box can be achieved through the “Keys” class as:
element.send_keys(" and some", Keys.ARROW_DOWN)We can use send_keys on any element in a similar manner. Consider the following facts about this method:
It simulates keystrokes on the elements and tests keyboard shortcuts such as those present in Gmail.
Whatever message we send via ‘send_keys’ gets appended to what’s already there. It does not automatically clear the text that is already present there. WebDriver provides a <clear> method that helps to clear the contents of a text field or textarea as:
element.clear()
Interacting with drop-down
So far, we’ve seen how to enter text into a text area. Let’s now assume you navigate to a web page that has a drop-down.
The <select> tag is an HTML element that creates a drop-down list on the web page. This tag also encapsulates a <option> tag to set up the items in the list.
Refer to the following sample HTML code for drop-down. You can copy and save it to an HTML file and then navigate to it.
<form action="/submit.php"> <select name="Python numbers"> <option value="int">Integer</option> <option value="float">Float</option> <option value="long">Long</option> <option value="complex">Complex</option> </select> <br><br> <input type="submit"> </form>
Select Dropdown Options
With Selenium Python, there are two ways to interact with the drop-down list.
Using Find Element API
In the first case, we locate the drop-down element. It can be done by using:
- “find_element_by_xpath”, or
- “find_element_by_id” functions
Next, we can retrieve the list of options in the drop-down using “find_elements_by_tag_name.” After that, we can iterate through different options present in the list.
Let’s take a look at the code snippet for these actions.
element = driver.find_element_by_xpath("//select[@name='Python numbers']")
all_options = element.find_elements_by_tag_name("option")
for option in all_options:
print("Value is: %s" % option.get_attribute("value"))
option.click()The above code will print the values under each option. <option.click()> method allows selecting a particular option.
Using Select API
The other way is the recommended one. Selenium Python API provides the Select class, which contains useful methods for handling these <select> web elements. We’ll discuss each one by one.
Using the Index of Drop-down
If the drop-down has an “index” attribute, then we can use that index to select a particular option. Selenium Webdriver provides the “select_by_index( index )” method to select an option using the index attribute.
It throws “NoSuchElementException,” If there is no option with the specified index. For example,
element = Select(driver.find_element_by_id('id_of_element'))
element.select_by_index(2)Using the Value of Drop-down
Usually, the option tag in HTML comes with the value attribute. In that case, we use the “select_by_value(value )” method to select an item from the drop-down matching to the value.
Suppose the HTML for the drop-down is like this
<option value="int">Integer</option>
then the following code helps to select by value
element = Select(driver.find_element_by_id('id_of_element'))
element.select_by_value('int')Using Text of Dropdown
It can be done by using the “select_by_visible_text(text)” method. It will select the item from the drop-down, that matches with the text given in the method.
For example,
element = Select(driver.find_element_by_id('id_of_element'))
element.select_by_visible_text('element_text')So far we have discussed various methods to select an item from the drop-down. There may be situations when we have to remove the selections. In the coming section, we will cover commands for the same.
De-Select Options From Dropdown
deselect_all( )
This method enables us to clear all the selected options. It is useful when we have selected multiple items from the drop-down. If we use this method in case of a single selection, it will throw a NotImplementedError exception.
deselect_by_index( )
This API clears the selected option using the “index” attribute. It is the inverse of the select_by_index( ) method.
deselect_by_value( )
This API clears the selected option using the value of the option. It is the inverse of the select_by_value( ) method.
deselect_by_visible_text( )
This API clears the selected option using the text of the option. It is the inverse of the select_by_visible_text( ) method.
The Select class returns a reference to the drop-down element which contains a list of items. To traverse through all the objects in the list, Select provides the “options” property.
Let’s now see a sample code that will show, how all this works in reality.
from selenium import webdriver
from selenium.webdriver.support.select import Select
import time
driver = webdriver.Firefox()
driver.maximize_window()
driver.get('http://www.toolsqa.com/automation-practice-form/')
s1 = Select(driver.find_element_by_id('continents'))
s1.select_by_visible_text('Europe')
for opt in s1.options:
print(opt.text)
s1.select_by_visible_text(opt.text)
time.sleep(10)The above snippet moves the control to the “Continents” drop-down on the web page. After that, it selects all the items available in the drop-down, one by one.
Want to test your Selenium knowledge with Python? Attempt our Selenium Python Quiz.
Summary: Navigation using Selenium Python
Navigation is an important concept as it lets you flow through the different sections of a website. You’ve now moved up another step in learning Selenium with Python.
For more updates on Selenium Python tutorials, follow our social media accounts to get free access to all our future updates.
Lastly, our site needs your support to remain free. Share this post on social media (Linkedin/Twitter) if you gained some knowledge from this tutorial.
Enjoy coding,
TechBeamers.
