w3wallets 0.2.0 → 0.2.2

package/README.md

@@ -3,6 +3,7 @@
 ![License](https://img.shields.io/badge/License-MIT-yellow.svg)
 [![npm version](https://img.shields.io/npm/v/w3wallets.svg)](https://www.npmjs.com/package/w3wallets)
 ![CodeQL](https://github.com/Maksandre/w3wallets/actions/workflows/github-code-scanning/codeql/badge.svg?branch=main)
+[![Tests](https://github.com/Maksandre/w3wallets/actions/workflows/playwright.yml/badge.svg?branch=main)](https://github.com/Maksandre/w3wallets/actions/workflows/playwright.yml)
 
 Web3 wallets for Playwright.
 
@@ -16,6 +17,11 @@ npm install -D w3wallets
 
 The `Backpack` and the `Polkadot{.js}` wallets are currently supported.
 
+<p align="center">
+  <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>
+
 #### 1. Download wallets
 
 ```sh
@@ -26,54 +32,33 @@ The unzipped files should be stored in the `.w3wallets/<wallet-name>` directory.
 
 #### 2. Wrap your fixture `withWallets`
 
+Install needed wallets into the chromium using `withWallets`.
+
 ```ts
+// your-fixture.ts
+import { withWallets } from "w3wallets";
 import { test as base } from "@playwright/test";
-import { withWallets } from "../src/withWallets";
-
-// Specify one or many wallets that should be installed in the browser
-const test = withWallets(base, "backpack", "polkadotJS");
-
-test("has title", async ({ page, backpack }) => {
-  await page.goto("https://playwright.dev/");
 
-  const privateKey =
-    "4wDJd9Ds5ueTdS95ReAZGSBVkjMcNKbgZk47xcmqzpUJjCt7VoB2Cs7hqwXWRnopzXqE4mCP6BEDHCYrFttEcBw2";
-
-  await backpack.onboard("Eclipse", privateKey);
+export const test = withWallets(base, 'backpack', 'polkadotJS').extend<BaseFixture>({
+  magic: (_, use) => use(42),
 });
-```
-
-## Run tests
 
-To work on this project in VS Code, make sure you open the project's root directory.
+type BaseFixture = {
+  magic: number;
+};
 
-0. Create the `.env` using `.env.example` as a reference.
-1. Install dependencies
-
-```sh
-yarn
+export { expect } from "@playwright/test";
 ```
 
-2. Install Chrome browser
-
-```sh
-npx playwright install chromium
-```
+#### 3. Use the installed wallets in tests
 
-3. Download wallet extensions
-
-```sh
-npx w3wallets backpack polkadotJS
-```
-
-4. Start UI
-
-```sh
-yarn start:ui
-```
+```ts
+import { test } from "./your-fixture";
 
-5. Run Tests with Playwright
+test("Can use wallet", async ({ page, backpack }) => {
+  const privateKey =
+    "4wDJd9Ds5ueTdS95ReAZGSBVkjMcNKbgZk47xcmqzpUJjCt7VoB2Cs7hqwXWRnopzXqE4mCP6BEDHCYrFttEcBw2";
 
-```sh
-yarn test
+  await backpack.onboard("Eclipse", privateKey);
+});
 ```

package/dist/index.js

@@ -98,10 +98,10 @@ var Backpack = class extends Wallet {
     await ignoreButton.click();
   }
   async approve() {
-    await this.page.getByText("Approve").click();
+    await this.page.getByText("Approve", { exact: true }).click();
   }
   async deny() {
-    await this.page.getByText("Deny").click();
+    await this.page.getByText("Deny", { exact: true }).click();
   }
 };
 
@@ -191,13 +191,13 @@ function withWallets(test, ...config) {
         extensionPaths.push(polkadotJSPath);
       }
       const context = await import_test3.chromium.launchPersistentContext(userDataDir, {
-        headless: false,
+        headless: testInfo.project.use.headless ?? true,
+        channel: "chromium",
         args: [
           `--disable-extensions-except=${extensionPaths.join(",")}`,
           `--load-extension=${extensionPaths.join(",")}`
         ]
       });
-      await context.waitForEvent("serviceworker");
       while (context.serviceWorkers().length < extensionPaths.length) {
         await sleep(1e3);
       }

package/dist/index.mjs

@@ -64,10 +64,10 @@ var Backpack = class extends Wallet {
     await ignoreButton.click();
   }
   async approve() {
-    await this.page.getByText("Approve").click();
+    await this.page.getByText("Approve", { exact: true }).click();
   }
   async deny() {
-    await this.page.getByText("Deny").click();
+    await this.page.getByText("Deny", { exact: true }).click();
   }
 };
 
@@ -157,13 +157,13 @@ function withWallets(test, ...config) {
         extensionPaths.push(polkadotJSPath);
       }
       const context = await chromium.launchPersistentContext(userDataDir, {
-        headless: false,
+        headless: testInfo.project.use.headless ?? true,
+        channel: "chromium",
         args: [
           `--disable-extensions-except=${extensionPaths.join(",")}`,
           `--load-extension=${extensionPaths.join(",")}`
         ]
       });
-      await context.waitForEvent("serviceworker");
       while (context.serviceWorkers().length < extensionPaths.length) {
         await sleep(1e3);
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "w3wallets",
   "description": "browser wallets for playwright",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://github.com/Maksandre/w3wallets",
@@ -31,8 +31,9 @@
   ],
   "bin": "./src/scripts/download.js",
   "scripts": {
-    "start:ui": "yarn workspace @w3wallets/test-app dev",
-    "test": "npx playwright test",
+    "start:ui": "yarn workspace @w3wallets/test-app buildAndStart",
+    "download-wallets": "npx w3wallets backpack polkadotJS",
+    "test": "npx playwright test --project=ci",
     "build": "tsup",
     "clean": "rm -rf dist",
     "check-format": "prettier --check .",
@@ -43,10 +44,6 @@
     "changeset": "npx changeset",
     "local-release": "changeset version && changeset publish"
   },
-  "dependencies": {
-    "follow-redirects": "^1.15.9",
-    "unzip-crx": "^0.2.0"
-  },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.17.2",
     "@changesets/cli": "^2.27.11",