我的网站上有一个导航栏,当我将鼠标悬停在导航栏上时,它会显示菜单列表。现在我遇到一个问题,我无法单击其第四个选项。我在下面给你举个例子。 如果我们运行下面的代码,它将显示其管理菜单中可用的菜单列表。
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 UL
在 LI
主页、管理、关于我们中有 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/