I’ve encountered a perplexing issue while testing form on a website. An unsual behavior where, upon attempting to submit a form, a reCAPTCHA pop-ups to select images. However, during this process, the page background unexpectedly scrolls, which disrupts the user experience.
Here are some key points to note:
This issue is occuring inconsistently, affecting only some forms while others remain unaffected.
I have reported this issue, but the developer haven’t been able to pinpoint the root cause yet.
I am reaching here to gather insights into why this issue might be happening and to explore potential solutions/debugging strategies.
Oh, I’m no web expert, but if it was me… I will try find a way to just put some network bandwidth control in place so you can stress the network enough to flush out the network environment changes. I assume you use tools like tc and netem tc-netem(8) - Linux manual page to create network stress environments as part of your automated testing environments. This tends to flush out intermittents for me.
Hmm. I wonder if there is anything to be gleaned from comparing the code and DOM between a form that does it consistently and one that doesnt exhibit the behavior? You didnt say if that had been tried or if it was predictable on a particular form versus another.
Inconsistency is the greatest frustration. I would make a plan to go through all the use cases systematically. Make a document/table/notes/sheet/some sort of a plan and gather as much meta data as possible, each time you perform variation of the test:
environment variables?
what browser?
what OS?
which forms get the errors and which don’t?
record 2-3 actions before the problem occurs
… and then start looking for patterns. For example, it might only be happening on Windows 11 Firefox browser after exactly 3 specific actions (like clicks, page loads, some dropdown selection in the form before etc…) occur.
And to add to Conrad above, with devtools open, monitor network tab and see any suspicios behavior that might be the culprit.
As an additional example, I once had a certain test in Postman collection that started failing regularly. Manually, it always passed. In fact, all tests always passed manually but only when run together, that specific test always failed. In the end, I found out that one test before that one was the culprit - that one also passed but it crashed the log service which crashed the actual service for 30s until it recovered. That’s why I wasn’t able to replicate manually cause I never ran it fast consecutively
is the scrolling randomly related to any input fields on the form gaining automatic focus? If that focus handler causes the field to be scrolled into view, then you might have animation of the page happening?
slow down network traffic - use Throtlling from the browser console to catch events that might happen too quickly;
use a proxy interceptor - charles, burp suite, fiddler to stop/pause requests/responses;
google for known issues for the version of app/library/service that you are using and check a couple of forums, StackOverflow, git or bug boards; e.g. https://groups.google.com/g/recaptcha/c/AhAngBeuZDY
If you’re using repatcha 2.0 you might want to update to 3.0
@ivoqa answer is excellent here. You need that information on browser, OS etc because that in itself my just narrow down your search for the cause.
You could also try using the build in recorder in Chrome Tools.
… but I think if it only occurs when the reCAPTCHA appears, I’d be trying to get a version of the site I could test where I could turn that feature on / off - sounds like that’s the trigger and probably where you should focus the search for the bug.