在 cypress 中使用机会插件答案

【问题标题】：Use chance plugin in cypress在 cypress 中使用机会插件
【发布时间】：2019-07-08 07:18:12
【问题描述】：

是否可以在 cypress.io 中使用机会插件？

我通过 npm 将插件安装到 node_modules\chance 并编辑了 /plugins/index.js 文件，但仍然从 cypress 收到错误 - 无法启动，插件文件丢失或无效。

如果使用这个插件是不可能的 - 你建议如何编写基于注册新用户的测试？我计划利用机会生成“随机：电子邮件和密码。

// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

module.exports = on => {
  on("task", {
    chance: require("chance"),
  });
};
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
}

【问题讨论】：

目前没有意义，on 期望第二个参数是回调。阅读docs.cypress.io/guides/tooling/plugins-guide.html
那么我应该如何计划有关创建新帐户的测试有什么建议吗？唯一的方法是使用自己的后端副本？
这是一个完全独立的问题，我只是说你不能使用机会 like that 因为这不是你在 Cypress 中使用插件的方式（我也不认为这是一个赛普拉斯插件）。但我也绝对不建议在真实数据库中生成随机用户作为测试策略。

标签： javascript cypress

【解决方案1】：

只需使用 npm 安装 chancejs：

npm install chance

然后在你的测试中使用它，例如：

/// <reference types="cypress" />

import Chance from 'Chance';

const chance = new Chance();

describe('Testing chance', function (){
   const company =chance.company();
   it('type company in duckduckgo.com', function () {
        cy.visit('https://duckduckgo.com/')
        cy.get('#search_form_input_homepage')
        .should('be.visible')
        .type(company)
    })
})

【讨论】：

【解决方案2】：

cypress/support/index.js:

覆盖默认的task 命令，以便您可以像往常一样提供多个参数。

Cypress.Commands.overwrite('task', (origFn, name, ...args) => {
    return origFn(name, args);
});

// if you're gonna use `chance` plugin a lot, you can also add a custom command
Cypress.Commands.add('chance', (...args) => {
    return cy.task('chance', ...args);
});

cypress/plugins/index.js:

将任务包装在将传播参数的函数中，并处理任务不返回任何内容并返回 null 的情况，这样赛普拉斯就不会抱怨。

const chance = require('chance').Chance();
// lodash should be installed alongside with cypress.
// If it doesn't resolve, you'll need to install it manually
const _ = require('lodash');

on('task', _.mapValues(
    {
        chance ( method, ...args ) {
            return chance[method](...args);
        }
    },
    func => args => Promise.resolve( func(...args) )
        // ensure we return null instead of undefined to satisfy cy.task
        .then( val => val === undefined ? null : val )
));

在您的规范文件中：

describe('test', () => {
    it('test', () => {
        cy.document().then( doc => {
            doc.body.innerHTML = `<input class="email">`;
        });

        cy.task('chance', 'email', {domain: 'example.com'}).then( email => {
            cy.get('.email').type(email);
        });

        // or use the custom `chance` command we added
        cy.chance('email', {domain: 'test.com'}).then( email => {
            cy.get('.email').type(email);
        });
    });
});

【讨论】：