Rayrun
← Back to Discord Forum

Looking for an example of component testing working on CI - preferably GH Actions

matthewbalaamposted in #help-playwright
Open in Discord
matthewbalaam
matthewbalaam

We are investigating moving our component library tests from jest over to Playwright - particularly to take advantage of visual testing.

I am guessing a vague checklist is that you need to be running the same environment locally to generate the screenshots as on CI. I see some guides for e2e tests but nothing for component testing and wonder what the differences would be?

This thread is trying to answer question "How can one set up component testing with Playwright on GitHub Actions, ensuring the same environment for screenshot generation both locally and on CI?"

7 replies

it's same like with e2e, you generate screenshots locally in a docker container to have same env for screenshots like in ci

And has anyone seen an example or documentation I could learn from?

open source example from a quick search https://github.com/gradio-app/gradio

usually synthetic examples or documentations focuses on one thing or another

I'm looking at this as well but from the standpoint of getting some component testing for a react app (I have none now). The road block i'm running into is after vite builds the JS files, I'm getting errors about not being able to mount the components in my tests because of trouble with a dependency. The wierd thing is the component I'm testing does not use the dependency it's have problems with.

matthewbalaam
matthewbalaam
@skorp32: Thank you very much 🙂

Thank you very much 🙂

matthewbalaam
matthewbalaam
@mramazn: Sometimes I have encountered this issue if I am importing from a barrel file which exports multiple things - so to get around that I have split out these types of exports. Also, if you don’t have `"side-effects": "false"` set in the package.json then the bundler could add everything.

Sometimes I have encountered this issue if I am importing from a barrel file which exports multiple things - so to get around that I have split out these types of exports. Also, if you don’t have "side-effects": "false" set in the package.json then the bundler could add everything.

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.