Skip to content Skip to sidebar Skip to footer

Cypress.io: How To Send A Trigger Out Of Cy.then Or Cy.each Function?

I try to verify weather if there have store keyword I want between the elements of pages. For example: store keyword = 'apple' the part structure of a page:

Solution 1:

What you're after is probably best solved by a recursive command/helper that crawls the pages until a store is found or until no other page/stores are left.

Below, the findStore is a function that calls _walkStores which is recursive. It crawls current page, and tries to load next page if nothing is found.

describe('test', () => {
    function_walkStores ( store ) {
        let found = false;
        return cy.get('.store').each( elem => {
            if ( Cypress.$(elem).find(`[data-store="${store}"]`).length ) {
                found = true;
                returnfalse; // exit early (not required)
            }
        }).then(() => {
            if ( found ) {
                returntrue;
            } else {
                if ( Cypress.$('.nextPage').length ) {
                    cy.get('.nextPage').click();

                    // if your `.nextPage` button doesn't immediately repaint //  DOM as my mock helper does, you should assert url//  change or something similar, before calling _walkStores,//  so as to ensure the _walkStores doesn't retrieve the//  same old DOM nodesreturn_walkStores(store);
                }
                returnfalse;
            }
        });
    }

    functionfindStore ( store ) {
        return_walkStores(store).then( found => {
            expect(found, `store "${store}"`).to.true;
        });
    }

    functionloadProduct ( name ) {
        cy.window().then(win => {
            const pages = [
                `
                    <div class="store">
                        <div class="offer-store" data-store="apple">Apple</div>
                    </div>
                    <div class="store">
                        <div class="offer-store" data-store="amazon">Amazon</div>
                    </div>
                    <button class="nextPage" onclick="nextPage()">next</button>
                `,
                `
                    <div class="store">
                        <div class="offer-store" data-store="microsoft">Microsoft</div>
                    </div>
                    <div class="store">
                        <div class="offer-store" data-store="dell">Dell</div>
                    </div>
                    <button class="nextPage" onclick="nextPage()">next</button>
                `,
                `
                    <div class="store">
                        <div class="offer-store" data-store="ibm">IBM</div>
                    </div>
                    <div class="store">
                        <div class="offer-store" data-store="lenovo">Lenovo</div>
                    </div>
                `,
            ];

            const doc = win.document;

            win.nextPage = () => {
                const page = pages.shift();
                if ( !page ) return;
                doc.querySelector('.content').innerHTML = 'loading...';
                setTimeout(() => {
                    doc.querySelector('.content').innerHTML = page;
                }, 1000 );
            };
            doc.body.innerHTML = `
                <h1>${name}</h1>
                <div class="content">
                    ${pages.shift()}
                </div>
            `;
        });
    }

    it('test', () => {
        ['Laptop A', 'Laptop B'].forEach( name => {
            loadProduct(name);
            // will passfindStore('ibm');
        });

        // will failfindStore('xx');
    });
});

Post a Comment for "Cypress.io: How To Send A Trigger Out Of Cy.then Or Cy.each Function?"