Screenshots testing with Playwright

[peterpeterparker]

Motivation

We want to ensure that the template(s) always looks the same in both dark and light mode, even when upgrading dependencies.

Tasks

To be split into multiple PRs:

• Set up Playwright
• Create a test that takes a screenshot and compares it
• Add a CI action that runs the test on each PR

[biocodeit]

Hey, Can I work on this.

[peterpeterparker]

Sure.

Note the task requires multiples well scoped PRs. Don't expect me to review and approve one gigantic PR.

[biocodeit]

Yes, okay. I will start working on it.

[biocodeit]

I had two queries:

1. Since these are React Email templates, can you confirm that Dark Mode is implemented using specific Dark Mode CSS code changes within the 2 template codes present?

2. The test requires a separate screenshot for Light and Dark mode. Are we aiming to ensure the visual output is visually distinct but correct in both themes, or that the output is somehow identical?

I will first setup playwright but wanted to know prior to that.

[peterpeterparker]

Thanks for asking. It's only light mode for now.

[biocodeit]

@peterpeterparker, I have included the playwright. Please let me know, we can make necessary changes.
The git CI is default yml file of playwright, that can be tested and integrated later.

[peterpeterparker]

Great, let me take a look. Should I tag it with Hacktoberfest - are you participating?

[peterpeterparker]

@biocodeit thanks for the PR, Hacktoberfest or not?

[biocodeit]

@peterpeterparker sure i would like that

[peterpeterparker]

Sure thing. I added the hacktoberfest label. Let me know if your PRs do not get counted.

[biocodeit]

@peterpeterparker do i add the tests I already have them. And previously react-mail was causing issue with run dev, let me check once you finalize the main brach, then i will pull from it.

[peterpeterparker]

@biocodeit I've merged a few PRs (#10, #11, #12, #13, and #14). You should now be able to open one with the tests.

There’s no need for screenshots with your test, we should be able to generate those in the CI now.

Afterwards, if you wish, you can also provide a final PR to remove the dummy test and its screenshot that I just added.

[biocodeit]

@peterpeterparker shouldn't the objective of screenshot check be to compare it with a already predefined template(.png). So we should have template images, right? Also I thought we are testing below pages,

I think objective for me is unclear, can provide more details on this.