feat: synpress plugin for cypress

wallets/metamask/src/cypress/initMetaMask.ts

@@ -0,0 +1,87 @@
+import { type BrowserContext, type Page, chromium } from "@playwright/test";
+import { getExtensionId } from "@synthetixio/synpress-fixtures";
+import { PASSWORD, SEED_PHRASE } from "./constants";
+import { MetaMask } from "./metamask";
+
+let context: BrowserContext | undefined;
+let extensionId: string | undefined;
+let metamask: MetaMask | undefined;
+
+const isMetaMaskPage = (page: Page) =>
+  page.url().includes(`chrome-extension://${extensionId}`);
+
+export async function getMetaMaskExtensionId() {
+  if (extensionId) return extensionId;
+
+  if (!context) {
+    console.error(
+      "No browser context found. Connect to Playwright first - connectPlaywright()"
+    );
+    return;
+  }
+
+  if (!extensionId) {
+    extensionId = await getExtensionId(context, "MetaMask");
+  }
+
+  return extensionId;
+}
+
+export async function connectPlaywright(port: number) {
+  const debuggerDetails = await fetch(`http://127.0.0.1:${port}/json/version`);
+
+  const debuggerDetailsConfig = (await debuggerDetails.json()) as {
+    webSocketDebuggerUrl: string;
+  };
+  const webSocketDebuggerUrl = debuggerDetailsConfig.webSocketDebuggerUrl;
+
+  const browser = await chromium.connectOverCDP(webSocketDebuggerUrl);
+
+  context = browser.contexts()[0];
+
+  return browser.isConnected();
+}
+
+export async function initMetamask(port: number) {
+  await connectPlaywright(port);
+  const extensionId = await getMetaMaskExtensionId();
+
+  const isMetaMaskPage = (page: Page) =>
+    page.url().includes(`chrome-extension://${extensionId}`);
+
+  if (!context) {
+    console.error("No browser context found.");
+    return;
+  }
+
+  const metamaskPage = context.pages().find(isMetaMaskPage);
+
+  if (metamaskPage) {
+    metamask = new MetaMask(context, metamaskPage, PASSWORD);
+
+    await metamask.importWallet(SEED_PHRASE);
+
+    return metamask;
+  }
+  return;
+}
+
+export function getMetaMask() {
+  if (metamask) return metamask;
+
+  if (!context) {
+    console.error(
+      "No browser context found. Connect to Playwright first - connectPlaywright()"
+    );
+    return;
+  }
+
+  const metamaskPage = context.pages().find(isMetaMaskPage);
+
+  if (!metamaskPage) {
+    console.error("No MetaMask page found.");
+    return;
+  }
+
+  return new MetaMask(context, metamaskPage, PASSWORD);
+}

wallets/metamask/src/cypress/setupTasks.ts

@@ -0,0 +1,28 @@
+import { getMetaMask } from "../initMetaMask";
+
+export default function setupTasks(
+  on: (
+    action: "task",
+    arg: {
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      [key: string]: (...args: any[]) => any;
+    }
+  ) => void
+) {
+  on("task", {
+    importWallet: async function (seedPhrase: string) {
+      const metamask = getMetaMask();
+      if (metamask) {
+        await metamask.importWallet(seedPhrase);
+      }
+      return true;
+    },
+    addNewAccount: async function (accountName: string) {
+      const metamask = getMetaMask();
+      if (metamask) {
+        await metamask.addNewAccount(accountName);
+      }
+      return true;
+    },
+  });
+}

wallets/metamask/src/support/commands.ts → wallets/metamask/src/cypress/support/commands.ts

@@ -25,13 +25,24 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 //
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
+// import { MetaMask } from "../metamask";
+// import { PASSWORD } from "../constants";
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      importWallet(seedPhrase: string): Chainable<void>;
+      addNewAccount(accountName: string): Chainable<void>;
+      importWalletFromPrivateKey(privateKey: string): Chainable<void>;
+    }
+  }
+}
+Cypress.Commands.add("importWallet", (seedPhrase) =>
+  cy.task("importWallet", seedPhrase)
+);
+Cypress.Commands.add("addNewAccount", (accountName) =>
+  cy.task("addNewAccount", accountName)
+);
+Cypress.Commands.add("importWalletFromPrivateKey", () =>
+  cy.task("importWalletFromPrivateKey")
+);

wallets/metamask/src/support/e2e.ts → wallets/metamask/src/cypress/support/e2e.ts

@@ -15,5 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// TODO: Add MetaMask initial setup here.

wallets/metamask/test/e2e/cypress/metamask/setupMetaMask.cy.ts

@@ -0,0 +1,11 @@
+describe('Playwright', () => {
+  it('connects to Cypress running browser', () => {
+    cy.wait(100000000)
+    // cy.connectPlaywright().then((connected) => {
+    //   expect(connected).to.equal(true);
+    // });
+  })
+  it('setup MetaMask wallet', () => {
+    // cy.initMetamask();
+  })
+})