Cypress：子命令主题似乎不是一个元素

Question

我有一个fillInput()将选择器和值作为参数的函数，然后：

• 清除输入通过 cy.get(selector).clear()

• 然后通过填充输入值 cy.get(selector).type(value)

据我所知，这确实是某种反模式，应该使用cypress 命令。

因此，在阅读 child commands 时，我提出了这个命令，它应该与我的fillInput()实用程序功能相同：

Cypress.Commands.add('fillInput', {prevSubject: 'element'}, (subject, value) => {
  subject.clear();
  subject.type(value);
});

但是，当我通过以下方式在规范中尝试此操作时：

cy.get('#my-selector').fillInput('my-value');

我在 cypress 浏览器控制台中收到此错误：

TypeError: subject.clear is not a function

在文档中，cy.get()据说会产生一个 DOM 元素，并且{prevSubject: 'element'}应该subject是相同的类型（据我所知）。

但是，subject似乎是一种不同的类型和方法，适用于type()或 ' clear()等元素or ' should()不适用于子命令主题。

如何让subject我的孩子命令充当 Dom 元素？

Answer 1

尝试使用

cy.wrap(subject)

对我来说这就是窍门。

Answer 2

在调查发布问题时，我想出了一个简单的解决方案来解决这个问题。这subject是一个具有 的对象selector，因此您可以使用该选择器cy.get(subject.selector)来获取 Dom 元素：

Cypress.Commands.add('fillInput', {prevSubject: 'element'}, (subject, value) => {
  cy.get(subject.selector).clear().type(value);
});

我认为这不是很清楚，可能会有更多人遇到此问题，因此我将解决方案留在这里。