Experiment with playwright testing

.github/workflows/ci.yml

@@ -165,3 +165,9 @@ jobs:
     needs: build
     uses: ./.github/workflows/e2e.yml
     secrets: inherit
+
+  playwright:
+    if: github.ref_name != 'i18n/crowdin'
+    needs: build
+    uses: ./.github/workflows/playwright.yml
+    secrets: inherit

.github/workflows/playwright.yml

@@ -0,0 +1,232 @@
+name: Playwright E2E
+
+on:
+  workflow_call:
+
+env:
+  TZ: UTC
+  OC_ENV: ci
+  NODE_ENV: test
+  WEBSITE_URL: http://localhost:3000
+  IMAGES_URL: http://localhost:3001
+  PDF_SERVICE_URL: http://localhost:3002
+  API_URL: http://localhost:3060
+  API_KEY: dvl-1510egmf4a23d80342403fb599qd
+  CI: true
+
+  E2E_TEST: 1
+  PGHOST: localhost
+  PGUSER: postgres
+  GITHUB_CLIENT_ID: ${{ secrets.GH_CLIENT_ID }}
+  GITHUB_CLIENT_SECRET: ${{ secrets.GH_CLIENT_SECRET }}
+  FRONTEND_FOLDER: /home/runner/work/opencollective-frontend/opencollective-frontend
+  API_FOLDER: /home/runner/work/opencollective-frontend/opencollective-frontend/opencollective-api
+  IMAGES_FOLDER: /home/runner/work/opencollective-frontend/opencollective-frontend/opencollective-images
+  PDF_FOLDER: /home/runner/work/opencollective-frontend/opencollective-frontend/opencollective-pdf
+  TERM: xterm
+  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+  STRIPE_WEBHOOK_KEY: ${{ secrets.STRIPE_WEBHOOK_KEY }}
+  STRIPE_WEBHOOK_SIGNING_SECRET: ${{ secrets.STRIPE_WEBHOOK_SIGNING_SECRET }}
+  AWS_KEY: ${{ secrets.AWS_KEY }}
+  AWS_SECRET: ${{ secrets.AWS_SECRET }}
+
+jobs:
+  e2e-playwright:
+    if: github.ref_name != 'i18n/crowdin'
+
+    runs-on: ubuntu-latest
+
+    timeout-minutes: 30
+
+    services:
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
+        options: --entrypoint redis-server
+      postgres:
+        image: postgres:13.13
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: postgres
+          POSTGRES_HOST_AUTH_METHOD: trust
+        ports:
+          - 5432:5432
+        # needed because the postgres container does not provide a healthcheck
+        options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
+
+    steps:
+      - name: Update apt
+        run: sudo apt-get update || exit 0
+
+      - name: Install postgresql-client
+        run: sudo apt-get install -y postgresql-client
+
+      - name: Install graphicsmagick
+        run: sudo apt-get install -y graphicsmagick
+
+      - name: Install stripe-cli
+        run: |
+          sudo apt-get install -y wget
+          wget https://github.com/stripe/stripe-cli/releases/download/v1.13.9/stripe_1.13.9_linux_x86_64.tar.gz -O /tmp/stripe_1.13.9_linux_x86_64.tar.gz
+          sudo tar xzvf /tmp/stripe_1.13.9_linux_x86_64.tar.gz -C /bin/
+
+      - name: Checkout (frontend)
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: 'package.json'
+          cache: 'npm'
+
+      # Checkouts
+
+      - name: Set REF in env, removing the `refs/` part
+        run: |
+          echo "MATCHING_BRANCH_REF=${GITHUB_HEAD_REF-${GITHUB_REF##*/}}" >> $GITHUB_ENV
+
+      - name: Check matching branch (api)
+        id: check-matching-branch
+        uses: octokit/[email protected]
+        with:
+          route: GET /repos/{owner}/{repo}/git/ref/{ref}
+          owner: opencollective
+          repo: opencollective-api
+          ref: heads/${{ env.MATCHING_BRANCH_REF }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        continue-on-error: true
+
+      - name: Checkout (api - matching branch)
+        if: steps.check-matching-branch.outputs.status == 200
+        uses: actions/checkout@v4
+        with:
+          repository: opencollective/opencollective-api
+          path: opencollective-api
+          ref: ${{ env.MATCHING_BRANCH_REF }}
+
+      - name: Checkout (api - main)
+        if: steps.check-matching-branch.outputs.status != 200
+        uses: actions/checkout@v4
+        with:
+          repository: opencollective/opencollective-api
+          path: opencollective-api
+
+      - name: Checkout (images)
+        uses: actions/checkout@v4
+        with:
+          repository: opencollective/opencollective-images
+          path: opencollective-images
+
+      - name: Checkout (PDF)
+        uses: actions/checkout@v4
+        with:
+          repository: opencollective/opencollective-pdf
+          path: opencollective-pdf
+
+      # Prepare API
+
+      - name: Restore node_modules (api)
+        uses: actions/cache@v3
+        id: api-node-modules
+        with:
+          path: opencollective-api/node_modules
+          key: ${{ runner.os }}-api-node-modules-${{ hashFiles('opencollective-api/package-lock.json') }}
+
+      - name: Install dependencies (api)
+        working-directory: opencollective-api
+        if: steps.api-node-modules.outputs.cache-hit != 'true'
+        run: npm ci --prefer-offline --no-audit
+
+      - name: Build (api)
+        working-directory: opencollective-api
+        run: npm run build
+
+      # Prepare Images
+
+      - name: Restore node_modules (images)
+        uses: actions/cache@v3
+        id: images-node-modules
+        with:
+          path: opencollective-images/node_modules
+          key: ${{ runner.os }}-images-node-modules-${{ hashFiles('opencollective-images/package-lock.json') }}
+
+      - name: Install dependencies (images)
+        working-directory: opencollective-images
+        if: steps.images-node-modules.outputs.cache-hit != 'true'
+        run: npm ci --prefer-offline --no-audit
+
+      - name: Build (images)
+        working-directory: opencollective-images
+        run: npm run build
+
+      # Prepare PDF
+
+      - name: Restore node_modules (pdf)
+        uses: actions/cache@v3
+        id: pdf-node-modules
+        with:
+          path: opencollective-pdf/node_modules
+          key: ${{ runner.os }}-pdf-node-modules-${{ hashFiles('opencollective-pdf/package-lock.json') }}
+
+      - name: Install dependencies (pdf)
+        working-directory: opencollective-pdf
+        if: steps.pdf-node-modules.outputs.cache-hit != 'true'
+        run: npm ci --prefer-offline --no-audit
+
+      - name: Build (pdf)
+        working-directory: opencollective-pdf
+        run: npm run build
+
+      # Prepare Frontend
+
+      - name: Restore node_modules (frontend)
+        uses: actions/cache@v3
+        id: node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('package-lock.json') }}-${{ secrets.CACHE_VERSION }}
+
+      - name: Install dependencies (frontend)
+        if: steps.node-modules.outputs.cache-hit != 'true'
+        run: CYPRESS_INSTALL_BINARY=0 npm ci --prefer-offline --no-audit
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Restore .next build (frontend)
+        uses: actions/cache@v3
+        id: next-build
+        with:
+          path: .next
+          key: ${{ runner.os }}-next-build-${{ github.sha }}
+
+      - name: Restore .next cache (frontend)
+        if: steps.next-build.outputs.cache-hit != 'true'
+        uses: actions/cache@v3
+        with:
+          path: .next/cache
+          key: ${{ runner.os }}-next-cache-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-next-cache-${{ github.sha }}
+            ${{ runner.os }}-next-cache-
+
+      - name: Build (frontend)
+        if: steps.next-build.outputs.cache-hit != 'true'
+        run: npm run build
+
+      - name: Setup DB
+        run: ./scripts/setup_db.sh
+
+      - name: Run E2E with Playwright
+        run: ./scripts/run_e2e_tests.sh
+        env:
+          USE_PLAYWRIGHT: true
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -51,3 +51,6 @@ public/static/scripts/pdf.worker.min.js
 # pdfjs character maps - copied from node_modules by webpack (see next.config.js)
 public/static/cmaps
 .vercel
