Selenium quasar app 测试元素“点击”问题答案

【问题标题】：Selenium quasar app test element "click" issueSelenium quasar app 测试元素“点击”问题
【发布时间】：2021-08-11 20:37:16
【问题描述】：

我有一个使用 Quasar 制作的应用。我使用 firefox 使用 python selenium 进行 e2e 测试。我登录，然后想注销。要执行此操作，我通常需要单击配置文件图标以显示菜单并选择 Logout。

问题是无论我尝试过什么菜单都不会出现。代码如下所示。

@pytest.mark.nondestructive
def test_must_login_and_logout_properly(logged_in_selenium, wait):
    driver = logged_in_selenium
    avatar = wait.until(EC.presence_of_element_located((By.XPATH, '//header//img[@alt="Profile image"]/ancestor::button/parent::span')))
    # "natively" via selenium
    ActionChains(driver).pause(1).move_to_element(avatar).click().perform()
    # via javascript
    driver.execute_script('document.evaluate(\'//header//img[@alt="Profile image"]/ancestor::button/parent::span\', document).iterateNext().dispatchEvent(new Event("click"))')

在我真正用鼠标单击此元素之前，上面的代码不起作用。通过将time.sleep(10) 放在测试功能的第一行并单击。之后通过avatar.click() 或execute_script(...) 的任何方法都可以正常工作。

我还可以选择使用 PyAutoGUI 在屏幕上查找头像并执行该点击，但我不喜欢这种变体。

-- 更新

我发现了它为什么会这样，但仍然不知道如何解决这个问题。最初（页面加载后）click 事件处理程序未附加到//header//img[@alt="Profile image"]/ancestor::button/parent::span 元素。只有在该区域手动点击后才会出现。

有什么想法吗？

【问题讨论】：

我会质疑 XPath。与您的开发人员讨论哪个元素实际上需要接收点击。
我通过检查事件在控制台中找到了确切的元素。
没关系。我的问题（对开发人员）是：这是正在监视该点击事件的正确元素吗？我想ancestor::button 似乎更合适，而不是parent::span。但是你没有提供 DOM，所以这只是一个猜谜游戏。
@SiKing 我同意。我认为这与应用程序开发人员无关，而是与 Quasar 开发人员有关。由于 Quasar 位于 Vue 之上，因此无论应用程序代码如何，都会生成许多辅助元素。该应用的链接是testnet.mindsync.ai。

标签： selenium pytest quasar

【解决方案1】：

您没有分享指向此页面的链接，所以我只能猜测。
我会尝试：

等待元素可见性，而不仅仅是存在。
尝试从ActionChains 操作中删除click。
在移动到元素和单击它之间添加一个短暂的延迟。仍然不确定，但这可能会起作用

avatar = wait.until(EC.visibility_of_element_located((By.XPATH, '//header//img[@alt="Profile image"]/ancestor::button/parent::span')))

ActionChains(driver).pause(1).move_to_element(avatar).perform()
time.sleep(0.2)
avatar.click()

UPD
试试这个：

wait.until(EC.visibility_of_element_located((By.XPATH, "//div[@class='q-avatar']"))).click()

wait.until(EC.visibility_of_element_located((By.XPATH, "//div[text()='Logout']"))).click()

【讨论】：

感谢您的回复。请参阅问题的更新部分。看起来这个问题与 vue/quasar 的动态特性有关。
必须看到那个网页，很难猜到你没有看到什么
谢谢，这行得通。事实证明，点击两次//header//img[@alt="Profile image"]/ancestor::button/parent::span 即可出现菜单。
我不确定单击两次是更好/正确的方法。我只是完全模仿了用户的流程：点击头像，打开菜单时点击注销元素。
实际上你的代码点击了元素两次。第一个是'//header//img[@alt="Profile image"]/ancestor::button/parent::span'，第二个是div[@class='q-avatar']，它是第一个的孩子。这是因为最初（页面加载后）单击事件处理程序未附加到 //header//img[@alt="Profile image"]/ancestor::button/parent::span 元素。只有在该区域手动点击后才会出现。我想window.click() 将事件处理程序附加到此元素。

【解决方案2】：

最终需要点击元素两次。由于可能是 Quasar 的实现细节。

@pytest.mark.nondestructive
def test_must_login_and_logout_properly(logged_in_selenium, wait):
    driver = logged_in_selenium
    avatar = wait.until(EC.visibility_of_element_located((By.XPATH, '//header//img[@alt="Profile image"]/ancestor::button/parent::span')))
    ActionChains(driver).pause(1).move_to_element(avatar).click().pause(0.5).click().perform()
    wait.until(EC.visibility_of_element_located((By.XPATH, "//div[text()='Logout']"))).click()
    wait.until(EC.visibility_of_element_located((By.XPATH, '//div[text()="You have logged out"]')))

【讨论】：