Thread by @Nican, I just had one of those "I spent way too much time [...]

Nican

I just had one of those "I spent way too much time trying to find a bug"

We have automated browser testing, and we are using puppeteer to run the tests. Using React as the frontend.

As the number of tests grew, we started to notice more and more flaky tests.

To the point that running the tests every time would fail, and it would take some 5 retries, each taking 10 minutes, for the tests to succeed.

We could not find any pattern about the errors until we started looking into it.

After reading this thread, we finally figured out what was going on:

https://stackoverflow.com/a/50032302/99966">https://stackoverflow.com/a/5003230...

Puppetter talks to Chromium over some RPC. The .click() function is actually executed over several RPC calls, each has a small delay between them.

puppeteer element.click() not working and not throwing an error

I have a situation where a button, on a form, that is animated into view, if the element.click() happens while the animation is in progress, it doesn't work. element.click() doesn't throw an error,

https://stackoverflow.com/a/50032302/99966

During very rare occasions, some lazy loaded component or network call would load at the same moment that the button was being clicked.

This caused the button to move position, and the click call would be clicking on the wrong position.

Example, this would happen in a span of ~2ms:
RPC #1: Get button x,w,width,height
RPC #2: Move cursor to (x+width/2,y+height/2)
RPC #3: Mouse down
(...Some new component/request finished loading, and cause the page& #39;s elements to move around...)
RPC #4: Mouse up

...This was really painful to figure out.

You can follow @Nican.

Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: