Merge pull request #2041 from woocommerce/e2e/playwright-tests

Convert E2E tests from Puppeteer to Playwright

.eslintrc.js

@@ -53,4 +53,12 @@ module.exports = {
 		'import/no-duplicates': 'off',
 		'no-duplicate-imports': 'warn',
 	},
+	overrides: [
+		{
+			files: [ 'tests/e2e/**/*.js' ],
+			rules: {
+				'jest/no-done-callback': [ 'off' ],
+			},
+		},
+	],
 };

.github/workflows/e2e-tests.yml

@@ -20,11 +20,6 @@ jobs:
     env:
       FORCE_COLOR: 2
     steps:
-      # Needed for Ubuntu 20.04.
-      - name: Kill mono to free 8084
-        run: |
-          sudo killall mono
-
       - name: Checkout repository
         uses: actions/checkout@v3
 
@@ -45,22 +40,20 @@ jobs:
           npm run build
           echo "::endgroup::"
 
-      - name: Start docker container
-        run: |
-          npm run docker:up
-          sleep 10
+      - name: Start wp-env container
+        run: npm run wp-env:up
+
+      - name: Download and install Chromium browser.
+        run: npx playwright install chromium
 
       - name: Run tests
-        env:
-            WC_E2E_SCREENSHOTS: 1
-        run: |
-          npm run test:e2e
+        run: npm run test:e2e
 
-      - name: Archive e2e test screenshots
+      - name: Archive e2e failure screenshots
         if: ${{ always() }}
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
             name: e2e-screenshots
-            path: tests/e2e/screenshots
+            path: tests/e2e/test-results/report/**/*.png
             if-no-files-found: ignore
             retention-days: 5

.gitignore

@@ -11,7 +11,7 @@ languages/*
 coverage
 tests/php-coverage
 .phpunit.result.cache
-tests/e2e/test-results.json
+tests/e2e/test-results
 
 # Directories/files that may appear in your environment
 .DS_Store

.wp-env.json

@@ -3,8 +3,12 @@
     "plugins": [
 		"https://downloads.wordpress.org/plugin/woocommerce.latest-stable.zip",
 		"https://github.com/WP-API/Basic-Auth/archive/master.zip",
+		"./tests/e2e/bin/test-data.php",
         "."
     ],
+    "mappings": {
+        "wp-cli.yml": "./tests/e2e/config/wp-cli.yml"
+    },
 	"lifecycleScripts": {
         "afterStart": "./tests/e2e/bin/test-env-setup.sh",
         "afterClean": "./tests/e2e/bin/test-env-setup.sh"

README.md

@@ -135,11 +135,14 @@ The tests will execute and you'll be presented with a summary.
 
 ## E2E Testing
 
-E2E testing uses [@woocommerce/e2e-environment](https://www.npmjs.com/package/@woocommerce/e2e-environment) which requires [Docker](https://www.docker.com/).
+E2E testing uses [wp-env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) which requires [Docker](https://www.docker.com/).
 
 Make sure Docker is running in your machine, and run the following:
 
-`npm run docker:up` - This will automatically download and run WordPress in a Docker container. You can access it at http://localhost:8084 (Username: admin, Password: password).
+`npm run wp-env:up` - This will automatically download and run WordPress in a Docker container. You can access it at http://localhost:8889 (Username: admin, Password: password).
+
+To install the PlayWright browser locally you can run:
+`npx playwright install chromium`
 
 Run E2E testing:
 
@@ -152,10 +155,6 @@ To remove the Docker container and images (this will **delete everything** in th
 
 :warning: Currently, the E2E testing on GitHub Actions is only run automatically after opening a PR with `release/*` branches or pushing changes to `release/*` branches. To run it manually, please visit [here](../../actions/workflows/e2e-tests.yml) and follow [this instruction](https://docs.github.com/en/actions/managing-workflow-runs/manually-running-a-workflow?tool=webui) to do so.
 
-### Linux Troubleshooting
-
-If you encounter problems starting your `test:e2e`, like `No usable sandbox!` or `UnhandledPromiseRejectionWarning: Error: Page crashed!`, you may try disabling the Chromium sandbox by adding `--no-sandbox` to `launch.args` in [`/tests/e2e/config/jest-puppeteer.config.js#L7`](https://github.com/woocommerce/google-listings-and-ads/blob/develop/tests/e2e/config/jest-puppeteer.config.js#L7).
-
 ## Docs
 
 - [Usage Tracking](./src/Tracking/README.md)

jest.config.js

@@ -52,4 +52,5 @@ module.exports = {
 			timeFormat: 'g:i a',
 		},
 	},
+	timers: 'fake',
 };