tests: Setup E2E testing with playwright (#107)

* feat: add `.wp-env.json`

* feat: update `playwright.config.js` with setup and teardown

* feat: scaffold the `e2e-tests` package

* feat: add e2e-test utils

* feat: add an example test

* refactor: ignore `n/no-process-env` and `no-console` for e2e-tests/utils

* chore: delete .gitkeep

* chore: update package and package-lock

* feat: add `test:e2e:headed` command

* fix: update snapwp-helper download path to latest

* refactor: change theme to twentytwentyfive

* refactor: convert into utility functions

* refactor: add setup

* refactor: projects in playwright config

* refactor: retry for `n` attempts in `waitForServer`

* chore: update .gitignore

* feat: add `setupSnapWPHelper`

* feat: add `startProxyRegistry`

* feat: add `cleanup` function

* refactor: call `startProxyRegistry` in `setupNextApp`

* refactor: call `setupSnapWPHelper` in `setupWordPress`

* refactor: call `cleanup` if `setup` fails

* refactor: use `cleanup` in `teardown`

* refactor: use local snapwp-helper in `wp-env.json`

* chore: add test-app and snapwp-helper to .gitignore

* chore: format

* refactor: `waitForServer`

* fix: remove unnecessary build step

* chore: add changelog

* Apply suggestions from code review

---------

Co-authored-by: Dovid Levine <[email protected]>
Co-authored-by: Dovid Levine <[email protected]>

Author: Swanand01

.changeset/sweet-mangos-help.md

@@ -0,0 +1,5 @@
+---
+"@snapwp/e2e-tests": patch
+---
+
+tests: Setup E2E testing with Playwright

.eslintrc.cjs

@@ -138,5 +138,12 @@ module.exports = {
 				project: true,
 			},
 		},
+		{
+			files: [ '**/packages/e2e-tests/src/utils/*.ts' ],
+			rules: {
+				'n/no-process-env': 'off',
+				'no-console': 'off',
+			},
+		},
 	],
 };

.gitignore

@@ -34,3 +34,7 @@ coverage
 
 # Build output
 dist/
+
+# E2E test files
+test-app/
+snapwp-helper/

.wp-env.json

@@ -0,0 +1,17 @@
+{
+	"core": null,
+	"plugins": [
+		"https://downloads.wordpress.org/plugin/wp-graphql.zip",
+		"https://github.com/wpengine/wp-graphql-content-blocks/releases/latest/download/wp-graphql-content-blocks.zip",
+		"./snapwp-helper"
+	],
+	"themes": [ "https://downloads.wordpress.org/theme/twentytwentyfive.zip" ],
+	"config": {
+		"WP_DEBUG": true,
+		"SCRIPT_DEBUG": true,
+		"WP_DEBUG_LOG": true,
+		"WP_DEBUG_DISPLAY": false,
+		"WP_ENVIRONMENT_TYPE": "local",
+		"GRAPHQL_DEBUG": true
+	}
+}

config/playwright.config.js

@@ -1,28 +1,29 @@
 import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig( {
-	testDir: '../e2e-tests',
+	testDir: '../packages/e2e-tests/src',
 	fullyParallel: true,
 	forbidOnly: !! process.env.CI,
 	retries: process.env.CI ? 2 : 0,
 	workers: process.env.CI ? 1 : undefined,
-	reporter: 'html',
+	reporter: process.env.CI ? 'dot' : 'list',
 	use: {
 		trace: 'on-first-retry',
 	},
-
 	projects: [
+		{
+			name: 'setup wordpress and next app',
+			testMatch: /setup\.ts/,
+			teardown: 'teardown',
+		},
 		{
 			name: 'chromium',
 			use: { ...devices[ 'Desktop Chrome' ] },
+			dependencies: [ 'setup wordpress and next app' ],
+		},
+		{
+			name: 'teardown',
+			testMatch: /teardown\.ts/,
 		},
 	],
-
-	/* Run local dev server before starting the tests */
-	// TODO: This should be implemented after scaffolding the next app.
-	// webServer: {
-	//   command: 'npm run start',
-	//   url: 'http://127.0.0.1:3000',
-	//   reuseExistingServer: !process.env.CI,
-	// },
 } );