Add Playwright e2e test suite ready for incremental migration and vis…

…ual regression testing (#7671)

Co-authored-by: Ismael Martín Alabarce <[email protected]>
Co-authored-by: Jordan Bordonado <[email protected]>
Co-authored-by: Vasily Belolapotkov <[email protected]>
Co-authored-by: Achyuth Ajoy <[email protected]>

.github/actions/e2e-pw/run-log-tests/action.yml

@@ -0,0 +1,17 @@
+name: 'Run Tests'
+description: 'Runs Playwright E2E tests'
+
+runs:
+    using: 'composite'
+    steps:
+        - name: First Run Playwright E2E Tests
+          id: first_run_e2e_pw_tests
+          # Use +e to trap errors when running E2E tests.
+          shell: /bin/bash +e {0}
+          run: npm run test:e2e-pw-ci
+        - uses: actions/upload-artifact@v3
+          if: always()
+          with:
+              name: playwright-report
+              path: playwright-report/
+              retention-days: 7

.github/workflows/e2e-pw-pull-request.yml

@@ -0,0 +1,74 @@
+name: E2E Playwright Tests - Pull Request
+
+on:
+    pull_request:
+        branches:
+            - develop
+            - trunk
+    workflow_dispatch:
+    workflow_call:
+        inputs:
+            wcpay-use-build-artifact:
+                type: boolean
+                required: false
+                default: false
+            repo-branch:
+                type: string
+                required: false
+                description: 'Branch to be used for running tests'
+
+env:
+    E2E_GH_TOKEN: ${{ secrets.E2E_GH_TOKEN }}
+    WCP_DEV_TOOLS_REPO: ${{ secrets.WCP_DEV_TOOLS_REPO }}
+    WCP_DEV_TOOLS_BRANCH: 'trunk'
+    WCP_SERVER_REPO: ${{ secrets.WCP_SERVER_REPO }}
+    WC_SUBSCRIPTIONS_REPO: ${{ secrets.WC_SUBSCRIPTIONS_REPO }}
+    E2E_BLOG_ID: ${{ secrets.E2E_BLOG_ID }}
+    E2E_BLOG_TOKEN: ${{ secrets.E2E_BLOG_TOKEN }}
+    E2E_USER_TOKEN: ${{ secrets.E2E_USER_TOKEN }}
+    WC_E2E_SCREENSHOTS: 1
+    E2E_SLACK_CHANNEL: ${{ secrets.E2E_SLACK_CHANNEL }}
+    E2E_SLACK_TOKEN: ${{ secrets.E2E_SLACK_TOKEN }}
+    E2E_USE_LOCAL_SERVER: false
+    E2E_RESULT_FILEPATH: 'tests/e2e/results.json'
+    WCPAY_USE_BUILD_ARTIFACT: ${{ inputs.wcpay-use-build-artifact }}
+    WCPAY_ARTIFACT_DIRECTORY: 'zipfile'
+    NODE_ENV: 'test'
+    FORCE_E2E_DEPS_SETUP: true
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.ref }}
+    cancel-in-progress: true
+
+jobs:
+    wcpay-e2e-tests:
+        runs-on: ubuntu-latest
+
+        name: WC - latest
+
+        env:
+            E2E_WP_VERSION: 'latest'
+            E2E_WC_VERSION: 'latest'
+
+        steps:
+            - name: Checkout WCPay repository
+              uses: actions/checkout@v4
+              with:
+                  ref: ${{ inputs.repo-branch || github.ref }}
+
+            - name: 'Download WooCommerce Payments build file'
+              if: ${{ inputs.wcpay-use-build-artifact }}
+              uses: actions/download-artifact@v4
+              with:
+                  name: woocommerce-payments
+                  path: ${{ env.WCPAY_ARTIFACT_DIRECTORY }}
+
+            - name: Setup E2E environment
+              uses: ./.github/actions/e2e/env-setup
+
+            - name: Install Playwright
+              shell: bash
+              run: npx playwright install chromium
+
+            - name: Run tests, upload screenshots & logs
+              uses: ./.github/actions/e2e-pw/run-log-tests

.gitignore

@@ -87,5 +87,12 @@ tests/e2e/screenshots
 # E2E Performance test results
 tests/e2e/reports
 
+# E2E Playwright
+/playwright-report/
+/blob-report/
+tests/e2e-pw/.auth/
+tests/e2e-pw/test-results/
+tests/e2e-pw/playwright/.cache/
+tests/e2e-pw/tests/e2e-pw/.auth/*
 # Slate docs
 docs/rest-api/build/*

changelog/try-playwright-e2e-tests

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add Playwright e2e test suite ready for incremental migration and visual regression testing

package.json

@@ -37,6 +37,9 @@
     "test:e2e": "NODE_CONFIG_DIR='tests/e2e/config' JEST_PUPPETEER_CONFIG='tests/e2e/config/jest-puppeteer-headless.config.js' wp-scripts test-e2e --config tests/e2e/config/jest.config.js",
     "test:e2e-dev": "NODE_CONFIG_DIR='tests/e2e/config' JEST_PUPPETEER_CONFIG='tests/e2e/config/jest-puppeteer.config.js' wp-scripts test-e2e --config tests/e2e/config/jest.config.js --puppeteer-interactive",
     "test:e2e-performance": "NODE_CONFIG_DIR='tests/e2e/config' wp-scripts test-e2e --config tests/e2e/config/jest.performance.config.js",
+    "test:e2e-pw": "./tests/e2e-pw/test-e2e-pw.sh",
+    "test:e2e-pw-ui": "./tests/e2e-pw/test-e2e-pw-ui.sh",
+    "test:e2e-pw-ci": "npx playwright test --config=tests/e2e-pw/playwright.config.ts",
     "test:update-snapshots": "npm run test:js -- --updateSnapshot",
     "test:php": "./bin/run-tests.sh",
     "test:php-coverage": "./bin/check-test-coverage.sh",
@@ -85,6 +88,7 @@
   "devDependencies": {
     "@automattic/color-studio": "2.3.1",
     "@jest/test-sequencer": "29.5.0",
+    "@playwright/test": "1.43.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "11.2.5",
@@ -93,6 +97,7 @@
     "@types/canvas-confetti": "1.6.4",
     "@types/intl-tel-input": "17.0.4",
     "@types/lodash": "4.14.170",
+    "@types/node": "20.9.0",
     "@types/react": "17.0.2",
     "@types/react-transition-group": "4.4.6",
     "@types/wordpress__components": "19.10.5",