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>

Answer 2

添加到 @Richard Matsen's answer，您可能希望在命令中添加一些日志，以便它在您的 cypress 日志中显示良好，就像您直接使用 .find(...) 一样：

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;
  }
);

赛普拉斯定制查找命令

2 个答案: