feat: enable synpress in order to connect metamask with jumper app

.github/workflows/playwright.yml

@@ -19,16 +19,18 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 20
+        node-version: 18
     - name: Install dependencies
       run: yarn install
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps chromium
+    - name: Build env and build synpress cache
+      run: yarn dev & npx wait-on http://localhost:3000 && yarn build:cache:ci --force tests/wallet-setup/
     - name: Run Playwright tests
       env:
         PLAYWRIGHT_JSON_OUTPUT_NAME: report-${{ matrix.shard }}.json
       run: |
-        yarn playwright test \
+        yarn run test:ci:e2e \
           --shard ${{ matrix.shard }}/${{ strategy.job-total }} \
           --reporter=json
     - uses: daun/playwright-report-summary@v3

.gitignore

@@ -31,6 +31,9 @@ yarn-error.log*
 
 # testing
 /coverage
+.cache-synpress/**
+.tests/snapshots.spec.ts/** 
+
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -1,6 +1,7 @@
 {
   "name": "jumper.exchange",
   "version": "1.0.0",
+  "type": "module",
   "private": true,
   "repository": "https://github.com/jumperexchange/jumper-exchange",
   "packageManager": "[email protected]",
@@ -33,6 +34,7 @@
     "@solana/wallet-adapter-solflare": "^0.6.28",
     "@solana/web3.js": "^1.95.4",
     "@strapi/blocks-react-renderer": "^1.0.1",
+    "@synthetixio/synpress": "4.0.0-alpha.7",
     "@tanstack/react-query": "^5.59.20",
     "@widgetbot/react-embed": "^1.9.0",
     "accept-language": "^3.0.20",
@@ -59,11 +61,13 @@
     "sharp": "^0.33.5",
     "siwe": "^2.3.2",
     "uuid": "^10.0.0",
+    "wait-on": "^8.0.1",
     "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@eslint/eslintrc": "^3.1.0",
+    "@metamask/test-dapp": "8.2.0",
     "@next/eslint-plugin-next": "^14.2.17",
     "@playwright/test": "^1.48.2",
     "@types/gtag.js": "^0.0.20",
@@ -106,7 +110,12 @@
     "fix:all-files": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
     "pre-commit": "lint-staged",
     "pre-push": "yarn && yarn build",
-    "i18next-resources-for-ts": "i18next-resources-for-ts interface -i ./src/i18n/translations/en -o ./src/i18n/resources.d.ts"
+    "i18next-resources-for-ts": "i18next-resources-for-ts interface -i ./src/i18n/translations/en -o ./src/i18n/resources.d.ts",
+    "test:ci:e2e": "xvfb-run npx playwright test",
+    "test:e2e-real": "npx playwright test --headed",
+    "build:cache": "synpress --headless",
+    "build:cache:ci": "xvfb-run npx synpress"
+
   },
   "lint-staged": {
     "**/*.(ts|tsx|js)": [

playwright.config.ts

@@ -1,11 +1,11 @@
 import { defineConfig, devices } from '@playwright/test';
 
+import { PlaywrightTestConfig } from '@playwright/test';
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-require('dotenv').config();
-
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -17,7 +17,7 @@ require('dotenv').config();
 // const baseURL = `http://localhost:${PORT}`;
 
 export default defineConfig({
-  timeout: 60 * 1000,
+  timeout: 120 * 1000,
   expect: {
     timeout: 40 * 1000,
   },
@@ -27,9 +27,9 @@ export default defineConfig({
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 2,
+  retries: process.env.CI ? 3 : 3,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : 1,
+  workers: process.env.CI ? 4 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: [['html'], ['json', { outputFile: 'test-results.json' }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -44,7 +44,7 @@ export default defineConfig({
     command: 'yarn run dev',
     url: 'http://localhost:3000',
     timeout: 200 * 1000,
-    reuseExistingServer: !process.env.CI,
+    reuseExistingServer: true,
   },
 
   /* Configure projects for major browsers */

synpressCache.ts

@@ -0,0 +1,25 @@
+import { spawn } from 'child_process';
+
+async function buildSynpressCache() {
+  console.log('Building Synpress cache...');
+
+  return new Promise<void>((resolve, reject) => {
+    const process = spawn('yarn', ['build:cache', '--force', 'tests/wallet-setup/'], { stdio: 'inherit' });
+
+    process.on('close', (code) => {
+      if (code === 0) {
+        console.log('Synpress cache build complete.');
+        resolve();
+      } else {
+        console.error(`Failed to build Synpress cache with exit code ${code}`);
+        reject(new Error(`Cache build failed with code ${code}`));
+      }
+    });
+
+    process.on('error', (error) => {
+      console.error('Error during cache build:', error);
+      reject(error);
+    });
+  });
+}
+export default buildSynpressCache;

tests/connectWallet.spec.ts

@@ -0,0 +1,34 @@
+import { testWithSynpress } from '@synthetixio/synpress-core';
+import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress';
+import { openOrCloseMainMenu , itemInMenu, closeWelcomeScreen } from './testData/commonFunctions';
+import basicSetup from './wallet-setup/basic.setup';
+
+const test = testWithSynpress(metaMaskFixtures(basicSetup));
+
+const { expect } = test;
+test.describe('Connect Metamask with Jumper app and open /profile page',()=>{
+  test('should connect wallet to Jumper', async ({
+    context,
+    page,
+    extensionId,
+  }) => {
+    const metamask = new MetaMask(
+      context,
+      page,
+      basicSetup.walletPassword,
+      extensionId,
+    );
+    const connectWalletButton = page.locator('#connect-wallet-button');
+    const metaMaskWalletOption = page.locator('xpath=//span[normalize-space(text())="MetaMask"]');
+    const availableMissionTitle = page.locator('xpath=//p[normalize-space(text())="Available Missions"]');
+    await expect(connectWalletButton).toBeEnabled();
+    await connectWalletButton.click();
+    await metaMaskWalletOption.click();
+    await metamask.connectToDapp(['Account 1']);
+    await closeWelcomeScreen(page)
+    await openOrCloseMainMenu(page);
+    await itemInMenu(page, 'Jumper Profile');
+    await page.locator('.profile-page').isVisible();
+    await expect(availableMissionTitle).toBeVisible();
+  });
+})

tests/e2e.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import values from '../tests/testData/values.json';
+import values from '../tests/testData/values.json' assert { type:"json"};
 import {
   closeWelcomeScreen,
   expectBackgroundColorToHaveCss,
@@ -135,14 +135,6 @@ test.describe('Jumper full e2e flow', () => {
     await expect(searchBar).toBeVisible();
   });
 
-  test.skip('Should be able to navigate to Supefest', async ({ page }) => {
-    const learnMoreButton = page.locator('#learn-more-button');
-    await openOrCloseMainMenu(page);
-    await itemInMenu(page, 'Superfest Festival');
-    await expect(learnMoreButton).toBeVisible();
-    await expect(page).toHaveURL(values.localSuperfestURL);
-  });
-
   test('Should open Developers section inside menu', async ({ page }) => {
     await openOrCloseMainMenu(page);
     await itemInMenu(page, 'Developers');

tests/swapActions.spec.ts

@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import chainData from './testData/chainData.json';
+import chainData from './testData/chainData.json' assert {type:"json"};
 import {
   buildUlParams,
   checkIfBestReturnLabelIsVisible,

tests/testData/commonFunctions.ts

@@ -18,7 +18,7 @@ export async function checkTheNumberOfMenuItems(
 }
 
 export async function itemInMenu(page, option: string) {
-  await page.getByRole('menuitem', { name: option }).click({ timeout: 20000 });
+  await page.getByRole('menuitem', { name: option }).click();
 }
 
 export async function closeWelcomeScreen(page: Page) {

tests/themeManipulation.spec.ts

@@ -1,7 +1,6 @@
 import { test } from '@playwright/test';
 import {
   closeWelcomeScreen,
-  openOrCloseMainMenu,
   expectBackgroundColorToHaveCss,
 } from './testData/commonFunctions';
 

tests/wallet-setup/basic.setup.ts

@@ -0,0 +1,11 @@
+import { MetaMask, defineWalletSetup } from '@synthetixio/synpress';
+
+const SEED_PHRASE =
+  'test test test test test test test test test test test junk';
+const PASSWORD = 'SynpressIsAwesomeNow!!!';
+
+export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
+  const metamask = new MetaMask(context, walletPage, PASSWORD);
+
+  await metamask.importWallet(SEED_PHRASE);
+});

tests/wallet-setup/connected.setup.ts

@@ -0,0 +1,25 @@
+import { MetaMask, getExtensionId ,defineWalletSetup } from '@synthetixio/synpress'
+import 'dotenv/config'
+
+export const SEED_PHRASE =
+  'test test test test test test test test test test test junk';
+export const PASSWORD = 'Testing1234!'
+
+export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
+    // This is a workaround for the fact that the MetaMask extension ID changes.
+    // This workaround won't be needed in the near future! 😁
+    const extensionId = await getExtensionId(context, 'MetaMask')
+
+    const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId)
+
+    await metamask.importWallet(SEED_PHRASE)
+
+    const page = await context.newPage()
+
+    // Go to a locally hosted MetaMask Test Dapp.
+    await page.goto('http://localhost:3000')
+
+    await page.locator('#connect-wallet-button').click()
+
+    // await metamask.connectToDapp(['Account 1'])
+})

tests/wallet-setup/synpress.ts

@@ -0,0 +1,5 @@
+import { testWithSynpress, metaMaskFixtures } from '@synthetixio/synpress'
+
+import connectedSetup from '../wallet-setup/connected.setup'
+
+export default testWithSynpress(metaMaskFixtures(connectedSetup))