Cypress 能否测试控件是否为 Pristine？

Question

我正在开发 Angular 4 应用程序，我们正在使用 Cypress 进行 front-end/integration 测试。在我们的一个表单上，我们有一个取消按钮，它清除子表单上的所有输入并重置表单。我想知道赛普拉斯是否有任何方法可以检查表单或控件是否是原始的，或者我是否需要检查输入的内容是否已全部清除？（我知道如何做后者，但宁愿能够使用 Pristine 进行检查，而不是需要遍历所有控件）。

这是我目前正在做的事情：

cy.get('[data-test=cancelButton]').click();
cy.get('[data-test=referenceField').should('be.empty');
cy.get('[data-test=referenceField').should('have.attr', 'placeholder', 'Numbered list number');

我只想做类似的事情

cy.get('[data-test=cancelButton]').click();
cy.get('[data-test=referenceField').should('be.pristine');

Answer 1

Cypress 允许您创建 custom child commands。这是基本语法：

Cypress.Commands.add('shouldBePristine', {
    prevSubject: true // this allows it to be chained off another command
}, (subject /*, arg1, arg2, ...*/) => {
    // subject is whatever is wrapped by the Cypress object that
    // .shouldBePristine() is called on

    // In your case, you would do something like this:
    expect(subject).to.be.empty;
    expect(subject).to.have.attr('placeholder', 'Numbered list number');

    // This command does not need to change the subject for the next function
    // in the chain, so we will just return what was passed in
    return subject;
});

然后你会像这样调用你的命令：

cy.get('[data-test=referenceField]').shouldBePristine();

您也可以 write a custom chai helper，但该过程看起来要复杂得多。

Cypress 能否测试控件是否为 Pristine？

Can Cypress test if a control is Pristine?

typescript

angular

cypress