Feature/e2e tests workflow

.github/workflows/e2e-tests.yml

@@ -1,39 +1,81 @@
 name: E2E Tests
+
 on:
-  push:
-    branches:
-      - main
+  workflow_dispatch:
+  pull_request:
+
+# Cancels all previous workflow runs for pull requests that have not completed.
+concurrency:
+  # The concurrency group contains the workflow name and the branch name for pull requests
+  # or the commit hash for any other events.
+  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+  cancel-in-progress: true
+
 
 jobs:
-  playwright:
-    name: Playwright Tests
+  e2e-tests:
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      # matrix:
+      #     node: ['14']
+
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-
-      - name: Log debug information
-        run: |
-          npm --version
-          node --version
-          git --version
-          php --version
-          composer --version
-
-      - name: Install NodeJS
-        uses: actions/setup-node@v2
-        with:
-            node-version-file: '.nvmrc'
-
-      - name: NPM install
-        run: npm ci --legacy-peer-deps
-
-      - name: Playwright install
-        run: npx playwright install --with-deps
-
-      - name: Run Playwright
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          WP_ADMIN_PASSWORD: ${{ secrets.WP_ADMIN_PASSWORD }}
-        run: npm run test:e2e
-        if: ${{ success() || failure() }}
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - uses: actions/cache@v4
+      id: playwright-cache
+      with:
+        path: |
+          ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+
+    - name: Setup Node
+      uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+        # Enable built-in functionality for caching and restoring dependencies, which is disabled by default.
+        # The actions/setup-node uses actions/cache under the hood.
+        # https://github.com/actions/setup-node#caching-global-packages-data
+        cache: 'npm'
+
+
+    # Restoring the short lived node_modules cache
+    # to be used accross all workflows running on the last commit.
+    # https://github.com/actions/cache/blob/main/caching-strategies.md#creating-a-short-lived-cache
+    - uses: actions/cache/restore@v4
+      id: node_modules-cache
+      with:
+        path: |
+          ./node_modules
+        key: ${{ runner.os }}-node_modules-${{ github.sha }}-${{ hashFiles('package-lock.json') }}
+
+    - name: NPM install
+      if: steps.node_modules-cache.outputs.cache-hit != 'true'
+      run: npm ci --legacy-peer-deps
+
+    # Creating a short lived node_modules cache
+    - uses: actions/cache/save@v4
+      if: steps.node_modules-cache.outputs.cache-hit != 'true'
+      with:
+        path: |
+          ./node_modules
+        key: ${{ steps.node_modules-cache.outputs.cache-primary-key }}
+
+    - name: Install Playwright dependencies
+      run: npx playwright install --with-deps
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+    - run: npx playwright install-deps
+      if: steps.playwright-cache.outputs.cache-hit == 'true'
+
+    - name: Starting Playwright & Running the tests
+      run: |
+            npm run test:e2e
+
+    - name: Retain failed test results
+      uses: actions/upload-artifact@v3
+      if: failure()
+      with:
+        name: test-results-matrix-less-debugging
+        path: artifacts/test-results/

docs/contributor/e2e-tests/README.md

@@ -0,0 +1,30 @@
+# e2e testing
+
+GatherPress allows to run automated and manual end-to-end tests, while sharing the same, `wp-env` based, setup.
+
+## Automated tests 
+
+Check the results of the _e2e-tests action workflow_ at  `https://github.com/GatherPress/gatherpress/actions/workflows/e2e-tests.yml`.
+
+## Manual testing
+
+0. Have `node` installed
+1. Have `docker` running
+2. Open the plugin folder in a terminal
+3. _Choose one of the following options_
+   - Run Playwright normally
+      ```
+      npm run test:e2e
+      ```
+
+   - Run Playwright visually (and change what's happening)
+      ```
+      npm run test:e2e:ui
+      ```
+      ![grafik](https://github.com/user-attachments/assets/1627dff7-363e-447e-9981-adac610ac888)
+
+   - Run Playwright in debugging mode (and record what's happening)
+      ```
+      npm run test:e2e:debug
+      ```
+   - Run Tests independently _AND_ visually using the [Playwright VSCode extension](https://playwright.dev/docs/getting-started-vscode)

package.json

@@ -29,7 +29,12 @@
 		"screenshots:wporg": "wp-scripts test-playwright --config .github/scripts/wordpress-org-screenshots/playwright.config.ts",
 		"screenshots:wporg:debug": "wp-scripts test-playwright --config .github/scripts/wordpress-org-screenshots/playwright.config.ts --debug",
 		"screenshots:wporg:ui": "wp-scripts test-playwright --config .github/scripts/wordpress-org-screenshots/playwright.config.ts --ui",
-		"test:e2e": "playwright test --config=playwright.config.js",
+		"pretest:e2e": "wp-scripts build && wp-env start",
+		"pretest:e2e:debug": "wp-scripts build && wp-env start",
+		"pretest:e2e:ui": "wp-scripts build && wp-env start",
+		"test:e2e": "wp-scripts test-playwright --config test/e2e/playwright.config.ts",
+		"test:e2e:debug": "wp-scripts test-playwright --config test/e2e/playwright.config.ts --debug",
+		"test:e2e:ui": "wp-scripts test-playwright --config test/e2e/playwright.config.ts --ui",
 		"test:unit:js": "wp-scripts test-unit-js --coverage --testResultsProcessor=jest-sonar-reporter",
 		"pretest:unit:php": "wp-env start --xdebug",
 		"test:unit:php": "wp-env run tests-wordpress php -dxdebug.mode=coverage /var/www/html/wp-content/plugins/gatherpress/vendor/bin/phpunit -c /var/www/html/wp-content/plugins/gatherpress/phpunit.xml.dist --coverage-clover=coverage.xml --coverage-html=build/coverage-report",

test/e2e/playwright.config.ts

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * WordPress dependencies
+ * 
+ * Playwright default configuration, that is used & provided by Gutenberg.
+ * https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/config/playwright.config.js
+ */
+// using Object Rest Spread operator magic
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+// const { use, ...baseConfig} = require( '@wordpress/scripts/config/playwright.config' );
+const { ...baseConfig} = require( '@wordpress/scripts/config/playwright.config' );
+
+export default defineConfig({
+    ...baseConfig,
+
+    // This directory holds all the test files.
+    // https://playwright.dev/docs/api/class-testconfig#test-config-test-dir
+    //
+    // IDEA: Maybe this should be set to "../../src/"
+    // where the test files would be housed directly with their components, blocks, etc.
+    testDir: 'tests',
+
+	// Configure projects for major browsers
+    // We can test on different or multiple browsers if needed.
+    // https://playwright.dev/docs/test-projects#configure-projects-for-multiple-browsers
+    projects: [
+		{
+		  name: "chromium",
+		  use: { ...devices["Desktop Chrome"] },
+		},
+
+		// {
+		// 	name: 'firefox',
+		// 	use: { ...devices['Desktop Firefox'] },
+		// },
+
+		// {
+		// 	name: 'webkit',
+		// 	use: { ...devices['Desktop Safari'] },
+		// },
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		// 	name: 'Microsoft Edge',
+		// 	use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		// 	name: 'Google Chrome',
+		// 	use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+});