问题
JS/Cypress.io: How to iterate over 2 corresponding sets of data
This is what I have currently and it works, but I want to make it more DRY (do not repeat yourself):
Using 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");
});
});
回答1:
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')
})
})
}
回答2:
Ended up using this:
farooqs_data.json file:
{
'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",
}
Test code:
const state_data = require('/path/to/my/json/data/file/farooqs_data.json');
Object.keys(state_data).forEach(function(key) {
cy.get(`[data-popup-text="${state_data[key]}"]`).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')
})
})
来源:https://stackoverflow.com/questions/62869162/js-cypress-io-how-to-iterate-over-2-corresponding-sets-of-data