如何从打字稿中的赛普拉斯自定义命令返回对象列表

Question

我正在使用 Cypress 进行端到端集成测试。我有一个用例涉及从赛普拉斯自定义命令返回对象列表，但我很难这样做。这是我的代码指针：

index.ts

declare global {
    namespace Cypress {
        interface Chainable<Subject> {
            getTestDataFromElmoDynamoDB({locale, testType}): Cypress.Chainable<JQuery<expectedData[]>> // ??? not sure what return type should be given here.
        }
    }
}


Cypress.Commands.add('getTestDataFromDynamoDB', ({locale, testType}) => {
    // expectedData is an interface declared. My use case is to return the list of this type.
    let presetList: expectedData[] 
    cy.task('getTestDataFromDynamoDB', {
        locale: locale,
        testType: testType
    }).then((presetData: any) => {
        presetList = presetData;
        // the whole idea here is to return presetList from cypress task
        return cy.wrap(presetList) //??? not sure what should be written here
    })
})

sampleSpec.ts

describe('The Sample Test', () => {

    it.only('DemoTest', () => {
        cy.getTestDataElmoDynamoDB({
            locale: env_parameters.env.locale,
            testType: "ChangePlan"
        }).then((presetlist) => {
           // not sure on how to access the list here. Tried wrap and alias but no luck.
          presetList.forEach((preset: expectedData) => {
             //blah blah blah
           })
        })
    })
})

以前有没有人研究过类似的用例？

谢谢， 萨希思

Answer 1

这是我自己的命令。

Cypress.Commands.add("convertArrayOfAlliasedElementsToArrayOfInteractableElements", (arrayOfAlliases) => {

    let arrayOfRecievedAlliasValues = []

    for (let arrayElement of arrayOfAlliases) {
        cy.get(arrayElement)
            .then(aelement =>{
                arrayOfRecievedAlliasValues.push(aelement)
            })
    }

    return cy.wrap(arrayOfRecievedAlliasValues)

})

我这样做的方式是将它传递到一个数组和cy.wrap 数组中，因为它可以让您将命令与可交互的数组链接起来。

关键点是 - 它必须作为数组或对象传递，因为它们是 Reference types，并且在 cypress 中很难使用值类型的 let/var/const。

如果你愿意，你也可以为 cy.wrapped 对象加上别名。

在代码中使用它的方式是： cy.convertArrayOfAlliasedElementsToArrayOfInteractableElements(ArayOfElements)

Answer 2

你要求的可以实现如下，但是我不知道expectedData是什么类型，所以我们假设expectedData:string[]，但是你可以用你的类型替换string[]。

plugins/index.ts

module.exports = (on: any, config: any) => {
  on('task', {
    getDataFromDB(arg: {locale: string, testType: string}){
      // generate some data for an example
      const list: string[] = [];
      list.push('a', 'b');
      return list;
    },
  });
};

commands.ts

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      getTestDataElmoDynamoDB(arg: {locale: string, testType: string}): Cypress.Chainable<string[]>
    }
  }
}


Cypress.Commands.add('getTestDataElmoDynamoDB', (arg: {locale: string, testType: string}) => {
  let presetList: string[] = [];
  cy.task('getDataFromDB', arg)
    .then((presetData?: string[]) => {
      expect(presetData).not.be.undefined.and.not.be.empty;
      // if the data is incorrect, the code will break earlier on expect, this line for typescript compiler
      if (!presetData || !presetData.length) throw new Error('Present data are undefined or empty');
      presetList = presetData;
      return cy.wrap(presetList); // or you can return cy.wrap(presetData)
    });
});

db.spec.ts

describe('Test database methods', () => {
    it('When take some test data, expect that the data was received successfully ', () => {
        cy.getTestDataElmoDynamoDB({ locale: 'someEnvVar', testType: 'ChangePlan' })
          .then((list) => {
            expect(list).not.empty.and.not.be.undefined;
            cy.log(list); // [a,b]
            // You can interact with list here as with a regular array, via forEach();
        });
    });
});

您还可以直接在 spec 文件中访问和接收来自 cy.task 的数据。

describe('Test database methods', () => {
    it('When take some test data, expect that the data was received successfully ', () => {
        cy.task('getDataFromDB', arg)
            .then((list?: string[]) => {
                expect(list).not.be.empty.and.not.be.undefined;
                cy.log(list); // [a,b] — the same list as in the version above
        });
    });
});