Upgrading the ‘dot’ Playwright report for a more readable CI

If you have integrate Playwright to your CI (if not, see here), you probably have used the dot reporter as advised.. Good, me too! Until I tuned it to be even more readable!

What I changed:

1. there are ‘milestones’ to give you an idea of how many tests have been executed at the end of line;
2. the title (or the annotation) of a failed test (not flaky) is displayed, so we don’t need to wait the end of the test run to know which one failed;
3. the grey ‘x’ (when a test is failed but will be retry) is now yellow, to better see it on the black background of Gitlab;
4. the errors of failed tests are not displayed in line at the end, as they can be found on the html report.

Upgraded Gitlab CI report based on ‘dot’ reporter

Here’s the complete TS file to achieve this upgrade:

Then, simply add it to playwright.config.ts as instructed in Playwright docs: https://playwright.dev/docs/test-reporters#custom-reporters

Note: This is what works for our team, I hope it can help you see the potential of what you can do if you need a reporter more suitable to your needs and team!