Getting text content of html element without callback hell

[soadzoor]

Hey,

I'm trying to get the text of an html element in some of my cypress test files.
The goal is to check the number of rows in my table, add some elements, then check the number of rows in my table again, if it changed to the right value.

Right now, I'm solving it this way (this is a simplified version):

cy.get('.TableFooter > span').invoke('text').then(text => {
    const numberOfRowsBeforeCreation = parseInt(text);

    // ...add items...

    cy.get('.TableFooter > span').invoke('text').then(text => {
        const numberOfRowsAfterCreation = parseInt(text);
        expect(numberOfRowsAfterCreation).to.eq(numberOfRowsBeforeCreation + 1);
    }
});

As I said, this example is simplified.. In my real-life test, I'm like 5-6 indentations to the right somewhere in the code because of this callback hell effect...

I also tried making a custom Promise-based function, like..:

const getNumberOfRowsInTable = () => {
    return new Promise((resolve, reject) => {
        cy.get('.TableFooter > span').invoke('text').then(text => {
            const numberOfRowsAfterCreation = parseInt(text);
            resolve(numberOfRowsAfterCreation);
        });
    });
};

so I was able to use it like this:

const numberOfRowsBeforeCreation = await getNumberOfRowsInTable();

// do stuff, add elements, whatever

const numberOfRowsAfterCreation = await getNumberOfRowsInTable();
expect(numberOfRowsAfterCreation).to.eq(numberOfRowsBeforeCreation + 1);

It worked fine, but only when I ran the tests with cypress open, which opens up the UI, and then I can manually select to run the tests.

If I tried with npx cypress run, it got stuck, and failed. I investigated a lot until I found that the Promises are the problem, they're not handled by cypress in this mode correctly, for some weird reason...

Any ideas on how to achieve a nice "line-by-line" structure without actual promises and async await..? Or how to get the text content of an element without the necessity of callback functions...?

Thanks in advance!