赛普拉斯测试的随机元素选择

Question

当前正在测试本地电影预订网站，我必须在其中输入一定数量的所选电影门票。附件屏幕的屏幕截图-

用于重现问题的存储库-https://github.com/zac11/iCinema

1. 克隆存储库。
2. 进入client目录并执行npm i
3. 从根目录运行npm start。
4. Webapp将在localhost:3000
打开

我希望能够以一种随机方式输入所选电影的电影票，以便它从四个中选择一个随机的票证类别，然后输入一个票证号码，例如2

现在，我可以通过以这种方式对定位器进行硬编码来填充票证类别-

  cy.get('div.tickets-info > div:nth-child(1) > span > b').type(3,{force:true});

，其中输入Junior Ticket类别的票证数量。我希望能够随机输入四个类别中任何一个类别的票证，而不必对类别定位符进行硬编码。

PS-该存储库还包含赛普拉斯测试，也可以使用npm run test

运行

Answer 1

您可以根据以下内容将类别随机化：

const picked = Math.floor(Math.random()*3); // this gives you a random value from 0 - 3;

// using template string literals - we can add that into picked
cy.get(`div.tickets-info > div:nth-child(`${picked}`) > span > b`).type(3, {force: true})

从选择的-您可以拥有与类别相关的元素数组：

const categories = ["Junior", "student", "normal", "senior"]

您还可以将categories中的票证的值作为对象，并将其用于计算总数。

const categories = [{
  type: "junior", 
  value: 5
}, {
  type: "student",
  value: 3
}, {
  type: "normal"
  value: 10
}, {
  type: "senior",
  value: 3
}]

您可能会说，使用选择的值来计算总金额

const value = categories[picked].value * random_amount;
cy.get(".sum-field label:nth-child(1)").should("contain", value) // total

Answer 2

我需要对我们的应用做同样的事情，所以我想出了custom command来轻松实现这一目标。这是我在cypress/support/commands.js中想到的代码：

Cypress.Commands.add('any', { prevSubject: 'element' }, (subject, size = 1) => {
  return cy.wrap(subject).then(elementList => {

    // this line enables me to use this command with either cy.get() or cy.wrap()
    elementList = (elementList.jquery) ? elementList.get() : elementList;

    elementList = Cypress._.sampleSize(elementList, size);
    elementList = (elementList.length > 1) ? elementList : elementList[0];

    return cy.wrap(elementList);
  });
});

我还可以在自定义命令中将自定义日志记录与Cypress.log()一起使用。为了清楚起见，我从上面的代码中删除了它。

然后，您可以像其他任何cy命令一样在测试中使用它：

cy.get('div.tickets-info > div > span > b').any().type(3,{force:true});

或者如果您需要多个：

cy.get('div.tickets-info > div > span > b').any(2).each(element => {
    cy.wrap(element).type(2, { force: true });
});