How to sequentially click on child elements in Cypress?

Viewed 27

I have a table with a variable number of tr elements. Each tr is clickable and when clicked a modal opens (always the same modal for each tr). In the modal a toggle has to be set:

it('Set payment methods', () => {
    cy.el('tablePaymentMethods')
        .children()
        .each(($el, index) => {
            cy.intercept({
                method: 'PATCH',
                url: `${Cypress.env('API_URL')}/api/v1/company/*/paymentMethod/*?cache_buster=*`,
            }).as('paymentMethod');
            cy.wrap($el).click();
            cy.el('toggleActive').click();
            cy.el('btnEditPaymentMethod').click();
            cy.wait('@paymentMethod').then((data: any) => {
                expect(data.response.body.data.active).to.eq(true);
            });
        });
});

The problem with this test is that Cypress executes them at the same time, showing me the error:

is being covered by another element

I can use force: true to still click on the toggle but I would much rather wait with clicking on the second tr when the cy.wait() has gotten a response (meaning the first modal is closed).

0 Answers
Related