cypress custom find command

5
votes

I have a custom command that gets me my elements with the data-cy attribute.

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

everything's working fine.

Now it would be nice if I had the same with find. It would be looking like this:

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

The problem there is that cypress throws an error with this code:

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

The error is "root.findById" is not a function.

Can you help me write that custom command correctly?

2
testingcypress

2 Answers

3
votes

The basic problem is that subject passed in to the command is already wrapped, so just chain the find() from it. Also you need to return the result to use it in the test.

Custom command

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

The next problem is you can't mix 'ordinary' js code with Cypress commands, so the returned value must be accessed from a .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 used to test the test (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>
0
votes

Adding to @Richard Matsen's answer, you might want to add some log into your command, so that it appears well in your cypress log, just as if you had used .find(...) directly:

Cypress.Commands.add(
  "findByTestId",
  {
    prevSubject: ["element"],
  },
  (
    subject: Cypress.Chainable<HTMLElement>,
    testId: string,
    options?: Partial<
      Cypress.Loggable &
        Cypress.Timeoutable &
        Cypress.Withinable &
        Cypress.Shadow
    >
  ) => {
    const $el = subject.find(`[data-testid=${testId}]`, options);
    Cypress.log({
      $el: $el as any,
      name: "findByTestId",
      message: testId,
    });
    return $el;
  }
);