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

Question

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

    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->aFirst Big UL 在 LI 主页、管理、关于我们中有 3 个选项然后管理部门有LI，然后再次有选项 1、2、3、4 的 UL 和 LI。

有意义吗？

Answer 1

根据您正在测试的内容(悬停行为与导航本身)，强制单击(不可见)项目可能会有所帮助，例如 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