赛普拉斯自定义查找命令不可链接

Question

我想像这样创建自定义 Cypress find 命令以利用 data-test 属性。

cypress/support/index.ts

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Custom command to get a DOM element by data-test attribute.
       * @example cy.getByTestId('element')
       */
       getByTestId(selector: string): Chainable<JQuery<HTMLElement>>;

      /**
       * Custom command to find a DOM element by data-test attribute.
       * @example cy.findByTestId('element')
       */
      findByTestId(selector: string): Chainable<JQuery<HTMLElement>>;
    }
  }
}

cypress/support/commands.ts

Cypress.Commands.add('getByTestId', (selector, ...args) => {
  return cy.get(`[data-test=${selector}]`, ...args);
});

Cypress.Commands.add(
  'findByTestId',
  { prevSubject: 'element' },
  (subject, selector) => {
    return subject.find(`[data-test=${selector}]`);
  }
);

此处 subject 的类型为 JQuery<HTMLElement> 而不是 Cypress.Chainable<JQuery<HTMLElement>>，因此 subject.find 不能与其他方法链接。

我从 Typescript 得到以下错误。

No overload matches this call.
  Overload 1 of 4, '(name: "findByTestId", options: CommandOptions & { prevSubject: false; }, fn: CommandFn<"findByTestId">): void', gave the following error.
  Overload 2 of 4, '(name: "findByTestId", options: CommandOptions & { prevSubject: true | keyof PrevSubjectMap<unknown> | ["optional"]; }, fn: CommandFnWithSubject<"findByTestId", unknown>): void', gave the following error.
  Overload 3 of 4, '(name: "findByTestId", options: CommandOptions & { prevSubject: "element"[]; }, fn: CommandFnWithSubject<"findByTestId", JQuery<HTMLElement>>): void', gave the following error.ts(2769)
cypress.d.ts(22, 5): The expected type comes from property 'prevSubject' which is declared here on type 'CommandOptions & { prevSubject: false; }'

所需用法

cy.getByTestId('some-element')
  .findByTestId('some-test-id')
  .should('have.text', 'Text');

我该如何解决这个问题？

Answer 1

必须像这样在 JQuery 元素周围添加 cy.wrap 命令。

Cypress.Commands.add(
  'findByTestId',
  { prevSubject: 'element' },
  (subject, selector) => {
    return cy.wrap(subject).find(`[data-test=${selector}]`);
  }
)

Answer 2

我可能跑题了，但是 subject.find(...) 正在使用 jQuery 查找。

也许你想要 cy.wrap(subject).find(...) 应该产生 Cypress.Chainable 包装器。

Answer 3

您的 commands 文件会有这样的命令。请注意，这将记录 cy.wraps 并且您可能希望通过 log: false 来抑制它（如果您愿意）。您还可以添加另一个 agrument 并有一个 if 块供文本使用 data-testid 和 .contains()

Cypress.Commands.add(
  'byTestId',
  { prevSubject: 'optional' },
  (subject, id) => {
    if (subject) {
      return cy.wrap(subject).find(`[data-testid="${id}"]`)
    }
    return cy.get(`[data-testid="${id}"]`)
  },
)

这将是命令的应用程序。

cy.byTestId('first-id')
  // maybe some assertions here for visibility check
  .byTestId('id-inside-first-element')
  // maybe some assertions here for visibility check
  .byTestId('id-within-this-second-element')

赛普拉斯自定义查找命令不可链接

Cypress custom find command is not chainable

javascript

testing

jquery

typescript

cypress