test: WalletConnect tests FE-443

.github/workflows/pr-tests.yml

@@ -112,13 +112,6 @@ jobs:
           forc --version
           fuel-core --version
 
-      # Check the directory structure before deployment
-      - name: Debug Paths Before Deployment
-        run: |
-          echo "Checking paths before deployment"
-          ls -la e2e-tests/runner/src
-          ls -la examples/react-app/src/types/
-
       - name: Build & Deploy Contracts
         run: pnpm deploy:contracts:ci
         working-directory: e2e-tests/runner/scripts
@@ -135,6 +128,10 @@ jobs:
         run: pnpm exec playwright install --with-deps chromium
         working-directory: e2e-tests/runner
 
+      - name: Build Synpress cache
+        run: xvfb-run pnpm synpress wallet-setup
+        working-directory: e2e-tests/runner
+
       - name: Run Playwright tests locally for Preview
         if: ${{ github.event_name == 'pull_request' }}
         run: xvfb-run --auto-servernum -- pnpm --filter @e2e-tests/runner test:e2e

.gitignore

@@ -36,5 +36,6 @@ yarn-error.log*
 e2e-tests/runner/playwright-report/
 e2e-tests/runner/blob-report/
 e2e-tests/runner/test-results/
+e2e-tests/runner/.cache-synpress/
 e2e-tests/runner/src/contracts/
 e2e-tests/runner/src/contracts/contract-ids.json

e2e-tests/runner/common/common.ts

@@ -4,7 +4,8 @@ import type { ApproveTransferFunction, ConnectorFunctions } from './types';
 
 // biome-ignore lint/suspicious/noExportsInTest: <explanation>
 export const skipBridgeFunds = async (page: Page) => {
-  if (await page.isVisible('text=Bridge Funds')) {
+  await page.waitForTimeout(1000);
+  if (await page.isVisible('text=Bridge Funds', { timeout: 2000 })) {
     await page.click('text=Continue to application');
   }
 };

e2e-tests/runner/examples/connectors/WalletConnectConnector/WalletConnectConnector.test.ts

@@ -0,0 +1,50 @@
+import {
+  downloadFuel,
+  getButtonByText,
+  getByAriaLabel,
+} from '@fuels/playwright-utils';
+import { testWithSynpress } from '@synthetixio/synpress';
+import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright';
+import { sessionTests, skipBridgeFunds } from '../../../common/common';
+import type { ConnectorFunctions } from '../../../common/types';
+import basicSetup from '../../../wallet-setup/basic.setup';
+
+const test = testWithSynpress(metaMaskFixtures(basicSetup));
+
+test.describe('WalletConnectConnector', () => {
+  let metamask: MetaMask;
+
+  test.beforeEach(async ({ context, extensionId, metamaskPage, page }) => {
+    metamask = new MetaMask(
+      context,
+      metamaskPage,
+      basicSetup.walletPassword,
+      extensionId,
+    );
+    await page.goto('/', { waitUntil: 'domcontentloaded' });
+  });
+
+  const connect: ConnectorFunctions['connect'] = async (page) => {
+    await page.goto('/');
+    const connectButton = getButtonByText(page, 'Connect Wallet', true);
+    await connectButton.click();
+    await getByAriaLabel(page, 'Connect to Ethereum Wallets', true).click();
+
+    await page.getByText('Proceed anyway').click();
+    await getButtonByText(page, 'MetaMask', true).click();
+
+    await metamask.connectToDapp();
+    // wait 3 seconds for the connection to be established
+    await page.waitForTimeout(3000);
+
+    await metamask.confirmSignature();
+  };
+
+  const approveTransfer: ConnectorFunctions['approveTransfer'] = async () => {
+    await metamask.confirmTransaction();
+  };
+
+  test('Fuel tests', async ({ page }) => {
+    await sessionTests(page, { connect, approveTransfer });
+  });
+});

e2e-tests/runner/package.json

@@ -21,7 +21,9 @@
   "devDependencies": {
     "@fuels/connectors": "workspace:*",
     "@fuels/playwright-utils": "0.41.1",
-    "@playwright/test": "1.48.1",
+    "@playwright/test": "1.48.2",
+    "@synthetixio/synpress": "4.0.3",
+    "@synthetixio/synpress-cache": "0.0.4",
     "dotenv": "16.4.5",
     "fuels": "0.96.1"
   },

e2e-tests/runner/playwright.config.ts

@@ -3,6 +3,8 @@ import {
   defineConfig,
   devices,
 } from '@playwright/test';
+import { synpressFixtures } from '@synthetixio/synpress';
+
 import dotenv from 'dotenv';
 dotenv.config();
 

e2e-tests/runner/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "strict": true
+  }
+}

e2e-tests/runner/wallet-setup/basic.setup.ts

@@ -0,0 +1,12 @@
+import { defineWalletSetup } from '@synthetixio/synpress';
+import { MetaMask } from '@synthetixio/synpress/playwright';
+
+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);
+});

package.json

@@ -57,5 +57,8 @@
       "fast-xml-parser@<4.4.1": ">=4.4.1"
     }
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@synthetixio/synpress": "4.0.3"
+  }
 }