feat(frontend): add e2e tests setup with playwright and synpress (#502)

* feat(frontend): add e2e tests setup with playwright and synpress

* chore(frontend): prepare fathom code before starting frontend in dev mode

* chore: install playwright browsers in gh actions environment

* chore: trigger ci

* chore: prepare fathom before executing playwright

* chore: fix test:e2e script

* fix(frontend): fix playwright command

* chore(frontend): increase timeout for web server start

* chore: remove playwright tests from ci gh action

---------

Co-authored-by: luzzifoss <fedeluzzi00@gmail.com>

.gitignore

@@ -180,4 +180,14 @@ target/
 
 packages/ipfs-pinner/src/contracts
 
-packages/subgraph/src/gen
+packages/subgraph/src/gen
+
+# Test results & reposts
+test-results/
+playwright-report/
+
+# Cache
+playwright/.cache/
+
+# Metamask
+metamask-*

package.json

@@ -20,6 +20,7 @@
         "format": "turbo run format",
         "start": "turbo run start",
         "test": "turbo run test",
+        "test:e2e": "turbo run test:e2e --filter @carrot-kpi/host-frontend",
         "size-limit": "turbo run size-limit",
         "commitlint": "commitlint -e",
         "prepare": "husky install"

packages/frontend/CONTRIBUTING.md

@@ -189,3 +189,16 @@ following:
    augmented `global` namespace.
 4. Update the `turbo.json` file at the root of the monorepo to add the env to
    the `globalEnv` key.
+
+## Running end to end tests
+
+End to end tests are executed using Playwright and Synpress. In order to execute
+them locally, start by setting all the required envs that are needed to build
+and run the frontend as described in the sections above, and after having done
+that simply run the following command from the root of the monorepo (running
+from the root of the monorepo ensures the latest monorepo linked packages are
+used).
+
+```
+yarn test:e2e
+```

packages/frontend/e2e/fixtures.ts

@@ -0,0 +1,55 @@
+import { test as base, chromium, type BrowserContext } from "@playwright/test";
+import { initialSetup } from "@synthetixio/synpress/commands/metamask";
+import { setExpectInstance } from "@synthetixio/synpress/commands/playwright";
+import { resetState } from "@synthetixio/synpress/commands/synpress";
+import { prepareMetamask } from "@synthetixio/synpress/helpers";
+
+export const test = base.extend<{
+    context: BrowserContext;
+}>({
+    context: async ({}, use) => {
+        // required for synpress as it shares same expect instance as playwright
+        await setExpectInstance(expect);
+
+        // download metamask
+        const metamaskPath = await prepareMetamask(
+            process.env.METAMASK_VERSION || "10.25.0",
+        );
+
+        // prepare browser args
+        const browserArgs = [
+            `--disable-extensions-except=${metamaskPath}`,
+            `--load-extension=${metamaskPath}`,
+            "--remote-debugging-port=9222",
+        ];
+
+        if (process.env.CI) browserArgs.push("--disable-gpu");
+        if (process.env.HEADLESS_MODE) browserArgs.push("--headless=new");
+
+        // launch browser
+        const context = await chromium.launchPersistentContext("", {
+            headless: false,
+            args: browserArgs,
+        });
+
+        // wait for metamask
+        await context.pages()[0].waitForTimeout(3000);
+
+        // setup metamask
+        await initialSetup(chromium, {
+            secretWordsOrPrivateKey:
+                "test test test test test test test test test test test junk",
+            network: "sepolia",
+            password: "Tester@1234",
+            enableAdvancedSettings: true,
+        });
+
+        await use(context);
+
+        await context.close();
+
+        await resetState();
+    },
+});
+
+export const expect = test.expect;

packages/frontend/e2e/tests/connect-wallet.test.ts

@@ -0,0 +1,34 @@
+import { test, expect } from "../fixtures";
+import { acceptAccess } from "@synthetixio/synpress/commands/metamask";
+
+test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+});
+
+test("connect with metamask", async ({ page }) => {
+    await test.step("select network drop down", async () => {
+        await page.locator("div").getByText("Network").nth(2).click();
+    });
+
+    await test.step("click sepolia network", async () => {
+        await page.getByTestId("Sepolia-network-button").nth(1).click();
+    });
+
+    await test.step("click connect wallet", async () => {
+        await page.getByTestId("connect-wallet-button").nth(1).click();
+    });
+
+    await test.step("click metamask", async () => {
+        await page.getByTestId("metaMask-wallet-button").nth(1).click();
+    });
+
+    await test.step("connect to metamask", async () => {
+        await acceptAccess();
+    });
+
+    await test.step("verify wallet is connected", async () => {
+        await expect(
+            page.getByTestId("profile-avatar-button").nth(1),
+        ).toBeVisible();
+    });
+});

packages/frontend/e2e/tests/home-page.test.ts

@@ -0,0 +1,23 @@
+import { test } from "../fixtures";
+
+test("home page", async ({ page }) => {
+    await test.step("navigate to home page", async () => {
+        await page.goto("/");
+    });
+
+    await test.step("about visible", async () => {
+        await page.locator("div").getByText("About`").nth(1).isVisible();
+    });
+
+    await test.step("campaigns visible", async () => {
+        await page.locator("div").getByText("Campaign").nth(1).isVisible();
+    });
+
+    await test.step("connect wallet button visible", async () => {
+        await page
+            .locator("div")
+            .getByText("Connect wallet")
+            .nth(1)
+            .isVisible();
+    });
+});

