Techniques to handle Child Windows/Tabs
Selenium handles opening of new tabs and windows with a similar approach. If a browser is opening in a new web page, Selenium does not differentiate if it opened in a new tab or a child window.
Once a new tab or a child window is opened the driver object does not have the knowledge of the new tab or child window. It will only have access on the window which it has launched at the start of the execution. So we have to switch the driver focus from the parent window to the child window/tab.
For demonstration of child windows/tabs examples we shall be using the application with the link:
https://the-internet.herokuapp.com/windows
On clicking on the Click Here link, the New Window opens. Let us obtain the text New Window appearing on the child window.
Code Implementation:
from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://the-internet.herokuapp.com/windows")
# identify link with link text and then click
driver.find_element_by_link_text("Click Here").click()
# identify element with tagname and get then obtain text
print(driver.find_element_by_tag_name("h3").text)
Output:
The output shows Opening a new window statement which is a part of the parent window. But our test case aim is to obtain the text New Window appearing in the child window.
To achieve this we have to switch focus of the driver object from the parent window to the child window with the help of the switch_to.window method. The child window id is passed as an argument to the method.
There is a method window_handles which gets all the window ids currently opened by Selenium. In our scenario, there are two opened windows. It returns the list of window ids. The parent window is always stored first followed the child window id since it is the parent window opened by automation initially. So to switch the driver focus to the child window, we have to mention window_handles[1]. The below image illustrates the order in which parent window and child window id are stored in a list.
Code Implementation:
from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://the-internet.herokuapp.com/windows")
# identify link with link text and then click
driver.find_element_by_link_text("Click Here").click()
# get child window id
childwindow = driver.window_handles[1]
# switch to child window
driver.switch_to.window(childwindow)
# identify element in child window with tagname and get then obtain text
print(driver.find_element_by_tag_name("h3").text)
# switch to parent window
driver.switch_to.window(driver.window_handles[0])
# identify element in parent window with tagname and get then obtain text
print(driver.find_element_by_tag_name("h3").text)
Output:
The output shows the New Window statement which is a part of the child window and Opening a new window statement which is a part of the parent window.
Conclusion: Thus we have discussed how to handle child windows/tabs. For more details, you can refer to the link:
https://courses.rahulshettyacademy.com/courses/learn-selenium-automation-in-easy-python-language/lectures/13248329
In the next section we shall discuss how to handle frames.
Frames and techniques to handle them
For demonstration of frames examples we shall be using the application with the link: https://the-internet.herokuapp.com/iframe
Now let us identify the element by spying on it and then analyze its html code.
Selenium shall identify the edit box with the help of css locator by the method find_element_by_css_selector. The css we have created with its id attribute shall be passed as an argument to the method. Then to clear the default text from that field, we shall be using the clear method and finally to input new text we shall use send_keys method.
Code Implementation:
from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://the-internet.herokuapp.com/iframe")
# identify element with css selector and then clear content
driver.find_element_by_css_selector("#tinymce").clear()
# identify text with css selector and then input text
driver.find_element_by_css_selector("#tinymce ").send_keys("Rahul")
Output:
The output shows NoSuchElementException since Selenium is unable to identify the element having css value as #tinymce.
The above code failed since the edit box is inside a frame. A frame can be inserted by the developer on top of the html. The driver object can only access the browser element. So if a frame is injected, it cannot handle elements located within that frame. The iframe, frameset, frame tags determine the presence of frame in the html code.
The html code shows the presence of an iframe tag in the above image which is the parent element of the edit box. To perform actions on elements inside a frame, we have to switch focus of the driver object to the frame with the help of the switch_to.frame method. The frame id or frame name or index value is passed as an argument to the method. Next, to switch back from the frame to the browser, we shall use the method switch_to.default_content and then we can work on any element on the browser.
Code Implementation:
from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://the-internet.herokuapp.com/iframe")
# switch to frame with id or frame name or index
driver.switch_to.frame("mce_0_ifr")
# identify element with css selector and then clear content
driver.find_element_by_css_selector("#tinymce").clear()
# identify with css selector and then input text
driver.find_element_by_css_selector("#tinymce ").send_keys("Rahul")
# switch back to main browser
driver.switch_to.default_content()
# get text with text method outside frame
print(driver.find_element_by_tag_name("h3").text)
Output:
The output shows An iFrame containing the TinyMCE WYSIWYG Editor statement which is a web element outside the frame.
Conclusion: Thus we have discussed how to handle frames. For more details, you can refer to the link:
https://courses.rahulshettyacademy.com/courses/learn-selenium-automation-in-easy-python-language/lectures/13248333
In the next section we shall discuss how to perform advanced interactions with browser elements with Actions class.
Advanced interactions with Browser elements with Actions class
Let us discuss how to perform mouseover action in Selenium using the ActionChains class.
For demonstration of mouse over action we shall be using the Practice Page website with the link: https://rahulshettyacademy.com/AutomationPractice/
On performing mouse over action below the Mouse Hover Example text, a new list of options get displayed.
In Selenium all the mouse related tasks are performed with the help of ActionChains class. The driver object is passed as an argument to the method and then stored in a variable object. Also, to use the methods of the ActionChains class we have to add import from selenium.webdriver import ActionChains in our code.
To perform mouse over action on an element, we shall move our cursor on to the element with the move_to_element method. The web element value is passed as an argument to the method. Finally, we shall use the perform method to actually execute the step.
Please note, we can perform chain of actions on the action object and those will get executed only if the perform method is added at the end.
Code Implementation:
from selenium import webdriver
from selenium.webdriver import ActionChains
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://rahulshettyacademy.com/AutomationPractice/")
# to create object of ActionChains class
action = ActionChains(driver)
# identify element with id to move the cursor to that
menu = driver.find_element_by_id("mousehover")
# move_to_element to move to specific element
action.move_to_element(menu).perform()
Next let us select the Top option after performing mouse over action below the Mouse Hover Example text.
To perform the click on Top option with ActionChains class, we shall first move our cursor on to the element with the move_to_element method. The web element value is passed as an argument to the method. Then add the click method and chain it with the other method. Finally, we shall use the perform method to actually execute the chain of steps.
Code Implementation:
from selenium import webdriver
from selenium.webdriver import ActionChains
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://rahulshettyacademy.com/AutomationPractice/")
# to create object of ActionChains class
action = ActionChains(driver)
# identify element with id to move the cursor to that
menu = driver.find_element_by_id("mousehover")
# move_to_element to move to specific element
action.move_to_element(menu).perform()
# identify element with link text to click on it
childmenu = driver.find_element_by_link_text("Top")
# move_to_element and click methods to move to specific element and click
action.move_to_element(childmenu).click().perform()
Conclusion: Thus we have discussed how to perform advanced interactions with browser elements with Actions class. . For more details, you can refer to the link:
https://courses.rahulshettyacademy.com/courses/learn-selenium-automation-in-easy-python-language/lectures/13248334
In the next section we shall discuss how to perform double click and context click with Actions class.
Double click and Context click with Actions class
Let us see how to perform other mouse actions like double click and context click in Selenium using the ActionChains class. For demonstration of double click, we shall be using the website with the link:
https://chercher.tech/practice/practice-pop-ups-selenium-webdriver
On double clicking the Double Click Me button an alert pop up comes up and we shall validate the alert text.
In Selenium all the mouse related actions like double click are performed with the help of ActionChains class. The driver object is passed as an argument to the method and then stored in a variable object. Also, to use the methods of the ActionChains class we have to add import from selenium.webdriver import ActionChains in our code.
To perform double click on an element, we shall use the double_click method. The web element value is passed as an argument to the method. Finally, we shall use the perform method to actually execute the step.
Please note, we can perform chain of actions on the action object and those will get executed only if the perform method is added at the end.
Code Implementation:
from selenium import webdriver
from selenium.webdriver import ActionChains
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://chercher.tech/practice/practice-pop-ups-selenium-webdriver")
# to create object of ActionChains class
action = ActionChains(driver)
# double_click method to double click element
action.double_click(driver.find_element_by_id("double-click")).perform()
# shift focus to alert
alert = driver.switch_to.alert
# get alert text with alert.text then validate with assertion
assert "You double clicked me!!!, You got to be kidding me" == alert.text
# alert accept
alert.accept()
Output:
The output shows Process finished with exit code 0 statement meaning test execution completed without errors or failure in assertion.
To perform right click on an element, we shall use the context_click method. The web element value is passed as an argument to the method. Finally, we shall use the perform method to actually execute the step.
Code Implementation:
from selenium import webdriver
from selenium.webdriver import ActionChains
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://chercher.tech/practice/practice-pop-ups-selenium-webdriver")
# to create object of ActionChains class
action = ActionChains(driver)
# context_click method to right click element
action.context_click(driver.find_element_by_id("double-click")).perform()
Conclusion:
Thus we have discussed how to double click and context click with Actions class. For more details, you can refer to the link:
https://courses.rahulshettyacademy.com/courses/learn-selenium-automation-in-easy-python-language/lectures/13248385
In the next blog post, we shall discuss some more miscellaneous topics on Selenium Python.