Selenium自动化GitHub登录遇Element Not Interactable异常解决

问题背景 #

在使用Selenium进行GitHub Web自动化练习时，尝试通过CSS选择器点击首页的Sign in按钮，始终抛出Element Not Interactable异常，但使用Link Text定位可以成功点击。尝试过WebDriverWait等待元素可见/可点击仍超时，目标元素HTML结构及相关代码如下：

目标元素HTML #

<div class="flex-1 flex-rder-2 text-right">
    <a href="/login" class="HeaderMenu-link HeaderMenu-button d-inline-flex d-lg-none
    flex-order-1 f5 no-underline border color-border-default rounded-2 px-2 py-1
    color-fg-inherit js-prevent-focus-on-mobile-nav" data-hydro-click="{\"event_type\":
    \"authentication.click\",\"payload\":{\"location_in_page\":\"site header menu\",\"reposito
    ry_id\":null,\"auth_type\":\"SIGN_UP\",\"originating_url\":\"https://github.com/\",
    \"user_id\":null}}" data-hydro-click-hmac="1ac0bd316eb4ecff0fd1f338bc397cea8b5025ce
    78fffb7ade6ffdd600360286" data-analytics-event="{\"category\":\"Marketing nav\",
    \"action\":\"click to Sign in\",\"label\":\"ref_page:Marketing;ref_cta:Sign in;ref_loc:
    Header\"}"> Sign in </a> 

核心代码片段 #

测试主文件

from selenium import webdriver
from selenium.webdriver.edge.options import Options
import unittest
import page


class GitHubLoginLogoutTest(unittest.TestCase):
    @classmethod
    def setUpClass(cls):
        edge_options = Options()
        edge_options.add_experimental_option("detach", True)
        cls.driver = webdriver.Edge(edge_options)
        cls.driver.get("https://github.com")
    
    def test_login(self):
        home_page = page.HomePage(self.driver)
        home_page.click_sign_in_button()
        # 后续登录逻辑...

    # 其他测试方法...

if __name__ == "__main__":
    unittest.main()

page.py中的HomePage类

class HomePage(BasePage):
    def click_sign_in_button(self):
        self.driver.find_element(*HomePageLocators.SIGN_IN_BUTTON).click()

locator.py中的定位器

class HomePageLocators():
    SIGN_IN_BUTTON = (By.CSS_SELECTOR, "a[href='/login']")

原因分析 #

1. 多元素匹配导致定位到隐藏元素：GitHub首页同时存在桌面端和移动端两个Sign in按钮，a[href='/login']会匹配到两个元素。其中你抓取的HTML元素带有d-lg-none类，该类表示在大屏幕（lg及以上尺寸）下元素会被隐藏，而默认浏览器窗口是桌面视图，因此定位到的是不可见的移动端按钮，自然无法交互。
2. 等待条件未精准匹配可见元素：之前的等待逻辑只是泛泛等待元素可点击，但没有过滤掉隐藏的匹配元素，导致等待的是不可交互的元素，最终超时。

解决方案 #

1. 精准定位可见的Sign in按钮 #

修改CSS选择器，排除隐藏的移动端按钮，只定位桌面端可见的按钮：

# locator.py中更新定位器
class HomePageLocators():
    # 排除带有d-lg-none类的元素，只选可见的桌面端按钮
    SIGN_IN_BUTTON = (By.CSS_SELECTOR, "a[href='/login']:not(.d-lg-none)")

或者直接匹配桌面端按钮的特征类：

SIGN_IN_BUTTON = (By.CSS_SELECTOR, "a[href='/login'].d-none.d-lg-inline-block")

2. 优化点击方法，加入精准等待 #

在HomePage的点击方法中，添加等待逻辑确保元素可见且可点击：

class HomePage(BasePage):
    def click_sign_in_button(self):
        sign_in_btn = WebDriverWait(self.driver, 15).until(
            EC.element_to_be_clickable(HomePageLocators.SIGN_IN_BUTTON)
        )
        sign_in_btn.click()

3. 可选：模拟移动端视图（如果需要测试移动端按钮） #

若要测试移动端的Sign in按钮，先调整浏览器窗口到移动端尺寸，确保元素可见：

@classmethod
def setUpClass(cls):
    edge_options = Options()
    edge_options.add_experimental_option("detach", True)
    cls.driver = webdriver.Edge(edge_options)
    # 设置窗口为移动端尺寸
    cls.driver.set_window_size(375, 667)
    cls.driver.get("https://github.com")

内容的提问来源于stack exchange，提问作者jacob malu