+/test-results/
+/playwright-report/
+/playwright/.cache/

components/contribution-flow/index.js

@@ -887,6 +887,7 @@
     const currency = tier?.amount.currency || collective.currency;
     const currentStepName = this.getCurrentStepName();
 
+    console.log({ currentStepName });
     if (currentStepName === STEPS.SUCCESS) {
       return <ContributionFlowSuccess collective={collective} />;
     }

package.json

@@ -211,6 +211,7 @@
     "@graphql-codegen/gql-tag-operations-preset": "^2.1.0",
     "@graphql-eslint/eslint-plugin": "^3.20.1",
     "@next/bundle-analyzer": "^14.0.3",
+    "@playwright/test": "^1.40.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
@@ -225,6 +226,7 @@
     "@storybook/react": "7.6.7",
     "@types/apollo-upload-client": "17.0.5",
     "@types/cookie": "^0.6.0",
+    "@types/node": "^20.10.5",
     "@types/react": "18.2.42",
     "@types/styled-components": "^5.1.32",
     "@types/styled-system": "^5.1.22",
@@ -278,6 +280,7 @@
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "pdf-parse": "^1.1.1",
+    "playwright": "^1.40.1",
     "postcss": "8.4.32",
     "prettier": "3.1.1",
     "prettier-plugin-tailwindcss": "0.5.10",