Cypress - 使用commands.js 将数据测试id 连接在一起失败，但是当将它们连接在一起时不使用命令可以工作

Question

希望有人能理解这一点 我已经创建了用于搜索数据 id 的命令

Cypress.Commands.add('getByDataQAId', (selector, ...args) => {
    return cy.get(`[data-qa-id=${selector}]`, ...args)
})

Cypress.Commands.add('findByDataQAId', (selector, ...args) => {
    return cy.find(`[data-qa-id=${selector}]`, ...args)
})

我现在使用这些来搜索屏幕上的元素，由于屏幕的布局方式以及开发人员如何创建 id，我需要将它们一起使用

cy.getByDataQAId('card-detail').filter(':visible').findByDataQAId('sub-title'),

当调用此 cypress 时，“查找”部分失败，提示“收到的主题是“未定义””

在下面调用此方法时（对我来说是相同的）

cy.get('[data-qa-id="card-detail"]').filter(':visible').find('[data-qa-id="sub-title"]')

这可以正确找到该字段。所以现在我很困惑为什么第一个失败而第二个通过。

感谢您的宝贵时间

Answer 1

我认为它在第二次调用时丢失了对第一个主题的引用，因为你没有包装它。

您可以添加类似以下内容：

Cypress.Commands.add('getByDataQAId', (subject, tag) => {
   return subject
   ? cy.wrap(subject).find(`[data-qa-id='${tag}']`)
   : cy.get(`[data-qa-id='${tag}']`)
})

Answer 2

我认为 Nak 几乎是正确的，但您还需要将自定义命令指定为子命令。

这由选项

{prevSubject:true}

指示。

Cypress.Commands.add('findByDataQAId', {prevSubject:true}, (subject, selector, ...args) => {
  return cy.wrap(subject).find(`[data-qa-id=${selector}]`, ...args)
})

这里有子命令的示例。