Fix Playwright setup on Gitpod

[dan-mba]

Fixes Issue

Closes #2257

Changes proposed

Install playwright dependencies on init.
Set Playwright to not run parallel tests on Gitpod

Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• My change requires changes to the documentation.
• I have updated the documentation accordingly.
• All new and existing tests passed.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

[github-actions]

It's great having you contribute to this project

Welcome to the community 🤓

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

[eddiejaoude]

Thank you 👍

[eddiejaoude]

It didn't work for me, I still needed to run this command manually to make the test pass 🤔

I wonder why this command doesn't run correctly when building the project on GitHub

[Cahllagerfeld]

The scripts need to be executed in a custom-dockerfile.
The init task only persists the data inside the workspace directory.
Depending if the tests should be able to run headed, the base image of the dockerfile needs to be gitpod/workspace-full-vnc

[dan-mba]

The scripts need to be executed in a custom-dockerfile. The init task only persists the data inside the workspace directory. Depending if the tests should be able to run headed, the base image of the dockerfile needs to be gitpod/workspace-full-vnc

Would the playwright install be the only command needed in the dockerfile or would the npm ci be needed in there too?
Does it make sense to support headed tests or Gitpod, or would it make more sense to to have people run that elsewhere if needed?

[eddiejaoude]

How do we do it for the finder project? Could we do it similar
https://github.com/EddieHubCommunity/good-first-issue-finder/blob/main/.gitpod.yml

[dan-mba]

I think I have it working now.

I was able to install the OS level browser dependencies in the Dockerfile.
But I had to install Chromium in the gitpod.yml command section in order to make it work consistently.

[Cahllagerfeld]

When running this command in the dockerfile, we shouldn't need it here

[dan-mba]

The command in the Dockerfile is install-deps, which performs an apt-get for all the packages required for chromium to run on the OS. Since this uses an OS level package installer it works fine.

The command in .gitpod.yml only installs the chromium browser. This seems to be done in user space but not in the workspace directory that will get persisted. Thus the need to run it in the command section.

I wish there was a better way to do this. The Playwright docs are a bit light on how their browser install tooling actually works. If there was a way to install chromium at the OS level that would work with Playwright that would be the best solution.

[Cahllagerfeld]

Oh I see 👀
An assumption from my side - I didn't test it. Could we potentially run npx playwright install --with-deps chromium in the dockerfile and it takes care of all?

[dan-mba]

I checked and Playwright installs chromium in /home/gitpod/.cache/ms-playwright/chromium-1028/chrome-linux on gitpod.

Should this directory be persisted through the whole container build process?

I tried the install with deps in a previous commit but it didn't work.

[dan-mba]

I found a way to install chromium in node_modules via the Playwright docs.

I updated the .gitpod.yml to do this in the init section.

[eddiejaoude]

Thank you both for continuing to work through this 💪 I know it will help many people 👍

[eddiejaoude]

It works 🎉

gitpod /workspace/LinkFree (gitpod) $ npm run test

> linkfree@1.9.0 test
> npx playwright test


Running 19 tests using 1 worker
[WebServer] (node:1331) [DEP0128] DeprecationWarning: Invalid 'main' field in '/workspace/LinkFree/node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)
[WebServer] Warning: data for page "/search" (path "/search?username=_test-profile-does-not-exist") is 492 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data
[WebServer] Warning: data for page "/search" is 492 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data
[19/19] [chromium] › search.spec.js:44:6 › find the profile after providing concise name

  10 skipped
  9 passed (43s)

To open last HTML report run:

  npx playwright show-report

[eddiejaoude]

wow great work Dan 🔥

Thanks @Cahllagerfeld for supporting with this 👍

[Panquesito7]

Looks great! Thanks. 🚀