test(e2e): migrate to synpress and playwright (#1073)

* [WIP] test: add synpress and playwright for e2e * fixup * fixup * fixup * fixup * fixup * pin prettier * debug formatter * log prettier version * fixup * fixup * test: replace cypress tests with playwright * fixup * clean up obsolete hardhat node * add e2e test docs * ci: fix e2e artifacts upload * fixup * fix: serverless functions build * fix: hack for running e2e test * Update src/utils/token.ts Co-authored-by: James Morris, MS <[email protected]> * fixup * remove emoji --------- Co-authored-by: James Morris, MS <[email protected]>
across-protocol · Jun 26, 2024 · fdb3ebb · fdb3ebb
1 parent 479df54
commit fdb3ebb
Show file tree

Hide file tree

Showing 50 changed files with 2,043 additions and 1,528 deletions.
diff --git a/.env.example b/.env.example
@@ -63,9 +63,6 @@ REACT_APP_FLAT_RELAY_CAPITAL_FEE=
 # Show rewards banner warning on /rewards page if set to `true`.
 REACT_APP_REWARDS_BANNER_WARNING= 
 
-# Define Hardhat Infura ID for testing
-HARDHAT_INFURA_ID= 
-
 # Define a configurable message to display to users in environment.
 REACT_APP_GENERAL_MAINTENANCE_MESSAGE="Message to display in top banner."
 

diff --git a/.github/workflows/chromatic.yaml b/.github/workflows/chromatic.yaml
@@ -1,18 +1,14 @@
-# Workflow name
 name: Chromatic
 
 on:
   # manual trigger
   workflow_dispatch:
   pull_request:
 
-# List of jobs
 jobs:
   chromatic-deployment:
     if: ${{ contains( github.event.pull_request.labels.*.name, 'storybook') }}
-    # Operating System
     runs-on: ubuntu-latest
-    # Job steps
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
@@ -24,7 +20,6 @@ jobs:
           REACT_APP_REWARDS_API_URL: ${{ secrets.CYPRESS_REWARDS_API_URL }}
           REACT_APP_CHAIN_137_PROVIDER_URL: ${{ secrets.CYPRESS_CHAIN_137_PROVIDER_URL }}
           REACT_APP_CHAIN_42161_PROVIDER_URL: ${{ secrets.CYPRESS_CHAIN_42161_PROVIDER_URL }}
-        # Chromatic GitHub Action options
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

diff --git a/.github/workflows/e2e.yaml b/.github/workflows/e2e.yaml
@@ -0,0 +1,36 @@
+name: E2E Tests
+
+on:
+  deployment_status:
+
+jobs:
+  e2e-tests:
+    if: |
+      github.event_name == 'deployment_status' &&
+      github.event.deployment_status.state == 'success' &&
+      contains(github.event.deployment_status.environment_url, 'app-frontend-v3')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      # For now, we only need Chromium.
+      - name: Install Playwright Browsers
+        run: yarn playwright install chromium
+      - name: Setup Synpress wallet cache
+        # https://synpress.io/docs/guides/ci#ci
+        run: xvfb-run yarn synpress ./e2e/wallet-setup
+        env:
+          E2E_DAPP_URL: ${{ github.event.deployment_status.environment_url }}
+      - name: Run tests
+        # https://synpress.io/docs/guides/ci#ci
+        run: xvfb-run yarn test:e2e:headful
+        env:
+          E2E_DAPP_URL: ${{ github.event.deployment_status.environment_url }}
+      - name: Archive Playwright report
+        uses: actions/upload-artifact@v4
+        if: success() || failure()
+        with:
+          name: playwright-report-headful
+          path: |
+            playwright-report/
+          if-no-files-found: error
diff --git a/.github/workflows/lint-test.yaml b/.github/workflows/lint-test.yaml
@@ -10,11 +10,12 @@ on:
   pull_request:
 
 jobs:
-  lint:
+  format-and-lint:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
+      - run: yarn format
       - run: yarn lint
       - run: yarn format
 
@@ -32,52 +33,3 @@ jobs:
           REACT_APP_CHAIN_42161_PROVIDER_URL: ${{ secrets.CYPRESS_CHAIN_42161_PROVIDER_URL }}
           REACT_APP_MOCK_SERVERLESS: true
         run: yarn test
-
-  cypress-tests:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup
-      - uses: actions/cache@v3
-        id: cypress-cache
-        with:
-          path: /home/runner/.cache/Cypress
-          key: ${{ runner.os }}-cypress-${{ hashFiles('node_modules/cypress') }}
-      - if: steps.cypress-cache.outputs.cache-hit != 'true'
-        run: yarn cypress install
-      - name: Build app
-        env:
-          NODE_OPTIONS: "--max_old_space_size=4096"
-          REACT_APP_PUBLIC_INFURA_ID: ${{ secrets.CYPRESS_PUBLIC_INFURA_ID }}
-          REACT_APP_PUBLIC_ONBOARD_API_KEY: ${{ secrets.CYPRESS_PUBLIC_ONBOARD_API_KEY }}
-          REACT_APP_REWARDS_API_URL: ${{ secrets.CYPRESS_REWARDS_API_URL }}
-          REACT_APP_CHAIN_137_PROVIDER_URL: ${{ secrets.CYPRESS_CHAIN_137_PROVIDER_URL }}
-          REACT_APP_CHAIN_42161_PROVIDER_URL: ${{ secrets.CYPRESS_CHAIN_42161_PROVIDER_URL }}
-          REACT_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.CYPRESS_WALLET_CONNECT_PROJECT_ID }}
-          REACT_APP_MOCK_SERVERLESS: true
-          REACT_APP_REBATE_PROGRAMS_AVAILABLE: "op-rebates"
-        run: yarn build
-      - name: Run hardhat mainnet fork
-        env:
-          HARDHAT_INFURA_ID: ${{ secrets.CYPRESS_PUBLIC_INFURA_ID }}
-        run: yarn hardhat:node &
-      - name: Cypress run Chrome
-        uses: cypress-io/github-action@v6
-        with:
-          install: false
-          browser: chrome
-          start: yarn serve -l 3000
-          wait-on: "http://localhost:3000"
-          wait-on-timeout: 600
-      - name: Upload screenshots
-        uses: actions/upload-artifact@v3
-        if: failure() # only upload screenshots if tests fail
-        with:
-          name: cypress-screenshots
-          path: cypress/screenshots
-      - name: Upload videos
-        uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: cypress-videos
-          path: cypress/videos
diff --git a/.gitignore b/.gitignore
@@ -20,6 +20,7 @@
 .env.test.local
 .env.production.local
 .env*.local
