Setup playwright

Co-authored-by: mikel.martin@gmail.com <mikel.martin@gmail.com>

.gitattributes

@@ -5,6 +5,9 @@
 docker-compose.yml export-ignore
 docker-compose.override.sample.yml export-ignore
 README.md export-ignore
+package.json export-ignore
+package-lock.json export-ignore
+playwright.config.js export-ignore
 
 # Exclude specific directories
 .github export-ignore
@@ -14,6 +17,7 @@ bin export-ignore
 docker-entrypoint-init.d export-ignore
 .docker export-ignore
 .github export-ignore
+tests-e2e export-ignore
 
 # Exclude scripts
 *.sh export-ignore

.gitignore

@@ -5,4 +5,11 @@ docker-compose.override.yml
 .env
 default.vcl
 id_rsa
-.magento-src
+.magento-src
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

bin/playwright

@@ -0,0 +1,41 @@
+#!/bin/bash
+BASEDIR="$(dirname $(realpath $0))/.."
+
+cd "${BASEDIR}" || exit
+set -o allexport
+source .env
+set +o allexport
+
+if [ -z "$PUBLIC_URL" ]; then
+	PUBLIC_URL="$M2_URL"
+fi
+
+wait_for() {
+	local retry=60
+	local timeout=1
+	local start=$(date +%s)
+
+	while [ $(($(date +%s) - $start)) -lt $retry ]; do
+		if "$@" > /dev/null 2>&1; then
+			return 0
+		fi
+		sleep $timeout
+	done
+	return 1
+}
+echo "🚀 Waiting for ngrok tunnel to be ready..."
+result=$(wait_for curl -H "ngrok-skip-browser-warning: 1" -s -o /dev/null --head --fail "${PUBLIC_URL}")
+if [ "$result" == "1" ]; then
+	echo "❌ Magento is not available at: ${PUBLIC_URL}"
+	exit 1
+fi
+echo "✅ Magento is available at: ${PUBLIC_URL}"
+
+# Check if --headed is passed
+if [[ "$@" == *"--headed"* || "$@" == *"--ui"* ]]; then
+    npx playwright test $@
+else
+    docker run \
+    --env-file "${BASEDIR}"/.env \
+    -it --rm -v "${BASEDIR}":/app -w /app mcr.microsoft.com/playwright:v1.49.1-jammy bash -c "npx playwright test $@"
+fi

composer.json

@@ -51,7 +51,11 @@
             "docker-compose.yml",
             "README.md",
             "setup.sh",
-            "teardown.sh"
+            "teardown.sh",
+            "tests-e2e",
+            "package.json",
+            "package-lock.json",
+            "playwright.config.js"
         ]
     },
     "require-dev": {

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "magento2-core",
+  "version": "1.0.0",
+  "description": "1. [About seQura](#about-sequra) 2. [Installation guide](https://sequra.atlassian.net/wiki/spaces/DOC/pages/1377304583/MAGENTO+2) 3. [Sign-up](#sign-up) 4. [For developers](#for-developers)",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "@types/node": "^22.10.7"
+  }
+}

playwright.config.js

@@ -0,0 +1,45 @@
+// @ts-check
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './tests-e2e/specs',
+  timeout: 5 * 60 * 1000, // 5 minutes
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: 0,
+  /* Opt out of parallel tests on CI. */
+  workers: 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI ? 'dot' : 'list',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.PUBLIC_URL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'example',
+      use: { ...devices['Desktop Chrome'] },
+      testMatch: 'example.spec.js',
+    },
+  ],
+});
+

tests-e2e/specs/example.spec.js

@@ -0,0 +1,19 @@
+// @ts-check
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});