INF-956/feat: add Playwright e2e tests for WooCommerce checkout with Two payment

Author: brtkwr

.github/workflows/e2e-tests.yaml

@@ -0,0 +1,87 @@
+name: E2E Tests
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  id-token: write
+
+concurrency:
+  group: e2e-tests-${{ github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  e2e-tests:
+    runs-on: ${{ vars.RUNNER_STANDARD }}
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Authenticate to Google Cloud
+        id: gcp-auth
+        uses: google-github-actions/auth@v2
+        with:
+          token_format: access_token
+          service_account: ${{ vars.GCP_E2E_TESTS_SA_NAME_TWO_BETA }}
+          workload_identity_provider: ${{ vars.WORKLOAD_IDENTITY_PROVIDER_PREFIX_TWO_BETA }}/${{ github.event.repository.name }}
+
+      - name: Set up Google Cloud SDK
+        uses: google-github-actions/setup-gcloud@v2
+
+      - name: Fetch merchant API key
+        id: secrets
+        run: |
+          MERCHANT_API_KEY=$(gcloud secrets versions access latest --secret="STAGING_SHOP_MERCHANT_API_KEY_TILLITTESTUK" --project=two-beta)
+          echo "::add-mask::$MERCHANT_API_KEY"
+          echo "MERCHANT_API_KEY=$MERCHANT_API_KEY" >> $GITHUB_OUTPUT
+
+      - name: Generate Docker plugin config
+        run: |
+          mkdir -p docker/config
+          sed "s|\${MERCHANT_API_KEY}|${MERCHANT_API_KEY}|g" docker/config/staging-tillittestuk.json.tpl > docker/config/staging-tillittestuk.json
+        env:
+          MERCHANT_API_KEY: ${{ steps.secrets.outputs.MERCHANT_API_KEY }}
+
+      - name: Start WordPress
+        run: docker compose up -d
+
+      - name: Wait for WordPress to be ready
+        run: |
+          for i in $(seq 1 60); do
+            if curl -sf http://localhost:8888/ > /dev/null 2>&1; then
+              echo "WordPress is ready"
+              break
+            fi
+            echo "Waiting for WordPress... ($i/60)"
+            sleep 5
+          done
+          curl -sf http://localhost:8888/ > /dev/null || (echo "WordPress failed to start" && docker compose logs && exit 1)
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - name: Install e2e dependencies
+        working-directory: tests/e2e
+        run: npm ci && npx playwright install --with-deps chromium
+
+      - name: Run e2e tests
+        working-directory: tests/e2e
+        run: npx playwright test
+        env:
+          MERCHANT_API_KEY: ${{ steps.secrets.outputs.MERCHANT_API_KEY }}
+
+      - name: Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: tests/e2e/test-results/
+          retention-days: 7
+
+      - name: Stop WordPress
+        if: always()
+        run: docker compose down

.gitignore

@@ -27,3 +27,7 @@ vendor/
 coverage/
 .phpunit.result.cache
 .phpunit.cache/
+
+# Playwright
+tests/e2e/test-results/
+tests/e2e/playwright-report/

Makefile

@@ -14,3 +14,12 @@ bumpver-%:
 patch: bumpver-patch
 minor: bumpver-minor
 major: bumpver-major
+
+e2e-install:
+	cd tests/e2e && npm install && npx playwright install chromium
+
+e2e-test:
+	cd tests/e2e && npx playwright test
+
+e2e-test-headed:
+	cd tests/e2e && npx playwright test --headed

docker/config/staging-tillittestuk.json.tpl

@@ -0,0 +1,21 @@
+{
+  "enabled": "yes",
+  "title": "Business invoice %s days",
+  "subtitle": "Receive the invoice via PDF and email",
+  "test_checkout_host": "https://api.staging.two.inc",
+  "clear_options_on_deactivation": "no",
+  "section_api_credentials": "",
+  "api_key": "${MERCHANT_API_KEY}",
+  "section_checkout_options": "",
+  "enable_order_intent": "yes",
+  "add_field_department": "yes",
+  "add_field_project": "yes",
+  "add_field_purchase_order_number": "yes",
+  "add_field_invoice_email": "yes",
+  "show_abt_link": "yes",
+  "invoice_fee_to_buyer": "no",
+  "section_auto_complete_settings": "",
+  "enable_company_search": "yes",
+  "enable_company_search_for_others": "yes",
+  "enable_address_lookup": "yes"
+}

docker/wpcli.sh

@@ -13,10 +13,12 @@ until [ $counter -gt 4 ]; do
   random_price=$(shuf -i 100-200 -n 1)
   wp media import 'https://picsum.photos/600/400.jpg' --post_id=$product_id --title="Image for Product ${counter}" --featured_image
   wp post meta set $product_id _price $random_price
+  wp post meta set $product_id _regular_price $random_price
+  wp post meta set $product_id _stock_status instock
   counter=$(($counter + 1))
 done
 wp option update permalink_structure /%year%/%monthnum%/%day%/%postname%/
-#wp plugin activate tillit-payment-gateway
+wp plugin activate tillit-payment-gateway
 wp option update woocommerce_woocommerce-gateway-tillit_settings --format=json </opt/tillit-payment-gateway/${WOOCOM_PLUGIN_CONFIG_JSON:-docker/config/local.json}
 wp option update woocommerce_currency $WOOCOM_CURRENCY
 wp option update woocommerce_default_country $WOOCOM_DEFAULT_COUNTRY

docs/e2e-test-plan.md

@@ -0,0 +1,74 @@
+# INF-956: WooCommerce Plugin E2E Tests
+
+Linear: https://linear.app/tillit/issue/INF-956
+
+## Context
+
+WooCommerce e2e tests were deleted from the e2e-tests repo during the API migration (INF-940). They now live in the woocommerce-plugin repo, running against the local Docker dev environment (WordPress + WooCommerce + Two plugin at localhost:8888).
+
+Tests focus on plugin-specific behaviour: WooCommerce store checkout with Two payment, order lifecycle through WP admin, and Two API state verification.
+
+## Docker environment
+
+- Store: `http://localhost:8888` (Storefront theme, NL, EUR)
+- Admin: `http://localhost:8888/wp-admin` (admin / twoinb2b)
+- Products: "Product 1"–"Product 4", random prices 100–200
+- Plugin config: `docker/config/staging-tillittestuk.json` → `api.staging.two.inc`
+- Merchant: tillittestuk (UK, org 13078389) — has merchant-wide `skip_verification` rule
+
+## Checklist
+
+### Docker bootstrap
+
+- [x] **`docker/wpcli.sh`**: Uncomment plugin activation (line 19)
+- [x] Add `_regular_price` and `_stock_status` meta so products display correctly in Storefront
+
+### Test infrastructure (`tests/e2e/`)
+
+- [x] `package.json` — Playwright Test, TypeScript
+- [x] `playwright.config.ts` — chromium, baseURL localhost:8888, trace/video on failure
+- [x] `config.ts` — reads `MERCHANT_API_KEY` from env var, defaults to staging Two API
+- [x] `checkout-api.ts` — Two API client (get order state, verify, confirm, cancel)
+- [x] `docker/config/staging-tillittestuk.json.tpl` — template for Docker plugin config, populated at CI time
+
+### Page objects
+
+- [x] `pages/store.ts` — add product to cart, go to checkout
+- [x] `pages/checkout.ts` — select Two payment, company search (Select2), billing details, place order
+- [x] `pages/wp-admin.ts` — login, navigate to orders, change status, refund
+
+### Tests
+
+- [x] `tests/order-flow.spec.ts` — place order → verify CONFIRMED → fulfil via WP admin → verify FULFILLED → refund → verify REFUNDED
+- [x] `tests/cancel-order.spec.ts` — place order → cancel via WP admin → verify CANCELLED
+- [x] `tests/max-limit.spec.ts` — excessive quantity → rejection on checkout
+
+### CI/CD
+
+- [x] `.github/workflows/e2e-tests.yaml` — GCP auth via WIF, fetch API key from Secret Manager, generate Docker config, start WordPress, run Playwright tests, upload artifacts on failure
+- [x] Makefile targets: `e2e-install`, `e2e-test`, `e2e-test-headed`
+
+### Infrastructure
+
+- [x] Generated new API key for tillittestuk merchant via `POST /admin/v1/merchant/{id}/api_key`
+- [x] Stored as `STAGING_SHOP_MERCHANT_API_KEY_TILLITTESTUK` in GCP Secret Manager (two-beta)
+- [x] `GCP_E2E_TESTS_SA_NAME_TWO_BETA` org var: added woocommerce-plugin to selected repos
+- [x] `WORKLOAD_IDENTITY_PROVIDER_PREFIX_TWO_BETA` org var: changed from "private" to "selected", added e2e-tests + woocommerce-plugin
+- [ ] Verify CI passes end-to-end
+
+## Running locally
+
+```bash
+docker compose up -d
+# wait for wpcli to finish bootstrapping (~60s)
+make e2e-install
+MERCHANT_API_KEY=secret_test_xxx make e2e-test
+```
+
+The API key comes from your local `docker/config/staging-tillittestuk.json` (gitignored). In CI it's fetched from GCP Secret Manager.
+
+## Out of scope
+
+- Identity verification / SCA flow (covered in e2e-tests repo)
+- Merchant portal tests (covered in e2e-tests repo)
+- Multi-country support (single NL environment)

tests/e2e/checkout-api.ts

@@ -0,0 +1,59 @@
+import { API_BASE_URL, API_KEY } from "./config.js";
+
+const headers = {
+  "X-API-Key": API_KEY,
+  "Content-Type": "application/json",
+};
+
+export async function getOrder(orderId: string): Promise<Record<string, unknown>> {
+  const res = await fetch(`${API_BASE_URL}/v1/order/${orderId}`, { headers });
+  if (!res.ok) throw new Error(`get order failed: ${res.status}`);
+  return res.json();
+}
+
+export async function getOrderState(orderId: string): Promise<string> {
+  const order = await getOrder(orderId);
+  return order.status as string;
+}
+
+export async function waitForOrderState(
+  orderId: string,
+  expectedState: string,
+  timeoutMs = 30_000,
+  intervalMs = 3_000
+): Promise<void> {
+  const deadline = Date.now() + timeoutMs;
+  let lastState = "";
+  while (Date.now() < deadline) {
+    lastState = await getOrderState(orderId);
+    if (lastState === expectedState) return;
+    await new Promise((r) => setTimeout(r, intervalMs));
+  }
+  throw new Error(`Order ${orderId} did not reach ${expectedState} within ${timeoutMs}ms (last: ${lastState})`);
+}
+
+export async function verifyOrder(orderId: string): Promise<string> {
+  const res = await fetch(`${API_BASE_URL}/test/verify_order/${orderId}`, {
+    method: "POST",
+    headers,
+  });
+  if (!res.ok) throw new Error(`verify order failed: ${res.status}`);
+  const data = await res.json();
+  return data.merchant_confirmation_url ?? "";
+}
+
+export async function confirmOrder(orderId: string): Promise<void> {
+  const res = await fetch(`${API_BASE_URL}/v1/order/${orderId}/confirm`, {
+    method: "POST",
+    headers,
+  });
+  if (!res.ok) throw new Error(`confirm order failed: ${res.status}`);
+}
+
+export async function cancelOrder(orderId: string): Promise<void> {
+  const res = await fetch(`${API_BASE_URL}/v1/order/${orderId}/cancel`, {
+    method: "POST",
+    headers,
+  });
+  if (!res.ok) throw new Error(`cancel order failed: ${res.status}`);
+}

tests/e2e/config.ts

@@ -0,0 +1,14 @@
+export const STORE_URL = "http://localhost:8888";
+export const ADMIN_URL = `${STORE_URL}/wp-admin`;
+export const ADMIN_USER = "admin";
+export const ADMIN_PASSWORD = "twoinb2b";
+
+export const API_BASE_URL = process.env.TWO_API_BASE_URL ?? "https://api.staging.two.inc";
+export const API_KEY = process.env.MERCHANT_API_KEY ?? "";
+
+export const BUYER_COMPANY = "Booking.com B.V.";
+export const RECIPIENT_EMAIL = "bot@two.inc";
+export const PHONE_NUMBER = "+31612345678";
+
+export const DEFAULT_TIMEOUT = 15_000;
+export const LONG_TIMEOUT = 60_000;

tests/e2e/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "woocommerce-plugin-e2e",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.0",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.7.0"
+  }
+}

