如何在Cypress中获取多个别名的值而不引入回调地狱?

时间:2019-03-22 11:32:55

标签: integration-testing cypress

说我想检索两个赛普拉斯别名的值,并在测试用例中使用它。如何不按以下方式嵌套它们?

cy.get('@alias1')
    .then((alias1) => {
        cy.get('@alias2').then((alias2) => {
            someFunctionThatUsesBothAliases(alias1, alias2);
        })
    })

4 个答案:

答案 0 :(得分:1)

您可以这样做:

it('test', () => {
    cy.wrap('foo').as('foo');
    cy.wrap('bar').as('bar');
    cy.wrap('baz').as('baz');

    const values = [];
    cy.get('@foo').then( val => {
        values.push(val);
        return cy.get('@bar');
    }).then( val => {
        values.push(val);
        return cy.get('@baz');
    }).then( val => {
        values.push(val);
        someFunc(...values);
    });
});

或者您可以使用我拼凑的帮助程序(将其放入您的support/index.js中):

const chainStart = Symbol();
cy.all = function ( ...commands ) {
    const _           = Cypress._;
    const chain       = cy.wrap(null, { log: false });
    const stopCommand = _.find( cy.queue.commands, {
        attributes: { chainerId: chain.chainerId }
    });
    const startCommand = _.find( cy.queue.commands, {
        attributes: { chainerId: commands[0].chainerId }
    });
    const p = chain.then(() => {
        return _( commands )
            .map( cmd => {
                return cmd[chainStart]
                    ? cmd[chainStart].attributes
                    : _.find( cy.queue.commands, {
                        attributes: { chainerId: cmd.chainerId }
                    }).attributes;
            })
            .concat(stopCommand.attributes)
            .slice(1)
            .flatMap( cmd => {
                return cmd.prev.get('subject');
            })
            .value();
    });
    p[chainStart] = startCommand;
    return p;
}

并像这样使用它:

it('test', () => {

    cy.wrap('one').as('one');
    cy.wrap('two').as('two');
    cy.wrap('three').as('three');

    cy.all(
        cy.get(`@one`),
        cy.get(`@two`),
        cy.get(`@three`)
    ).then( values => {
        someFunc(...values);
    });
});

答案 1 :(得分:1)

Mr. Nicholas Boll定制开发的另一种解决方案,您将使用定制命令createAlias/ getAliases以数组的形式获取别名,

// get many aliases - API is similar to Promise.all
cy.getAliases([getFoo, getBar, getOne]).then(([foo, bar, one]) => {
  foo // string
  bar // string
  one // number
  console.log(foo, bar, one) // logs 'foo', 'bar', 1
})

这是他博客中的完整详细信息-https://medium.com/@NicholasBoll/cypress-io-making-aliases-type-safe-b6f5db07d580

代码参考-https://github.com/NicholasBoll/cypress-example-todomvc/tree/feat/type-safe-alias

答案 2 :(得分:0)

这类似于上面使用的values数组,但我执行以下操作:

// Make all data available in one alias:
    const testData = {};
    cy.get('@data1').then((data1) => {
      testData.data1 = data1;
    });
    cy.get('@data2').then((data2) => {
      testData.data2 = data2;
    });
    cy.get('@data3').then((data3) => {
      testData.data3 = data3;
    });
    cy.wrap(testData).as('testData');

然后在需要数据时:

cy.get('@testData').then((testData) => {
   const { data1, data2, data3 } = testData;
   ...
});

答案 3 :(得分:0)

this.* 表示法可用于访问单个代码块中的多个别名:

    cy.wrap('foo').as('foo');
    cy.wrap('bar').as('bar');
    cy.wrap('baz').as('baz');

    cy.then(function () {
      cy.log(this.foo + this.bar + this.baz)
    })

详情见this article