javascript - 无法使用 Cypress 自动化工具触发导航菜单的点击

标签 javascript cypress

我的网站上有一个导航栏,当我将鼠标悬停在导航栏上时,它会显示菜单列表。现在我遇到一个问题,我无法单击其第四个选项。我在下面给你举个例子。 如果我们运行下面的代码,它将显示其管理菜单中可用的菜单列表。

    cy.get('#Administrationlink > :nth-child(1)').trigger('mouseover')

但是当我运行此代码时,它不会单击其第四个位置的选项

   cy.get('#Administrationlink div > ul > li:eq(6)').click()

   cy.get('#Administrationlink div > ul > li').eq(6).click()

我也在尝试 .contains 等,但不起作用。总是出现以下错误。

Uncaught SyntaxError: Unexpected token '<'

Home | Adminstration | About Us
--------------------------------
     | Option 1      |
     | Option 2      |
     | Option 3      |
     | Option 4      |

这是导航栏。 其结构为 ul => li -> a 再在这个 li 下 ul=>li->a First Big ULLI 主页、管理、关于我们中有 3 个选项 然后管理部门有LI,然后再次有选项 1、2、3、4 的 UL 和 LI。

有意义吗?

最佳答案

根据您正在测试的内容(悬停行为与导航本身),强制单击(不可见)项目可能会有所帮助,例如 cy.click({force: true}) ,参见https://docs.cypress.io/api/commands/click.html#Force-a-click-regardless-of-its-actionable-state .

为了能够以可靠的方式(而不是列表排序)找到导航项,我通常添加一个唯一的数据属性并通过该属性进行选择,例如cy.get('a[data-testid="nav-option-1"]').click({force: true})

以下是有关此方法的好读物:https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change

关于javascript - 无法使用 Cypress 自动化工具触发导航菜单的点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58939039/

相关文章:

javascript - Bootstrap 崩溃和 ui-router

javascript - 如何在 Firefox 中传递事件和变量?

cypress - 在受 Windows 身份验证保护的 Intranet 应用程序上编写 Cypress 测试

reactjs - 从 CRA+TS 应用程序的源代码导入时,Cypress 测试无法运行

javascript - 如何在 Javascript 中获取 html 页面的标题

javascript - 单击按钮时不会从 firebase 中删除文档(onclick 方法)

node.js - 进行端到端测试时如何正确运行我的应用程序?

timeout - Cypress 访问和等待超时被忽略

javascript - 在 cypress.io 中,如果没有,我如何计算多个元素而不会使测试失败?

javascript - 寻找 JavaScript 创可贴