DEV Community

Cover image for Selenium moving further
cuongld2
cuongld2

Posted on

Selenium moving further

I. Work with web elements by JavaScript in Selenium
    1.Find element by JavaScript
    2.Work with Shadow DOM
    3.Interact with elements by javascript
II. Handle basic web elements (drop-down list, radio-button)
III. Switch between windows
IV. Combine Selenium with image recognition tools (PyAutoGUI)

I. Work with web elements by JavaScript in Selenium

For more details, you can refer to this javascript-selenium-webdriver

In general there are two ways to call javascript execute from selenium:

Execute script :

element = driver.execute_script(script_string, *args)
element = driver.execute_async_script(script_string,*args)

Notes: If you want to get element value, your script should have 'return' like : 'return arguments[0].shadowRoot'

1.Find element by JavaScript

- Get element by ID:

document.getElementByID('command_line')

Alt Text

- Get elements by class name (return list of elements)

document.getElementsByClassName()

- Get elements by tag name (return list of elements)

document.getElementsByTagName

- Get element by querySelector

document.querySelector

Alt Text

- Get elements by querySelectorAll

document.querySelectorAll('td[class="label"]')

Alt Text

2.Work with Shadow DOM

For more details about Shadow DOM, you can refer to this shadow dowm

In short, they use Shadow DOM to avoid conflicts by different css, interface style

→ For dealing with these when write automation scripts, we need to extract each dom from the outside to the inside

Example:

Alt Text

document.querySelector('settings-ui').shadowRoot.querySelector('settings-main').shadowRoot.querySelector('settings-basic-page').shadowRoot.querySelector('settings-people-page').shadowRoot.querySelector('#importDataDialogTrigger')

3.Interact with elements by javascript

Sometimes, you cannot interact with the web element directly (like if you click, it will not recognize by direct selenium API)

In those cases, you might want to try with javascript click function:

For example:

Alt Text

document.querySelector('settings-ui').shadowRoot.querySelector('settings-main').shadowRoot.querySelector('settings-basic-page').shadowRoot.querySelector('settings-people-page').shadowRoot.querySelector('#importDataDialogTrigger').click()

Or you might want to get attribute from element:

Alt Text

document.querySelector('settings-ui').shadowRoot.querySelector('settings-main').shadowRoot.querySelector('settings-basic-page').shadowRoot.querySelector('settings-people-page').shadowRoot.querySelector('#importDataDialogTrigger').getAttribute('id')
II. Handle basic web elements (drop-down list, radio-button)

1.Drop-down list:
def choose_date_birthday(self, driver, index):
select_date = Select(self.start_page_elems.find_birthday_date_drop_down_elem(driver))
return select_date.select_by_index(index)

2.Radio button:
def choose_female_sex(self, driver):
self.start_page_elems.find_female_sex_radio_button(driver).click()
III. Switch between windows

Sometimes, you need to handle multiple windows in order to execute the tests.

Selenium provide you the methods to do such things (even with iframe, or active element..)

Below is example for handling between windows for savior mobile popup.
def handle_store_button(self, browser, text_assert):
list_windows = browser.window_handles
if len(list_windows) == 2:
browser.switch_to.window(list_windows[1])
elif len(list_windows) == 3:
browser.switch_to.window(list_windows[2])
assert text_assert in browser.current_url
browser.close()
browser.switch_to.window(list_windows[0])
IV. Combine Selenium with image recognition tools (PyAutoGUI)

There are elements that selenium cannot click, in that case we need image recognition tools to deal with.

I will go through simple example with PyAutoGUI:
def test_facebook_icon(self, set_up_browser):
time.sleep(3)
coords = pyautogui.locateOnScreen('facebook_icon.PNG')
pyautogui.click(coords)

Top comments (1)

Collapse
 
msnpixel profile image
msn-pixel • Edited

Do you know if Safari Webdriver supports Shadow DOM elements for selenium? I successfully implemented Shadow DOM elements for selenium in chrome, but no luck with Safari webdriver.