Cypress Custom найти команду

Question

У меня есть собственная команда, которая возвращает мне мои элементы с атрибутом data-cy.

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

все работает нормально.

Теперь было бы хорошо, если бы у меня было то же самое снаходить.Это выглядело бы так:

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().

Spec

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>