Hi,
We are using Geb, associated to a ChromeDriver instance to execute a bunch
of browser tests on our application.
Some of those tests are flaky, mainly due to the lack of 'waitFor {}' calls
around animations that happen when clicking a web element.
In order to help us understanding and fixing the flakiness, we capture
screenshots when a test fails.
But this is sometimes not enough.
Say, the test fail with 'waitFor { someElement.displayed }', the screenshot
will either show
- that the element is indeed not displayed
- that the element is displayed, but that doesn't help. It might be that by
the time the screenshot is captured, the animation is actually finished and
the screenshot doesn't really reflect the _exact_ state when the failure
occurred.
So, in order to assist even more, I had the idea to enhance the screenshots
with some data.
Basically, I added a 'ReportingListener', that grabs the created PNG
screenshot, and writes a bunch of stuff on top if it, using java's
Graphics2D API.
Currently, I add info like:
- the browser dimension (it can help in case of tooltips being displayed
and hiding elements between them. These tooltips positions can differ based
on the browser's dimension)
- the browser URL
- the current 'document.activeElement'
- the current cursor position.
- since we can't get the mouse position directly, but only when the mouse
moves (correct me if I'm wrong), I hack around this by adding a
'document.onmousemove
= event => { window.mouseX = event.pageX; window.mouseY = event.pageY'
script, and then do 'browser.interact { moveByOffset(1, 0) }', and then
execute 'return [window.mouseX, window.mouseY]', and substract 1 to the
mouseX returned value.
- I also capture the cursor position before and after click
- I added a NavigatorEventListener
- implement 'beforeClick' / 'afterClick' and use the same approach as
above to store the Navigator.x / Navigator.y values in some variables to be
picked up by the 'ReportingListener'
- This helps a lot in case where clicking an element triggers an
animation that moves the element being clicked.
See for instance this page
<https://scans.gradle.com/s/qxtasxn3dikjc/timeline>, and click the
magnifying glass.
In theory, if our 'waitFor { }' were perfect, the 'afterClick' cursor
location should still be on the magnifying glass (that has moved vertically
after the 'slide down' transition). But the screenshots now show that this
is not the case, bringing an actual proof that the waits are not properly
working. They just don't properly wait for the end of the animation.
This can be seen in the two attached screenshots :
- the cursor is correctly on the top-left corner of the magnifying glass on
the 'beforeClick' image
- in the 'afterClick' one, the cursor has slightly moved vertically,
following the slide down transition, but it actually is not on the top-left
corner of the magnifying glass
Does this sound like a sensible approach to you?
Would it make sense that I work on making a PR to integrate that in some
sort of ways in Geb?
--
You received this message because you are subscribed to the Google Groups "Geb
User Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/geb-user/8ba05fdc-cd86-4d3e-a0ba-f2ca80252da2%40googlegroups.com.