packages/frontend/package.json

@@ -34,7 +34,8 @@
         "prepare-fathom": "prepare-fathom",
         "config-react-env": "./scripts/config-react-env.js",
         "start:staging": "STAGING=true craco start",
-        "start": "craco start"
+        "start": "craco start",
+        "test:e2e": "yarn prepare-fathom && playwright test"
     },
     "dependencies": {
         "@carrot-kpi/react": "*",
@@ -68,6 +69,7 @@
         "@commitlint/config-conventional": "^18.1.0",
         "@craco/craco": "^7.1.0",
         "@fontsource/ibm-plex-mono": "^5.0.3",
+        "@playwright/test": "^1.39.0",
         "@react-spring/web": "^9.7.3",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-image": "^3.0.3",

packages/frontend/playwright.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+    timeout: 60_000,
+    testDir: "./e2e",
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 0,
+    workers: process.env.CI ? 1 : 1,
+    reporter: process.env.CI ? "dot" : "list",
+    use: {
+        headless: false,
+        baseURL: "http://localhost:3000/#/?chain=scroll+sepolia",
+        trace: "on-first-retry",
+    },
+    projects: [
+        {
+            name: "chromium",
+            use: {
+                ...devices["Desktop Chrome"],
+                viewport: { width: 1920, height: 1080 },
+            },
+        },
+        {
+            name: "firefox",
+            use: { ...devices["Desktop Firefox"] },
+        },
+        {
+            name: "webkit",
+            use: { ...devices["Desktop Safari"] },
+        },
+    ],
+    webServer: {
+        command: "yarn start:staging",
+        timeout: 120 * 1_000,
+        url: "http://127.0.0.1:3000",
+        reuseExistingServer: !process.env.CI,
+    },
+});

packages/frontend/src/components/connect-wallet/index.tsx

@@ -170,6 +170,7 @@ export const ConnectWallet = ({
                 )}
                 {address ? (
                     <Button
+                        data-testid="profile-avatar-button"
                         size="small"
                         ref={setConnectWallet}
                         onClick={handleAccountPopoverOpen}
@@ -181,6 +182,7 @@ export const ConnectWallet = ({
                     </Button>
                 ) : (
                     <Button
+                        data-testid="connect-wallet-button"
                         size="small"
                         ref={setConnectWallet}
                         onClick={handleConnectPopoverOpen}

packages/frontend/src/components/connect-wallet/popovers/account/index.tsx

@@ -112,6 +112,7 @@ export const AccountPopover = forwardRef<HTMLDivElement, AccountPopoverProps>(
                     </div>
                     <div className="flex gap-1 items-center">
                         <Button
+                            data-testid="account-dropdown-copy-button"
                             size="xsmall"
                             icon={copiedToClipboard ? Tick : Copy}
                             onClick={handleCopyToClipboardClick}
@@ -121,6 +122,7 @@ export const AccountPopover = forwardRef<HTMLDivElement, AccountPopoverProps>(
                         />
                         {!__LIBRARY_MODE__ && (
                             <Button
+                                data-testid="account-dropdown-block-explorer-button"
                                 size="xsmall"
                                 icon={External}
                                 disabled={!blockExplorerHref}
@@ -133,6 +135,7 @@ export const AccountPopover = forwardRef<HTMLDivElement, AccountPopoverProps>(
                             />
                         )}
                         <Button
+                            data-testid="account-dropdown-power-button"
                             size="xsmall"
                             icon={Power}
                             onClick={handleDisconnectClick}

packages/frontend/src/components/connect-wallet/popovers/connect.tsx

@@ -32,6 +32,7 @@ export const ConnectPopover = forwardRef<HTMLDivElement, ConnectPopoverProps>(
                     const Logo = getConnectorIcon(connector.id);
                     return (
                         <div
+                            data-testid={`${connector.id}-wallet-button`}
                             key={connector.id}
                             className="flex gap-4 cursor-pointer"
                             onClick={() => {

packages/frontend/src/components/connect-wallet/popovers/networks.tsx

@@ -44,6 +44,7 @@ export const NetworksPopover = forwardRef<HTMLDivElement, NetworksPopoverProps>(
                     const Logo = chainFromSupportedChains?.logo || Error;
                     return (
                         <div
+                            data-testid={`${supportedChain.name}-network-button`}
                             key={supportedChain.id}
                             className="cursor-pointer"
                             onClick={handleChainClick}

turbo.json

@@ -26,11 +26,13 @@
                 "src/**/*.{ts,tsx}",
                 "tests/**/*.{ts,tsx}",
                 "src/**/*.test.{ts,tsx}",
-                "src/**/*.sol",
-                "tests/**/*.sol",
                 "babel.config.json"
             ]
         },
+        "test:e2e": {
+            "inputs": ["src/**/*.{ts,tsx}", "e2e/**/*.test.{ts,tsx}"],
+            "dependsOn": ["^build"]
+        },
         "start": {
             "dependsOn": ["^build"]
         },
@@ -47,6 +49,8 @@
         "FATHOM_SITE_ID",
         "FATHOM_API_KEY",
         "CI",
-        "STAGING"
+        "STAGING",
+        "METAMASK_VERSION",
+        "HEADLESS_MODE"
     ]
 }