cypress 自定义查找命令

Question

我有一个自定义命令，可以为我获取具有该data-cy属性的元素。

Cypress.Commands.add("getById", (id) => {
    cy.get(`[data-cy=${id}]`)
})

一切正常。

现在如果我有同样的 find 就好了。它看起来像这样：

Cypress.Commands.add("findById", { prevSubject: true }, (subject, id) => {
    cy.wrap(subject).find(`[data-cy=${id}]`)
})

问题是 cypress 使用此代码引发错误：

cy.root().then((root) => {
    if(root.findById("...").length) {
     ...
   }
})

错误是"root.findById" is not a function。

你能帮我正确编写那个自定义命令吗？

Answer 1

基本问题是subject传递给命令的内容已经被包装，因此只需find()从中链接即可。您还需要返回结果才能在测试中使用它。

自定义命令

Cypress.Commands.add("findById", { prevSubject: true }, (subject, id) => {
  return subject.find(`[data-cy=${id}]`)
})

下一个问题是您不能将“普通”js 代码与 Cypress 命令混合使用，因此必须从.then().

规格

describe('...', () => {
  it('...', () => {
    cy.visit('app/find-by-id.html')
    cy.root().findById('2').then(el => {
       console.log('found', el, el.length)
       expect(el.length).to.eq(2)
    })
  })
})

用于测试测试的html（app/find-by-id.html）

<div>
  <div data-cy="1"></div>
  <div data-cy="2"></div>
  <div data-cy="2"></div>
  <div data-cy="3"></div>
</div>