赛普拉斯可以测试控件是否为 Pristine 吗？

Question

我正在开发一个 Angular 4 应用程序，我们正在使用 Cypress 进行前端/集成测试。 在我们的一个表单上，我们有一个取消按钮，它可以清除子表单上的所有输入并重置表单。 我想知道赛普拉斯有什么方法可以检查表单或控件是否原始，还是我需要检查输入的内容是否全部清除？ （我知道如何做后者，但宁愿能够使用 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

赛普拉斯允许您创建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，但这个过程看起来要复杂得多。