You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Cypress中链接的选择器是什么?如何在无唯一CSS/ID的情况下定位并点击日历按钮?

嘿,我来帮你搞定这两个Cypress选择器的问题!

在Cypress中选择链接的常用方式

Cypress里定位链接(<a>标签)有很多灵活的方式,常见的几种包括:

  • href属性定位:这是最精准的方式,适合链接路径唯一的情况,比如 cy.get('a[href="/path/to/page"]')
  • 链接文本定位:用contains()方法匹配文本内容,比如 cy.contains('a', '点击这里')
  • 结合父元素/子元素特征定位:如果链接本身没有唯一标识,可以通过它的父容器、内部图标或文本节点来组合定位
针对你的日历按钮的具体点击方案

先看一下你提供的HTML代码:

虽然这个元素没有唯一的ID或专属类,但我们可以利用现有特征组合出可靠的选择器,给你几种可行的方案:

方案1:精准匹配href属性

这是最推荐的方式,只要这个日历链接的href路径是唯一的,就不会误选其他元素:

cy.get('a[href="/Public/app/#/calendar"]').click()

如果后续href里的哈希部分有变动,也可以用部分匹配(比如只匹配包含"calendar"的href):

cy.get('a[href*="calendar"]').click()

方案2:通过链接文本定位

你的链接文本是Calendar(前后有空格),可以直接用contains()匹配,它会自动忽略前后空格:

cy.contains('a', 'Calendar').click()

如果需要更严格的精准匹配(避免匹配到包含"Calendar"的其他文本),可以用正则:

cy.contains('a', /^\s*Calendar\s*$/).click()

方案3:结合图标特征定位

这个链接里有一个图标,内容是date_range,我们可以利用这个独特的图标内容来定位:

cy.get('a:has(i.material-icons:contains("date_range"))').click()

如果页面上有多个带date_range图标的链接,再加上父元素的类缩小范围:

cy.get('.menu-level-1 a:has(i.material-icons:contains("date_range"))').click()

方案4:链式定位

先找到父级的<li>,再定位里面的链接,适合需要明确上下文的场景:

cy.get('.menu-level-1').find('a').click()

如果页面上有多个.menu-level-1的菜单项,记得结合其他特征(比如图标)来确保精准:

cy.get('.menu-level-1').find('a:has(i.site-menu-icon)').click()

内容的提问来源于stack exchange,提问作者Alexandru Cristian

火山引擎 最新活动