tests/e2e/pages/checkout.ts

@@ -0,0 +1,53 @@
+import { type Page, expect } from "@playwright/test";
+
+import { BUYER_COMPANY, LONG_TIMEOUT, PHONE_NUMBER, RECIPIENT_EMAIL } from "../config.js";
+
+export async function selectTwoPayment(page: Page) {
+  const radio = page.locator("#payment_method_woocommerce-gateway-tillit");
+  await radio.waitFor({ state: "visible" });
+  await radio.check();
+}
+
+export async function fillCompanySearch(page: Page, companyName = BUYER_COMPANY) {
+  const container = page.locator("#select2-billing_company_display-container");
+  await container.waitFor({ state: "visible" });
+  await container.click();
+
+  const searchInput = page.locator(".select2-search__field");
+  await searchInput.fill(companyName);
+
+  const result = page.locator(".select2-results__option:not(.select2-results__message)").first();
+  await result.waitFor({ state: "visible", timeout: LONG_TIMEOUT });
+  await result.click();
+
+  await expect(page.locator("#billing_address_1")).not.toBeEmpty();
+}
+
+export async function fillBillingDetails(page: Page, firstName: string, lastName: string) {
+  await page.locator("#billing_first_name").fill(firstName);
+  await page.locator("#billing_last_name").fill(lastName);
+  await page.locator("#billing_email").fill(RECIPIENT_EMAIL);
+  await page.locator("#billing_phone").fill(PHONE_NUMBER);
+}
+
+export async function placeOrder(page: Page): Promise<string> {
+  const responsePromise = page.waitForResponse(
+    (r) => r.url().includes("/v1/user/verify-order/"),
+    { timeout: LONG_TIMEOUT }
+  );
+
+  await page.locator("#place_order").click();
+
+  const response = await responsePromise;
+  const data = await response.json();
+  const orderId: string = data.order_id;
+
+  await page.waitForLoadState("load");
+  await expect(page).toHaveURL(/\/checkout\/order-received\/|\/order-received\//, { timeout: LONG_TIMEOUT });
+
+  return orderId;
+}
+
+export async function expectRejection(page: Page) {
+  await expect(page.locator(".twoinc-pay-box").getByText(/unavailable/i)).toBeVisible({ timeout: LONG_TIMEOUT });
+}