How to setup e2e testing environment with playwright and docker for Meshery

Meshery
,
1

The steps outlined here assume that you already have:

  • Docker installed on your local machine.
  • Meshery CLI has already started running.
  • An environment variable required to run the app.

Pulling the docker images

The first step is to pull the docker image from Azure Container Registry where the playwright stores their image using this command:

docker pull mcr.microsoft.com/playwright:<version>-<base-image>

Make sure the version you are using matches the version of @playwright/test in the package.json dev dependencies

For more information, you can check on their official documentation but for this tutorial, we are using Playwright v1.44.0 based on Ubuntu 22.04 LTS

docker pull mcr.microsoft.com/playwright:v1.44.0-jammy

Starting up Playwright Server

Before running the test you are required to spin up the playwright server container using this command:

docker run --rm --network host --init -it mcr.microsoft.com/playwright:v1.44.0-jammy /bin/sh -c "cd /home/pwuser && npx -y playwright@1.44.0 run-server --port 8080"

Options:
--rm Automatically remove previous container when it exits.
-it Runs interactively, when you use this command you also will be sent straight inside the container, alternatifly you can also use -d to make it run on the background. It’s better to use -it because it’s so easy to stop the container by using ctrl + c only, good for containers you don’t want to keep for long time
--network host This option means you want to expose all your host’s networking stack, this command has security implications because docker is secure by default, thanks to the isolation.

Keep in mind this is just for development purposes inside your local system and don’t try this on production or CI

--init because we exposed the host networking stack, this one will help to clean up the zombie process thanks to tiny behind this command
/bin/sh -c This command is helpful for running a script inside the container for playwright server

You also can specify which port you like to run but for this demo, I’m using 8080

Run the test cases

In the last step, run this command to run the test cases:

PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:8080/ npx playwright test

You can also run this command if you prefer to work with a browser, don’t forget to specify a port for this example I’m using 9090 :

PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:8080/ npx playwright test --ui-port=9090

Now your testing environment is ready :partying_face:

Screenshot_5-8-2024_13724_localhost
Screenshot_5-8-2024_13724_localhost1190×581 98.9 KB

Reference:

5 Likes
2

Thanks for sharing this, @Jerens_Lensun. :clap: For those familiarizing with contributing to end-to-end testing in Meshery, here are two other resources:

2 Likes
4

Thanks for the docs.
$ PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:8080/ npx playwright test is returning with error in the ui/.

Running 38 tests using 1 worker

  ✘  1 [setup] › auth.setup.js:13:6 › authenticate (1.1s)
     2 [setup] › seedResources.setup.js:106:6 › seed-resources
Error while getting token from auth file: Error: Cannot find module '../../../playwright/.auth/user.json'
Require stack:
- /workspaces/meshery/ui/tests/e2e/utils/fetch.js
- /workspaces/meshery/ui/tests/e2e/seedResources.setup.js
- /workspaces/meshery/ui/node_modules/playwright/lib/transform/transform.js
- /workspaces/meshery/ui/node_modules/playwright/lib/common/esmLoaderHost.js
- /workspaces/meshery/ui/node_modules/playwright/lib/common/process.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1145:15

I’m using github codespaces for development environment.

5

Are you already setting up 3 required environment variables for running the test?

  • process.env.REMOTE_PROVIDER_USER_EMAIL
  • process.env.REMOTE_PROVIDER_USER_PASSWORD
  • process.env.PROVIDER_TOKEN

To generate a provider token you can go to this link: Layer5 Cloud | Collaborative Cloud Native Management

Don’t forget also to verify your email address on the Meshery cloud provider

6

yeah i added the env variables in terminal and also in ~./bashrc