Fix Playwright implementation

opencollective · Dec 22, 2023 · 3368994 · 3368994
1 parent 828fa9a
commit 3368994
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 34 deletions.
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -1,27 +1,207 @@
-name: Playwright Tests
+name: E2E
+
 on:
-  push:
-    branches: [ main, master ]
-  pull_request:
-    branches: [ main, master ]
+  workflow_call:
+
+env:
+  TZ: UTC
+  OC_ENV: ci
+  NODE_ENV: test
+  WEBSITE_URL: http://localhost:3000
+  API_URL: http://localhost:3060
+  API_KEY: dvl-1510egmf4a23d80342403fb599qd
+  CI: true
+
+  E2E_TEST: 1
+  PGHOST: localhost
+  PGUSER: postgres
+  IMAGES_URL: http://localhost:3001
+  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
+  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:
-  test:
-    timeout-minutes: 60
+  e2e:
+    if: github.ref_name != 'i18n/crowdin'
+
     runs-on: ubuntu-latest
+
+    timeout-minutes: 30
+
+    strategy:
+      fail-fast: false
+      matrix:
+        files: ['0*.js', '1*.js', '2*.js', '3*.js']
+
+    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:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 18
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - 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
+
+      # 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 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
+
+      - name: Report Coverage
+        run: npm run test:coverage
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -280,7 +280,6 @@
     "node-polyfill-webpack-plugin": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "playwright": "^1.40.1",
     "postcss": "8.4.32",
     "prettier": "3.1.1",
     "prettier-plugin-tailwindcss": "0.5.9",

diff --git a/scripts/run_e2e_tests.sh b/scripts/run_e2e_tests.sh
@@ -6,7 +6,7 @@ MAILDEV_PID=$!
 
 echo "> Starting stripe webhook listener"
 export STRIPE_WEBHOOK_SIGNING_SECRET=$(stripe --api-key $STRIPE_WEBHOOK_KEY listen --forward-connect-to localhost:3060/webhooks/stripe --print-secret)
-stripe --api-key $STRIPE_WEBHOOK_KEY listen --forward-connect-to localhost:3060/webhooks/stripe > /dev/null &
+stripe --api-key $STRIPE_WEBHOOK_KEY listen --forward-connect-to localhost:3060/webhooks/stripe >/dev/null &
 STRIPE_WEBHOOK_PID=$!
 
 echo "> Starting api server"
@@ -73,22 +73,26 @@ echo ""
 wait_for_service IMAGES 127.0.0.1 3001
 
 echo ""
-echo "> Running cypress tests"
-
-npm run cypress:run -- ${CYPRESS_RECORD} --env OC_ENV=$OC_ENV --spec "test/cypress/integration/${CYPRESS_TEST_FILES}"
+if [ -z "$USE_PLAYWRIGHT" = "true" ]; then
+  echo "> Running playwright tests"
+  npx playwright test
+else
+  echo "> Running cypress tests"
+  npm run cypress:run -- ${CYPRESS_RECORD} --env OC_ENV=$OC_ENV --spec "test/cypress/integration/${CYPRESS_TEST_FILES}"
+fi
 
 RETURN_CODE=$?
 if [ $RETURN_CODE -ne 0 ]; then
   echo "Error with cypress e2e tests, exiting"
-  exit 1;
+  exit 1
 fi
 echo ""
 
 echo "Killing all node processes"
-kill $MAILDEV_PID;
+kill $MAILDEV_PID
 kill $STRIPE_WEBHOOK_PID
-kill $API_PID;
-kill $FRONTEND_PID;
-kill $IMAGES_PID;
+kill $API_PID
+kill $FRONTEND_PID
+kill $IMAGES_PID
 echo "Exiting with code $RETURN_CODE"
 exit $RETURN_CODE