Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chaining cy.pipe is dangerous when yield element is removed #29

Open
jogelin opened this issue Nov 10, 2021 · 1 comment
Open

Chaining cy.pipe is dangerous when yield element is removed #29

jogelin opened this issue Nov 10, 2021 · 1 comment

Comments

@jogelin
Copy link

jogelin commented Nov 10, 2021

Hello,

I am using your library for some time now and I wanted to share about the fact that chaining cy.pipe is bringing some flakiness too.

In your tests, I see that you are testing that if you chain cy.pipe multiple time, the yield element is correctly transferred and the delayed child elements are correctly appended.

I think this is not really representing the reality when we are using a frontend framework that is removing adding dom element dynamically. As you can see on my branch, I am simulating that the yielding element is removed and recreated. In this use case, the test failed.

This is happening a lot when you want for example to access a table, then the first row then a cell, ... if the first row is removed and recreated by the framework because of many reasons, your test is flaky.

I know it can be solved by chaining JQuery utils inside a unique cy.pipe() but I feel the syntax is harder to read.

I was thinking about having a pipe function that allows providing a list of functions instead of only one like this:

const getFirst = $el => $el.find('#first')
const getSecond = $el => $el.find('#second')
const getThird = $el => $el.find('#third')
const getFourth = $el => $el.find('#fourth')
const getFifth = $el => $el.find('#fifth')
const getText = $el => $el.text()

cy.get('body')
  .pipe(getFirst, getSecond, getThird, getFourth, getFifth, getText).should('equal', 'foobar')

Then the entire list can be retried instead of chaining pipe. Having multiple pipe should be avoided IMO

What do you think?

@jogelin
Copy link
Author

jogelin commented Nov 12, 2021

For the moment, I created a small function like:

function $elPipe(...jQueryFns) {
    return ($startingEl) => jQueryFns.reduce(($el, jQueryFn) => jQueryFn($el), $startingEl);
}

So in the test of my branch:

        // THIS DOES NOT WORK
        // cy.get('body')
        //   .pipe(getFirst)
        //   .pipe(getSecond) // Will resolve after a delay
        //   .pipe(getThird) // Will resolve after a delay
        //   .pipe(getFourth) // Will resolve after a delay
        //   .pipe(getFifth) // Will resolve after a delay
        //   .pipe(getText)
        //   .should('equal', 'foobar')
        
        // THIS WORKS !
        const getFifthText = $elPipe(getFirst, getSecond, getThird, getFourth, getFifth, getText);
        cy.get('body').pipe(getFifthText).should('equal', 'foobar')

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant