0

We have a suite of UI tests (Functional) that use GEB. However the code is legacy, not following CSS componentization and one change in CSS can have undetected side-effects in unrelated areas. Is there any plugin or workflow that can be integrated with GEB to provide Automating CSS Regression Testing?

In the JS world there exists BackStopJS for Javascript. Is there anything analogous for GEB?

Vasileios Anagnostopoulos
  • 137
  • 1
  • 10
  • 1
    Could you give a concrete example what kind of check you would like to perform? – Thomas Hirsch Feb 23 '19 at 10:43
  • 1
    Yeah, can you please explain in more detail what are you trying to achieve? How does the fact that you have a set of GEB tests relate to doing Automated CSS regression testing? Why can't you or don't want to simply use BackStopJS for your CSS regression tests? – erdi Feb 24 '19 at 18:22
  • Actually BackstopJS (my impression from reading the documentation) is that it checks specific pages. In our case we run GEB scenarios, for example a user does a journey clicks various buttons and arrives at a page. We would like to make sure that while we run the GEB tests, the intermediate pages have not changed because of CSS change. These pages are accessible through journeys of the user and are not accessible directly (permissions/ session data) . Have I clarified my question? – Vasileios Anagnostopoulos Feb 25 '19 at 08:28
  • I personally don't understand your question much better... Could you please share the code you have tried and the HTML of the page(s) in question? – C. Peck Feb 27 '19 at 06:47
  • Unfortunately I cannot share any code :-( For me the question is answered. But I would be curious to see how people do it in full JS, GUI testing and regression testing (no GEB, no SPA). – Vasileios Anagnostopoulos Feb 27 '19 at 10:21

1 Answers1

0

You could simply take a screenshot of every meaningful page or page state that you want to verify, and compare those between test runs.

Call browser.report("some page") in Geb, and it will dump a screenshot.

This would be the easiest way to detect any changes, CSS-related or otherwise, in the rendered pages, using the setup you already have.

In case there are many pages with changing images giving you false positives, you might want to use placeholders.

Also, instead of comparing the screenshots directly, you could calculate the difference between the images, and / or exclude regions from the comparison.

Thomas Hirsch
  • 2,102
  • 3
  • 19
  • 39