Cypress 自动化 Javascript 的理想选择器

Question

我有这个 HTML 代码

<li class="menu-level-1">

    <a href="/Public/app/#/calendar">
        <i class="site-menu-icon material-icons">date_range</i>
        <span>
            Calendar
        </span>

    </a>
</li>

我不知道我需要在 CYPRESS 中选择什么才能自动按下日历按钮。我没有独特的 css 或 id 类，因此我无法将其与其余菜单项隔离。我只有这段代码中看到的内容。

Answer 1

我认为您想要单击元素

<a href="/Public/app/#/calendar">

，因为它具有

href

。

有很多方法可以定位它，使用哪种方法取决于页面上的独特之处

cy.contains('a', 'Calendar').click()  // if the word Calendar only appears on this link

cy.get('a[href="/Public/app/#/calendar"]').click()  // specifies by the link itself

cy,get('i.site-menu-icon').parent().click()  // if the icon is the unique thing

Answer 2

您可以使用自定义xpath，例如

//*[text()="Calendar"]

如果您在网页上发现了许多其他内容，您可以提供一个索引，例如

//*[text()="Calendar"][1]

确保此处索引始终以 1 开头，而不是 0。

Answer 3

cy.get('li').within(() => {
cy.get('a[href="/Public/app/#/calendar"]').find('.site-menu-icon.material-icons').contains('Calendar').click()
})