w3wallets 0.3.0 → 0.4.0

package/README.md

@@ -18,6 +18,7 @@ npm install -D w3wallets
 The `Backpack` and the `Polkadot{.js}` wallets are currently supported.
 
 <p align="center">
+  <img src="https://images.ctfassets.net/clixtyxoaeas/1ezuBGezqfIeifWdVtwU4c/d970d4cdf13b163efddddd5709164d2e/MetaMask-icon-Fox.svg" alt="Metamask Logo" width="60"/>
   <img src="https://raw.githubusercontent.com/coral-xyz/backpack/refs/heads/master/assets/backpack.png" alt="Backpack Logo" width="60"/>
   <img src="https://polkadot.js.org/logo.svg" alt="Polkadot JS Logo" width="60"/>
 </p>
@@ -39,7 +40,11 @@ Install needed wallets into the chromium using `withWallets`.
 import { withWallets } from "w3wallets";
 import { test as base } from "@playwright/test";
 
-export const test = withWallets(base, 'backpack', 'polkadotJS').extend<BaseFixture>({
+export const test = withWallets(
+  base,
+  "backpack",
+  "polkadotJS",
+).extend<BaseFixture>({
   magic: (_, use) => use(42),
 });
 
@@ -52,6 +57,12 @@ export { expect } from "@playwright/test";
 
 #### 3. Use the installed wallets in tests
 
+Most of the actions will use the following methods:
+
+1. `onboard`: to set up your wallet
+2. `approve`: for operations that confirm actions
+3. `deny`: for actions that reject or cancel operations
+
 ```ts
 import { test } from "./your-fixture";
 

package/dist/index.d.mts

@@ -6,7 +6,7 @@ import { Page, test, BrowserContext } from '@playwright/test';
  */
 type BackPackNetwork = "Solana" | "Eclipse" | "Ethereum" | "Polygon" | "Base" | "Arbitrum" | "Optimism";
 
-type WalletName = "backpack" | "polkadotJS";
+type WalletName = "backpack" | "polkadotJS" | "metamask";
 type NoDuplicates<T extends readonly unknown[], Acc extends readonly unknown[] = []> = T extends [infer Head, ...infer Tail] ? Head extends Acc[number] ? never : [Head, ...NoDuplicates<Tail, [...Acc, Head]>] : T;
 interface IWallet {
     gotoOnboardPage(): Promise<void>;
@@ -52,10 +52,32 @@ declare class PolkadotJS extends Wallet {
     private _getLabeledInput;
 }
 
+type NetworkSettings = {
+    name: string;
+    rpc: string;
+    chainId: number;
+    currencySymbol: string;
+};
+
+declare class Metamask extends Wallet {
+    private defaultPassword;
+    gotoOnboardPage(): Promise<void>;
+    /**
+     *
+     * @param mnemonic 12-word mnemonic seed phrase
+     */
+    onboard(mnemonic: string, password?: string): Promise<void>;
+    connectToNetwork(settings: NetworkSettings, switchNetwork?: boolean): Promise<void>;
+    approve(): Promise<void>;
+    deny(): Promise<void>;
+    private usingNotificationPage;
+}
+
 declare function withWallets<T extends readonly WalletName[]>(test: typeof test, ...config: NoDuplicates<T>): playwright_test.TestType<playwright_test.PlaywrightTestArgs & playwright_test.PlaywrightTestOptions & {
     context: BrowserContext;
     backpack: Backpack;
     polkadotJS: PolkadotJS;
+    metamask: Metamask;
 }, playwright_test.PlaywrightWorkerArgs & playwright_test.PlaywrightWorkerOptions>;
 
 export { withWallets };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { Page, test, BrowserContext } from '@playwright/test';
  */
 type BackPackNetwork = "Solana" | "Eclipse" | "Ethereum" | "Polygon" | "Base" | "Arbitrum" | "Optimism";
 
-type WalletName = "backpack" | "polkadotJS";
+type WalletName = "backpack" | "polkadotJS" | "metamask";
 type NoDuplicates<T extends readonly unknown[], Acc extends readonly unknown[] = []> = T extends [infer Head, ...infer Tail] ? Head extends Acc[number] ? never : [Head, ...NoDuplicates<Tail, [...Acc, Head]>] : T;
 interface IWallet {
     gotoOnboardPage(): Promise<void>;
@@ -52,10 +52,32 @@ declare class PolkadotJS extends Wallet {
     private _getLabeledInput;
 }
 
+type NetworkSettings = {
+    name: string;
+    rpc: string;
+    chainId: number;
+    currencySymbol: string;
+};
+
+declare class Metamask extends Wallet {
+    private defaultPassword;
+    gotoOnboardPage(): Promise<void>;
+    /**
+     *
+     * @param mnemonic 12-word mnemonic seed phrase
+     */
+    onboard(mnemonic: string, password?: string): Promise<void>;
+    connectToNetwork(settings: NetworkSettings, switchNetwork?: boolean): Promise<void>;
+    approve(): Promise<void>;
+    deny(): Promise<void>;
+    private usingNotificationPage;
+}
+
 declare function withWallets<T extends readonly WalletName[]>(test: typeof test, ...config: NoDuplicates<T>): playwright_test.TestType<playwright_test.PlaywrightTestArgs & playwright_test.PlaywrightTestOptions & {
     context: BrowserContext;
     backpack: Backpack;
     polkadotJS: PolkadotJS;
+    metamask: Metamask;
 }, playwright_test.PlaywrightWorkerArgs & playwright_test.PlaywrightWorkerOptions>;
 
 export { withWallets };

package/dist/index.js

@@ -42,7 +42,7 @@ var import_fs = __toESM(require("fs"));
 var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
 // src/withWallets.ts
-var import_test3 = require("@playwright/test");
+var import_test4 = require("@playwright/test");
 
 // src/backpack/backpack.ts
 var import_test = require("@playwright/test");
@@ -188,13 +188,87 @@ var PolkadotJS = class extends Wallet {
   }
 };
 
+// src/metamask/metamask.ts
+var import_test3 = require("@playwright/test");
+var Metamask = class extends Wallet {
+  defaultPassword = "11111111";
+  async gotoOnboardPage() {
+    await this.page.goto(`chrome-extension://${this.extensionId}/home.html`);
+  }
+  /**
+   *
+   * @param mnemonic 12-word mnemonic seed phrase
+   */
+  async onboard(mnemonic, password = this.defaultPassword) {
+    await this.page.getByTestId("onboarding-terms-checkbox").click();
+    await this.page.getByTestId("onboarding-import-wallet").click();
+    await this.page.getByTestId("metametrics-i-agree").click();
+    for (const [i, word] of mnemonic.split(" ").entries())
+      await this.page.getByTestId(`import-srp__srp-word-${i}`).fill(word);
+    await this.page.getByTestId("import-srp-confirm").click();
+    await this.page.getByTestId("create-password-new").fill(password);
+    await this.page.getByTestId("create-password-confirm").fill(password);
+    await this.page.getByTestId("create-password-terms").click();
+    await this.page.getByTestId("create-password-import").click();
+    await this.page.getByTestId("onboarding-complete-done").click();
+    await this.page.getByTestId("pin-extension-next").click();
+    await this.page.getByTestId("pin-extension-done").click();
+  }
+  async connectToNetwork(settings, switchNetwork = true) {
+    await this.page.locator(".mm-picker-network").click();
+    await this.page.getByRole("button", { name: "Add a custom network" }).click();
+    await this.page.getByTestId("network-form-network-name").fill(settings.name);
+    await this.page.getByTestId("network-form-chain-id").fill(settings.chainId.toString());
+    await this.page.getByTestId("network-form-ticker-input").fill(settings.currencySymbol);
+    await this.page.getByTestId("test-add-rpc-drop-down").click();
+    await this.page.getByRole("button", { name: "Add RPC URL" }).click();
+    await this.page.getByTestId("rpc-url-input-test").fill(settings.rpc);
+    await this.page.getByRole("button", { name: "Add URL" }).click();
+    await this.page.getByRole("button", { name: "Save" }).click();
+    if (switchNetwork) {
+      await this.page.locator(".mm-picker-network").click();
+      await this.page.getByTestId(settings.name).click();
+    }
+  }
+  // async approve() {
+  //   return this.usingNotificationPage((p) =>
+  //     p
+  //       .locator(
+  //         '[data-test-id="confirm-footer-button"], [data-test-id="confirm-btn"]',
+  //       )
+  //       .click(),
+  //   );
+  // }
+  async approve() {
+    const p = await this.page.context().newPage();
+    await p.goto(`chrome-extension://${this.extensionId}/notification.html`);
+    await p.locator(
+      '[data-testid="confirm-footer-button"], [data-testid="confirm-btn"]'
+    ).click();
+    await p.close();
+  }
+  async deny() {
+    return this.usingNotificationPage(
+      (p) => p.getByTestId("cancel-btn").click()
+    );
+  }
+  async usingNotificationPage(action) {
+    const p = await this.page.context().newPage();
+    await p.goto(`chrome-extension://${this.extensionId}/notification.html`);
+    await action(p);
+    await p.close();
+  }
+};
+
 // src/withWallets.ts
 var w3walletsDir = ".w3wallets";
 function withWallets(test, ...config) {
   const withBackpack = config.includes("backpack");
   const withPolkadotJS = config.includes("polkadotJS");
+  const withMetamask = config.includes("metamask");
   const backpackPath = import_path.default.join(process.cwd(), w3walletsDir, "backpack");
   const polkadotJSPath = import_path.default.join(process.cwd(), w3walletsDir, "polkadotJS");
+  const metamaskPath = import_path.default.join(process.cwd(), w3walletsDir, "metamask");
   return test.extend({
     /**
      * Sets up a persistent browser context with the requested extensions loaded.
@@ -216,7 +290,11 @@ function withWallets(test, ...config) {
         ensureWalletExtensionExists(polkadotJSPath, "polkadotJS");
         extensionPaths.push(polkadotJSPath);
       }
-      const context = await import_test3.chromium.launchPersistentContext(userDataDir, {
+      if (withMetamask) {
+        ensureWalletExtensionExists(polkadotJSPath, "metamask");
+        extensionPaths.push(metamaskPath);
+      }
+      const context = await import_test4.chromium.launchPersistentContext(userDataDir, {
         headless: testInfo.project.use.headless ?? true,
         channel: "chromium",
         args: [
@@ -255,6 +333,19 @@ function withWallets(test, ...config) {
         "Polkadot{.js} is not initialized"
       );
       await use(polkadotJS);
+    },
+    metamask: async ({ context }, use) => {
+      if (!withMetamask) {
+        throw Error(
+          "The Metamask wallet hasn't been loaded. Add it to the withWallets function."
+        );
+      }
+      const metamask = await initializeExtension(
+        context,
+        Metamask,
+        "Metamask is not initialized"
+      );
+      await use(metamask);
     }
   });
 }

package/dist/index.mjs

@@ -154,13 +154,87 @@ var PolkadotJS = class extends Wallet {
   }
 };
 
+// src/metamask/metamask.ts
+import "@playwright/test";
+var Metamask = class extends Wallet {
+  defaultPassword = "11111111";
+  async gotoOnboardPage() {
+    await this.page.goto(`chrome-extension://${this.extensionId}/home.html`);
+  }
+  /**
+   *
+   * @param mnemonic 12-word mnemonic seed phrase
+   */
+  async onboard(mnemonic, password = this.defaultPassword) {
+    await this.page.getByTestId("onboarding-terms-checkbox").click();
+    await this.page.getByTestId("onboarding-import-wallet").click();
+    await this.page.getByTestId("metametrics-i-agree").click();
+    for (const [i, word] of mnemonic.split(" ").entries())
+      await this.page.getByTestId(`import-srp__srp-word-${i}`).fill(word);
+    await this.page.getByTestId("import-srp-confirm").click();
+    await this.page.getByTestId("create-password-new").fill(password);
+    await this.page.getByTestId("create-password-confirm").fill(password);
+    await this.page.getByTestId("create-password-terms").click();
+    await this.page.getByTestId("create-password-import").click();
+    await this.page.getByTestId("onboarding-complete-done").click();
+    await this.page.getByTestId("pin-extension-next").click();
+    await this.page.getByTestId("pin-extension-done").click();
+  }
+  async connectToNetwork(settings, switchNetwork = true) {
+    await this.page.locator(".mm-picker-network").click();
+    await this.page.getByRole("button", { name: "Add a custom network" }).click();
+    await this.page.getByTestId("network-form-network-name").fill(settings.name);
+    await this.page.getByTestId("network-form-chain-id").fill(settings.chainId.toString());
+    await this.page.getByTestId("network-form-ticker-input").fill(settings.currencySymbol);
+    await this.page.getByTestId("test-add-rpc-drop-down").click();
+    await this.page.getByRole("button", { name: "Add RPC URL" }).click();
+    await this.page.getByTestId("rpc-url-input-test").fill(settings.rpc);
+    await this.page.getByRole("button", { name: "Add URL" }).click();
+    await this.page.getByRole("button", { name: "Save" }).click();
+    if (switchNetwork) {
+      await this.page.locator(".mm-picker-network").click();
+      await this.page.getByTestId(settings.name).click();
+    }
+  }
+  // async approve() {
+  //   return this.usingNotificationPage((p) =>
+  //     p
+  //       .locator(
+  //         '[data-test-id="confirm-footer-button"], [data-test-id="confirm-btn"]',
+  //       )
+  //       .click(),
+  //   );
+  // }
+  async approve() {
+    const p = await this.page.context().newPage();
+    await p.goto(`chrome-extension://${this.extensionId}/notification.html`);
+    await p.locator(
+      '[data-testid="confirm-footer-button"], [data-testid="confirm-btn"]'
+    ).click();
+    await p.close();
+  }
+  async deny() {
+    return this.usingNotificationPage(
+      (p) => p.getByTestId("cancel-btn").click()
+    );
+  }
+  async usingNotificationPage(action) {
+    const p = await this.page.context().newPage();
+    await p.goto(`chrome-extension://${this.extensionId}/notification.html`);
+    await action(p);
+    await p.close();
+  }
+};
+
 // src/withWallets.ts
 var w3walletsDir = ".w3wallets";
 function withWallets(test, ...config) {
   const withBackpack = config.includes("backpack");
   const withPolkadotJS = config.includes("polkadotJS");
+  const withMetamask = config.includes("metamask");
   const backpackPath = path.join(process.cwd(), w3walletsDir, "backpack");
   const polkadotJSPath = path.join(process.cwd(), w3walletsDir, "polkadotJS");
+  const metamaskPath = path.join(process.cwd(), w3walletsDir, "metamask");
   return test.extend({
     /**
      * Sets up a persistent browser context with the requested extensions loaded.
@@ -182,6 +256,10 @@ function withWallets(test, ...config) {
         ensureWalletExtensionExists(polkadotJSPath, "polkadotJS");
         extensionPaths.push(polkadotJSPath);
       }
+      if (withMetamask) {
+        ensureWalletExtensionExists(polkadotJSPath, "metamask");
+        extensionPaths.push(metamaskPath);
+      }
       const context = await chromium.launchPersistentContext(userDataDir, {
         headless: testInfo.project.use.headless ?? true,
         channel: "chromium",
@@ -221,6 +299,19 @@ function withWallets(test, ...config) {
         "Polkadot{.js} is not initialized"
       );
       await use(polkadotJS);
+    },
+    metamask: async ({ context }, use) => {
+      if (!withMetamask) {
+        throw Error(
+          "The Metamask wallet hasn't been loaded. Add it to the withWallets function."
+        );
+      }
+      const metamask = await initializeExtension(
+        context,
+        Metamask,
+        "Metamask is not initialized"
+      );
+      await use(metamask);
     }
   });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "w3wallets",
   "description": "browser wallets for playwright",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://github.com/Maksandre/w3wallets",
@@ -17,6 +17,7 @@
     "e2e",
     "playwright",
     "backpack",
+    "metamask",
     "testing",
     "ethereum",
     "polkadot",
@@ -32,8 +33,9 @@
   "bin": "./src/scripts/download.js",
   "scripts": {
     "start:ui": "yarn workspace @w3wallets/test-app buildAndStart",
-    "download-wallets": "npx w3wallets backpack polkadotJS",
-    "test": "npx playwright test --project=ci",
+    "download-wallets": "npx w3wallets backpack polkadotJS metamask",
+    "test": "npx playwright test --project=local --workers=2",
+    "test:ci": "npx playwright test --project=ci",
     "build": "tsup",
     "clean": "rm -rf dist",
     "check-format": "prettier --check .",