DEV Community


How to handle click intercepted error in Selenium

cuongld2 profile image cuongld2 ・2 min read

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 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):

    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',

// 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()

Ta da!!!

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


Editor guide
famduong profile image

awesome, it's never been easiear :D

cuongld2 profile image
cuongld2 Author

Thank you!
Glad that could help you :-*