DEV Community

cuongld2
cuongld2

Posted on

How to handle click intercepted error in Selenium

Dear guys, as a QA automation engineer, I have to deal with a lot of UI tests using Selenium.

One thing annoy me is that sometimes, when trying to click or get attribute from element, I usually get selenium exception error.

Before today, I already knew that I can use excute script in Selenium to perform using Javascript query. But it's not enough. Sometimes I still can't click on the targeted button.

So the 1 tip I got from today is using Chrome Developer tool.
I wil show you the example below.
This page has a lot of shadow DOM element so we have to use javascript to interact with them.

First go to the coccoc://settings/languages site (you can change to chrome://settings if you want)

Alt Text

We will deal with the spell checker button, try to click on that.

Alt Text

Next right click on the element choose copy - JS path:

Alt Text

Now you can click on that check box using element.click in javascript

Alt Text

The result will be : check box is clicked.

Alt Text

To perform it in Python it will be like :

// BasePage Element for define how to deal with shadow root element

class BasePageElement(object):

    @staticmethod
    def select_shadow_element_by_css_selector(browser, selector):
        element = browser.execute_script('return arguments[0].shadowRoot', selector)
        return element

    def find_shadow_element(self, driver, *string_text):
        wait = WebDriverWait(driver, 20)
        i = 0
        root = wait.until(ec.presence_of_element_located((By.TAG_NAME, string_text[i])))
        # root = driver.find_element_by_tag_name(string_text[i])
        while len(string_text) > (i+1):
            i = i+1
            shadow_root = self.select_shadow_element_by_css_selector(driver, root)
            root = shadow_root.find_element_by_css_selector(string_text[i])
        return root

// Find element using shadow root

class CocCocSettingsElements(BasePageElement):

    def find_settings_toggle_button(self, driver):
        return self.find_shadow_element(driver, 'body > settings-ui', '#main', 'settings-basic-page',
                                 '#basicPage > settings-section:nth-child(6) > settings-languages-page',
                                        '#pages > div > settings-checkbox-toggle',
                                        '#checkbox')


// Click on the element in page object class

class SettingsPageObject:
    coccoc_settings_elements = CocCocSettingsElements()

    def choose_spell_checker(self, driver):
        element_outside = self.coccoc_settings_elements.find_settings_toggle_button(driver)
        driver.execute_script("arguments[0].click()", element_outside)

// Implement the test

class TestSettingsCocCoc:

    settings_page_object = SettingsPageObject()

    def test_login_testrail_success(self):
        driver = webdriver.Chrome()
        driver.maximize_window()
        try:
            driver.get(CocCocSettingsUrls.SETTINGS_LANGUAGES)
            time.sleep(2)
            self.settings_page_object.choose_spell_checker(driver)
        finally:
            driver.quit()
Enter fullscreen mode Exit fullscreen mode

Ta da!!!

For any questions or you want to get the example code, feel free to comment below.

Top comments (2)

Collapse
 
famduong profile image
PhamDuong

awesome, it's never been easiear :D

Collapse
 
cuongld2 profile image
cuongld2

Thank you!
Glad that could help you :-*