Cypress report improve

[antonioaltamura]

I'm not sure whether this is a Cypress or Mochawesome issue.
I have a test block in which I test each element of a set in a loop. I would like to improve the control over the html generated report and have an entry in the report of each element, like shown in the screenshots.
What I have now

What I would like to have

[adamgruber]

Most likely this is an issue with how Cypress is reporting tests within a loop since the reporter is just displaying based on the info it has. Can you provide example code to reproduce?

[antonioaltamura]

Here the simplified example.

<ul>
    <li id="_1">item 1</li>
    <li id="_2">item 2</li>
    <li id="_3">item 3</li>
    <li id="_4">item 4</li>
</ul>

it("loop test", () => {
      cy.get("li").each(el => {
          const id = el.attr("id");
          cy.get("#" + id).should("exist").click();
          // other async (remote) operations
          // HERE I want to log a row in the report for each element. That way I can control which one has failed.
          cy.wait(2000);
      });
});

[adamgruber]

Thanks for the example. I'm not sure what you want is going to be possible with how you've written the tests. Using the example above, there's only a single it() so Cypress (and subsequently Mochawesome) only sees one test. The number of assertions inside the test does not matter.

You could try flipping things so the it() block is created inside the loop. This way you'd end up with one test for each element. Something like this:

cy.get("li").each(el => {
    const id = el.attr("id");
    it(`loop test for ${id}`, () => {
        cy.get("#" + id).should("exist").click();
        // other async (remote) operations
        // HERE I want to log a row in the report for each element. That way I can control which one has failed.
        cy.wait(2000);
    });
});

[antonioaltamura]

That is actually the information I'm missing. Where should your block be placed? You can't nest it blocks. And you can't use describe to group it blocks apparently.

[adamgruber]

You can put the block in a describe.

[antonioaltamura]

Try to run this

describe("loop test", () => {
        cy.get("li").each(el => {
            const id = el.attr("id");
            it(`loop test for ${id}`, () => {
                cy.get("#" + id).should("exist").click();
                // other async (remote) operations
                // HERE I want to log a row in the report for each element. That way I can control which one has failed.
                cy.wait(2000);
            });
        });
    });

You will get an error "Cannot call cy.get() outside a running test."
Am I missing something?

[adamgruber]

Hmm, I expected it would work but it looks like Cypress doesn't support this kind of dynamic test creation which is unfortunate.