JS/Cypress.io:如何迭代2套相应的数据 [英] JS/Cypress.io: How to iterate over 2 corresponding sets of data

问题描述

JS/Cypress.io:如何迭代2套相应的数据

这是我目前拥有的并且可以使用，但是我想使其更干(不要重复自己):

This is what I have currently and it works, but I want to make it more DRY (do not repeat yourself):

使用Cypress.io:

var states1 = [
  "NE",
  "MO",
  "KS",
  "IA",
  "OK",
  "OR",
  "WA",
  "AZ",
  "NM",
  "NC",
  "SC",
  "GA",
  "FL"
];
cy.get('[data-popup-text="26% to 50% of People"]').within(() => {
  cy.wrap(states1).each(state => {
    cy.get(`[data-state="${state}"]`).trigger("mouseover", { force: true });
    cy.get(`[data-state="${state}"]`).click({ force: true });
    cy.get(`[data-state="${state}"]`).should("be.visible");
  });
});

var states2 = ["VT", "PA"];
cy.get('[data-popup-text="60% of People"]').within(() => {
  cy.wrap(states2).each(state => {
    cy.get(`[data-state="${state}"]`).trigger("mouseover");
    cy.get(`[data-state="${state}"]`).click();
    cy.get(`[data-state="${state}"]`).should("be.visible");
  });
});

var states3 = ["MD"];
cy.get('[data-popup-text="81% to 90% of People"]').within(() => {
  cy.wrap(states3).each(state => {
    cy.get(`[data-state="${state}"]`).trigger("mouseover", { force: true });
    cy.get(`[data-state="${state}"]`).click({ force: true });
    cy.get(`[data-state="${state}"]`).should("be.visible");
  });
});

正如您所知，它正在重复很多代码.我想使其变干并开始尝试类似的方法，但是需要一些帮助，并且不确定这是否是最好的方法，它还不完整，我只是想弄清楚该怎么做，因此它无法正常工作.

As you can tell it's repeating a lot of code. I want to make it drier and started to try something like this but need some help and am not sure if this is the best way, it's not complete, and I was just trying to figure out how to do it, thus it's not working as intended.

我想相应地从数据集中插入每个对应的值，然后运行断言.因此，我需要某种循环来处理此数据集:

I want to insert each corresponding value from the dataset accordingly and then run the assertions. So I need some sort of loop to work with this data set:

var items = [
  ["NE", "26% to 50% of People"],
  ["MO", "26% to 50% of People"],
  ["KS", "26% to 50% of People"],
  ["VT", "60% of People"],
  ["PA", "60% of People"],
  ["MD", "81% to 90% of People"]
];

cy.get(`[data-popup-text="${items[0][1]}"]`).within(() => {
  cy.wrap(items).each(item => {
    cy.get(`[data-state="${items[0][0]}"]`).trigger("mouseover", {
      force: true
    });
    cy.get(`[data-state="${items[0][0]}"]`).click({ force: true });
    cy.get(`[data-state="${items[0][0]}"]`).should("be.visible");
  });
});

推荐答案

我会在 Map 对象中使用 key value 对数组，类似:

I would go for key value pair arrays within a Map object, something like:

    const items = new Map([
        ['NE', "26% to 50% of People"],
        ['MO', "26% to 50% of People"],
        ['KS', "26% to 50% of People"],
        ['VT', "60% of People"],
        ['PA', "60% of People"],
        ['MD', "81% to 90% of People"]
    ]);

    for (const [key, value] of items.entries()) {
        it('check my items', () => {

            cy.get(`[data-popup-text="${value}"`).within(() => {
                cy.get(`[data-state="${key}`).trigger('mouseover', {force: true})
                cy.get(`[data-state="${key}`).click({force: true})
                cy.get(`[data-state="${key}`).should('be.visible')
            })
        })
    }

这篇关于JS/Cypress.io:如何迭代2套相应的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！