regex 如何在cy.get()中对属性值使用正则表达式?

koaltpgm  于 2023-03-31  发布在  其他
关注(0)|答案(4)|浏览(140)

应用程序在表格中列出项目,项目包含[id=item[0].setupCost, id=item[1].setupCost, id=item[2].setupCost]等。
有一个功能,以增加项目也,所以指数不断增加。
我想得到输入字段,而不考虑使用魔术数字。例如(cy.get('[id=item[some_regex].setupCost]')

qyswt5oh

qyswt5oh1#

适用的正则表达式是\[id="item\[\d+\].setupCost\]
将正则表达式括在正斜杠中,而不是引号中。

cy.get(/\[id="item\[\d+\].setupCost\]/)

但不要用它

这个语法是documented-它工作(在Cypress v9.5.0中),但它只返回一个结果。
所以如果你想数你的项目,这将失败

cy.get(/\[id="item\[\d+\].setupCost\]/)
  .its('length')
  .should('eq', 3)   // ❌

部分属性选择器

如果您想使用部分属性选择器,这是最强的,因为它包括.setupCost
查找id以“local-”开头并以“-remote”结尾的元素

cy.get('[id^="item"][id$=".setupCost"]')  // use "starts-with" and "ends-with" selectors

计数测试成功

cy.get('[id^="item"][id$=".setupCost"]')
  .its('length')
  .should('eq', 3)   // ✅
jhdbpxl9

jhdbpxl92#

如果你需要另一个答案:
如果添加jQuery扩展,则可以使用正则表达式。
它之所以有效,是因为Cypress在内部使用jQuery,您可以通过扩展jQuery来修改选择器行为。

it('finds multiple ids by regex', () => {

  const $ = Cypress.$
  $.extend(
    $.expr[':'], {
      idRegex: function(a, i, m) {
        const regex = new RegExp(m[3], 'i');
        return regex.test(a.getAttribute('id'));
      }
    }
  )

  const regex = 'item\\[\\d+\\].setupCost' 

  cy.get(`input:idRegex(${regex})`)
    .its('length')
    .should('eq', 3)   // ✅
})

将jQuery扩展放在/cypress/support/index.js中以全局使用它。
注意,在正则表达式中,我们必须进行双重转义,因为我们传入的是字符串而不是正则表达式。

nnsrf1az

nnsrf1az3#

你可以使用^来代替Regex,这表示文本的开始。所以你可以这样写:

cy.get('[id^="item"]')

现在,如果你想访问任何特定的元素,你可以像这样使用eq

cy.get('[id^="item"]').eq(0) //gets id=item[0].setupCost
cy.get('[id^="item"]').eq(1) //gets id=item[1].setupCost

如果你想在每个元素上循环,你可以使用each()

cy.get('[id^="item"]').each(($ele) => {
  cy.wrap($ele)
})
dffbzjpn

dffbzjpn4#

您可以创建一个自定义的Cypress命令来插入索引。下面,我假设您引用的id是元素的ID,并且是一个标准的CSS选择器

Cypress.Commands.add('getItemById', (index) => {
  return cy.get(`#item\\[${index}\\].setupCost`)
});

cy.getItemById(0)...

相关问题