赛普拉斯：子命令主题似乎不是一个元素

Question

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

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

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

据我所知，这确实是某种反模式，a cypress command 应该是要走的路。

所以，reading about 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

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

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

我认为这不是很清楚，可能会有更多人遇到这个问题，所以我把我的解决方案放在这里。

Answer 2

尝试使用

cy.wrap(subject)

对我来说，这就是诀窍。