javascript - Cypress:子命令主题似乎不是一个元素

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()或'should()<等元素 不适用于子命令主题。

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

Answer 1

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

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

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