+.env.e2e
 
 # IDE
 .idea
@@ -48,3 +49,11 @@ ampli.json
 # Bundle size analysis
 bundle-size-analysis.*
 stats.*
+
+# Playwright and synpress
+/test-results/
+/e2e/tests-out/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.cache-synpress
diff --git a/README.md b/README.md
@@ -12,23 +12,29 @@ Web UI for Across.
 
 ## Development
 
+### Requirements
+
+- [yarn v1.22.22](https://classic.yarnpkg.com/en/docs/install)
+- NodeJS >=v18
+- [Vercel CLI](https://vercel.com/docs/cli)
+
 ### Local setup
 
-Clone this repository, install deps and create an `.env.local` file by running:
+Clone this repository, install deps and create an `.env` file by running:
 
 ```bash
 yarn
-cp .env.example .env.local
+cp .env.example .env
 ```
 
-Adjust values in the created `.env.local` accordingly.
+Adjust values in the created `.env` accordingly.
 
 ### Start dev server
 
 Start the frontend with a dev server by running:
 
 ```bash
-yarn start
+PORT=3000 yarn dev
 ```
 
 ### Build production bundle
@@ -45,55 +51,51 @@ yarn test
 
 ### Run e2e tests
 
-Our e2e tests rely on a local hardhat node that forks mainnet.
-First, set the env var `HARDHAT_INFURA_ID` in your `.env` file and make sure to run such a node before starting the tests:
+Our e2e tests use [Playwright](https://playwright.dev/) and [Synpress](https://synpress.io/). You can configure some custom env vars for running e2e tests by creating a file `.env.e2e` that might have the following content:
 
 ```bash
-yarn hardhat:node
+# This will default to http://127.0.0.1:3000 but can be overridden to target a different deployment
+E2E_DAPP_URL=
+# Seed phrase to use for MetaMask when running e2e tests
+E2E_MM_SEED_PHRASE=
+# Password to use for MetaMask when running e2e tests
+E2E_MM_PASSWORD=
+# Custom Infura project id to use when running e2e tests
+E2E_INFURA_ID=
 ```
 
-We use [cypress](https://docs.cypress.io/guides/overview/why-cypress) for handling e2e tests.
 To run the tests locally, first make sure to have a local dev sever running:
 
 ```bash
-yarn start
+PORT=3000 yarn dev
 ```
 
-If you want to start the cypress UI run:
+Make sure to setup the wallet cache by running
 
 ```bash
-yarn cypress:open
+yarn synpress ./e2e/wallet-setup
 ```
 
-If you want to run the tests from the CLI, run:
+If you want to start the Playwright UI run:
 
 ```bash
-yarn cypress:run
+yarn test:e2e:headless:ui
 ```
 
-Per default cypress expects the frontend running on `http://localhost:3000`.
-To change that run:
+If you want to run the tests from the CLI, run:
 
 ```bash
-CYPRESS_BASE_URL=http://localhost:3333 yarn cypress:run
+yarn test:e2e:headless
 ```
 
-### Important CSS values
-
-#### Z-index
-
-Navbar - 1000
-Toast - 99999
-Modal - 99998
-
-## Contributing
-
-Have a look at [CONTRIBUTING](./CONTRIBUTING.md) to get more information on contributions and best practices.
-
 ## Pull Data from Amplitude
 
 The `src/ampli` directory can be refreshed with new tracking data by running the following steps:
 
 1. Run `yarn ampli login` to log in to Amplitude
 2. Run `yarn ampli pull web`
    1. If Amplitude requests to create a new project, let it generate a `ampli.json` file.
+
+## Contributing
+
+Have a look at [CONTRIBUTING](./CONTRIBUTING.md) to get more information on contributions and best practices.
diff --git a/cypress.config.ts b/cypress.config.ts
diff --git a/cypress/e2e/bridge.cy.ts b/cypress/e2e/bridge.cy.ts
diff --git a/cypress/e2e/header.cy.ts b/cypress/e2e/header.cy.ts
diff --git a/cypress/e2e/pool.cy.ts b/cypress/e2e/pool.cy.ts
diff --git a/cypress/e2e/referrals.cy.ts b/cypress/e2e/referrals.cy.ts
diff --git a/cypress/e2e/transactions.cy.ts b/cypress/e2e/transactions.cy.ts