@empiricalrun/playwright-utils 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @empiricalrun/playwright-utils
 
+## 0.13.0
+
+### Minor Changes
+
+- cff4d1c: feat: add third party captcha solver
+
+## 0.12.0
+
+### Minor Changes
+
+- 3c94c63: feat: EmailClient support for email otp logins
+
+### Patch Changes
+
+- ab045ff: fix: set dynamic maxQueueSize and clearer error logs
+
 ## 0.11.0
 
 ### Minor Changes

package/README.md

@@ -1,3 +1,60 @@
 # playwright-utils
 
-Playwright utils for test code repos of our customers
+Playwright utils for test code repos of our customers
+
+## Utilities
+
+- Default config for Playwright projects
+- Custom reporter
+- Highlight user actions
+  - Custom fixture to wrap around that
+- Vision capabilities
+  - `locator.query` API
+  - Captcha
+- Email automation
+  
+## Email automation
+
+### Example usage
+
+#### Dynamic email
+
+This dynamically generates a random email address that can 
+be used for the test (e.g. invite a new user).
+
+```ts
+import { EmailClient } from "@empiricalrun/playwright-utils";
+
+const client = new EmailClient();
+const address = client.getAddress();
+
+// Input the `address` in the application
+// that sends the email.
+
+// Get email received on the `address`
+const email = await client.waitForEmail();
+```
+
+#### Static email
+
+This uses a known (static) email that can be used to login
+into an application.
+
+This needs an email id (e.g. `test-login-user`). The email id
+is appended with the domain (managed internally) to get the full
+email address.
+
+```ts
+import { EmailClient } from "@empiricalrun/playwright-utils";
+
+const emailId = `test-login-user`;
+
+const client = new EmailClient({ emailId });
+const address = client.getAddress(); // Returns full address with domain
+
+// Get email received on the `address`
+const email = await client.waitForEmail();
+
+// Get login OTP
+const loginCode = email.codes[0];
+```

package/dist/captcha/index.d.ts

@@ -0,0 +1,7 @@
+import { Page } from "@playwright/test";
+type CaptchaSolveOptions = {
+    provider: "2captcha" | "llm-vision";
+};
+export declare function solveRecaptcha(page: Page, options?: CaptchaSolveOptions): Promise<void>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/captcha/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/captcha/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKxC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,UAAU,GAAG,YAAY,CAAC;CACrC,CAAC;AAMF,wBAAsB,cAAc,CAClC,IAAI,EAAE,IAAI,EACV,OAAO,GAAE,mBAAiC,iBAe3C"}

package/dist/captcha/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.solveRecaptcha = void 0;
+const puppeteer_extra_plugin_recaptcha_1 = __importDefault(require("puppeteer-extra-plugin-recaptcha"));
+const vision_1 = require("./vision");
+const defaultOpts = {
+    provider: "2captcha",
+};
+async function solveRecaptcha(page, options = defaultOpts) {
+    const { provider } = options;
+    if (provider === "2captcha") {
+        const rcPlugin = (0, puppeteer_extra_plugin_recaptcha_1.default)({
+            provider: {
+                id: "2captcha",
+                token: process.env.TWOCAPTCHA_API_KEY,
+            },
+            visualFeedback: true,
+        });
+        await rcPlugin.solveRecaptchas(page);
+    }
+    else if (provider === "llm-vision") {
+        return (0, vision_1.solveRecaptcha)(page);
+    }
+}
+exports.solveRecaptcha = solveRecaptcha;

package/dist/{captcha.d.ts → captcha/vision.d.ts}

@@ -1,3 +1,3 @@
 import { Page } from "@playwright/test";
 export declare function solveRecaptcha(page: Page): Promise<void>;
-//# sourceMappingURL=captcha.d.ts.map
+//# sourceMappingURL=vision.d.ts.map

package/dist/captcha/vision.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vision.d.ts","sourceRoot":"","sources":["../../src/captcha/vision.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAyExD,wBAAsB,cAAc,CAAC,IAAI,EAAE,IAAI,iBAiB9C"}

package/dist/email.d.ts

@@ -8,11 +8,18 @@ export type Email = {
     text?: string;
     html?: string;
     links: Link[];
+    codes: string[];
+};
+type EmailClientOptions = {
+    timeout?: number;
+    emailId?: string;
 };
 export declare class EmailClient {
     address: string;
     client: MailosaurClient;
-    constructor();
+    timeout: number;
+    serverId: string;
+    constructor(opts?: EmailClientOptions);
     getAddress(): string;
     waitForEmail(): Promise<Email | undefined>;
 }

package/dist/email.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../src/email.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,WAAW,CAAC;AAExC,KAAK,IAAI,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC;AAIF,qBAAa,WAAW;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,eAAe,CAAC;;IAUxB,UAAU;IAIJ,YAAY,IAAI,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC;CAqBjD"}
+{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../src/email.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,WAAW,CAAC;AAGxC,KAAK,IAAI,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAIF,KAAK,kBAAkB,GAAG;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,qBAAa,WAAW;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,SAAc;gBAEV,IAAI,GAAE,kBAAuB;IAWzC,UAAU;IAIJ,YAAY,IAAI,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC;CAkCjD"}

package/dist/email.js

@@ -5,36 +5,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmailClient = void 0;
 const mailosaur_1 = __importDefault(require("mailosaur"));
-const serverId = "pnyrwq5o";
+const DEFAULT_TIMEOUT = 30000;
 class EmailClient {
     address;
     client;
-    constructor() {
-        const randomString = [...Array(7)]
-            .map(() => Math.random().toString(36)[2])
-            .join("");
-        this.address = `${randomString}@${serverId}.mailosaur.net`;
+    timeout;
+    serverId = "pnyrwq5o";
+    constructor(opts = {}) {
         this.client = new mailosaur_1.default("NAEZtp2DVibTCzCxdYkZzhG4hrxSlBrV");
+        const { timeout = DEFAULT_TIMEOUT, emailId: knownEmailId } = opts;
+        this.timeout = timeout;
+        const emailId = knownEmailId ||
+            [...Array(7)].map(() => Math.random().toString(36)[2]).join("");
+        const emailDomain = `${this.serverId}.mailosaur.net`;
+        this.address = `${emailId}@${emailDomain}`;
     }
     getAddress() {
         return this.address;
     }
     async waitForEmail() {
         try {
-            const email = await this.client.messages.get(serverId, {
+            const email = await this.client.messages.get(this.serverId, {
                 sentTo: this.address,
-            }, { timeout: 30000 });
-            if (email) {
-                return {
-                    subject: email.subject,
-                    text: email.text?.body,
-                    html: email.html?.body,
-                    links: email.html?.links || [],
-                };
-            }
+            }, { timeout: this.timeout });
+            const codesAsString = (email.html?.codes || []).map((code) => code.value);
+            return {
+                subject: email.subject,
+                text: email.text?.body,
+                html: email.html?.body,
+                links: email.html?.links || [],
+                codes: codesAsString,
+            };
         }
         catch (error) {
-            console.log("Error receiving email");
+            if (error.errorType) {
+                const mailosaurError = error;
+                if (mailosaurError.errorType === "authentication_error") {
+                    throw new Error("Email provider error: Authentication error");
+                }
+                else if (mailosaurError.errorType === "search_timeout") {
+                    throw new Error(`Email not received within ${this.timeout}ms`);
+                }
+                else {
+                    console.error(`Mailosaur error: ${mailosaurError.httpResponseBody}`);
+                    throw new Error(`Unknown error: ${mailosaurError.errorType}`);
+                }
+            }
+            throw error;
         }
     }
 }

package/dist/reporter/custom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom.d.ts","sourceRoot":"","sources":["../../src/reporter/custom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAMH,OAAO,KAAK,EACV,UAAU,EACV,UAAU,EAEV,KAAK,EACL,QAAQ,IAAI,cAAc,EAC1B,SAAS,EACT,UAAU,IAAI,gBAAgB,EAE/B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAML,UAAU,EAMX,MAAM,2BAA2B,CAAC;AAgBnC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAiC/C,QAAA,MAAM,iBAAiB,UAAoC,CAAC;AAC5D,KAAK,oBAAoB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAM/D,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,cAAM,YAAa,YAAW,UAAU;IACtC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,mBAAmB,CAAU;IACrC,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,oBAAoB,CAAiC;IAC7D,OAAO,CAAC,kBAAkB,CAAkC;IAC5D,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAO,CAAC,YAAY;YA8BN,uBAAuB;IAQrC,OAAO,CAAC,YAAY,CAEN;IACd,OAAO,CAAC,eAAe,CAAmB;gBAE9B,OAAO,EAAE,mBAAmB;IAIxC,aAAa;IAIb,QAAQ;IAER,QAAQ;IAER,WAAW;IAEX,SAAS;IAET,OAAO,IAAI,IAAI;IAIf,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQvC,SAAS,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB;IAyDxD,WAAW,CAAC,MAAM,EAAE,UAAU;IAI9B,OAAO,CAAC,KAAK,EAAE,KAAK;IAYpB,eAAe,IAAI;QACjB,YAAY,EAAE,MAAM,CAAC;QACrB,IAAI,EAAE,oBAAoB,CAAC;QAC3B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;QACzB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;KAC1B;IAsBD,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO;IASxD,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAIzB,KAAK,CAAC,MAAM,EAAE,UAAU;IA8FxB,MAAM;CA8Bb;AAkCD,wBAAsB,cAAc,CAClC,YAAY,EAAE,MAAM,GAAG,SAAS,EAChC,IAAI,GAAE,MAAoB,EAC1B,IAAI,CAAC,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,iBAqBhB;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAsBhE;AAqiBD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"custom.d.ts","sourceRoot":"","sources":["../../src/reporter/custom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAMH,OAAO,KAAK,EACV,UAAU,EACV,UAAU,EAEV,KAAK,EACL,QAAQ,IAAI,cAAc,EAC1B,SAAS,EACT,UAAU,IAAI,gBAAgB,EAE/B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAML,UAAU,EAMX,MAAM,2BAA2B,CAAC;AAgBnC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAiC/C,QAAA,MAAM,iBAAiB,UAAoC,CAAC;AAC5D,KAAK,oBAAoB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAM/D,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,cAAM,YAAa,YAAW,UAAU;IACtC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,mBAAmB,CAAU;IACrC,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,oBAAoB,CAAiC;IAC7D,OAAO,CAAC,kBAAkB,CAAkC;IAC5D,OAAO,CAAC,kBAAkB,CAEpB;IAEN,OAAO,CAAC,YAAY;YA8BN,uBAAuB;IAQrC,OAAO,CAAC,YAAY,CAEN;IACd,OAAO,CAAC,eAAe,CAAmB;gBAE9B,OAAO,EAAE,mBAAmB;IAIxC,aAAa;IAIb,QAAQ;IAER,QAAQ;IAER,WAAW;IAEX,SAAS;IAET,OAAO,IAAI,IAAI;IAIf,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQvC,SAAS,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB;IA4DxD,WAAW,CAAC,MAAM,EAAE,UAAU;IAI9B,OAAO,CAAC,KAAK,EAAE,KAAK;IAYpB,eAAe,IAAI;QACjB,YAAY,EAAE,MAAM,CAAC;QACrB,IAAI,EAAE,oBAAoB,CAAC;QAC3B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;QACzB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;KAC1B;IAsBD,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO;IASxD,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAIzB,KAAK,CAAC,MAAM,EAAE,UAAU;IA6FxB,MAAM;CA8Bb;AAkCD,wBAAsB,cAAc,CAClC,YAAY,EAAE,MAAM,GAAG,SAAS,EAChC,IAAI,GAAE,MAAoB,EAC1B,IAAI,CAAC,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,iBAqBhB;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAsBhE;AAqiBD,eAAe,YAAY,CAAC"}

package/dist/reporter/custom.js

@@ -49,25 +49,27 @@ class HtmlReporter {
     _testCount = 1;
     uploadExecutionQueue = [];
     uploadWaitingQueue = [];
-    uploadMaxQueueSize = 2;
+    uploadMaxQueueSize = process.env.UPLOAD_MAX_QUEUE_SIZE
+        ? parseInt(process.env.UPLOAD_MAX_QUEUE_SIZE)
+        : 2;
     processQueue() {
         try {
-            // console.log("Execution queue length: ", this.uploadExecutionQueue.length);
-            // console.log("Waiting queue length: ", this.uploadWaitingQueue.length);
-            while (this.uploadExecutionQueue.length < this.uploadMaxQueueSize &&
+            while (this.uploadExecutionQueue.length <= this.uploadMaxQueueSize &&
                 this.uploadWaitingQueue.length > 0) {
                 const task = this.uploadWaitingQueue.shift();
                 if (task) {
                     const promise = task()
-                        .catch((e) => {
-                        // this.retryTask(task); // Handle retries ?
-                        console.log("Upload failed ", e);
+                        .catch(() => {
+                        // this.retryTask(task); // Retries handled within task itself
+                        // console.log("Upload failed", e); // error is already logged in the upload function
                     })
                         .finally(() => {
+                        // console.log("Finished upload execution from waiting queue"); // we already log in the upload function on successful upload
                         // eslint-disable-next-line @typescript-eslint/no-floating-promises
                         this.uploadExecutionQueue = this.uploadExecutionQueue.filter((p) => p !== promise);
                         this.processQueue();
                     });
+                    console.log("Executing task from queue");
                     this.uploadExecutionQueue.push(promise);
                 }
             }
@@ -126,21 +128,24 @@ class HtmlReporter {
                             folderName,
                         uploadBucket: "test-report",
                     });
-                    if (this.uploadExecutionQueue.length < this.uploadMaxQueueSize) {
+                    if (this.uploadExecutionQueue.length <= this.uploadMaxQueueSize) {
                         const promise = uploadTask()
                             .catch((e) => {
-                            console.error("R2 upload failed for", attachment.path, e);
+                            console.error("Upload failed for", attachment.path, e);
                             // this.retryTask(uploadTask); // Retry logic
                         })
                             .finally(() => {
-                            console.log("Upload finished for ", attachment.path);
+                            // we already log in the upload function on successful upload
+                            // console.log("Finished upload execution for ", attachment.path);
                             // eslint-disable-next-line @typescript-eslint/no-floating-promises
                             this.uploadExecutionQueue = this.uploadExecutionQueue.filter((p) => p !== promise);
                             this.processQueue(); // Keep processing queue
                         });
+                        console.log("Executing upload task for ", attachment.path);
                         this.uploadExecutionQueue.push(promise);
                     }
                     else {
+                        console.log("Queuing upload task ", attachment.path);
                         this.uploadWaitingQueue.push(uploadTask);
                     }
                 }
@@ -239,8 +244,9 @@ class HtmlReporter {
             this.uploadWaitingQueue.push(uploadTraceTask);
             this.uploadWaitingQueue.push(uploadIndexTask);
             this.uploadWaitingQueue.push(uploadSummaryTask);
-            // await Promise.allSettled(this.uploadExecutionQueue);
+            console.log("Waiting for all uploads to finish");
             await this.waitForAllTasksToFinish();
+            console.log("All uploads finished");
             const endTime = new Date().getTime();
             console.log("Finished final report upload at: ", new Intl.DateTimeFormat("en-US", {
                 hour: "2-digit",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empiricalrun/playwright-utils",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -36,6 +36,8 @@
     "md5": "^2.3.0",
     "mime": "3.0.0",
     "playwright-core": "^1.46.1",
+    "playwright-extra": "^4.3.6",
+    "puppeteer-extra-plugin-recaptcha": "^3.6.8",
     "@empiricalrun/llm": "^0.9.1",
     "@empiricalrun/r2-uploader": "^0.1.3"
   },

package/dist/captcha.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"captcha.d.ts","sourceRoot":"","sources":["../src/captcha.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAyExD,wBAAsB,cAAc,CAAC,IAAI,EAAE,IAAI,iBAiB9C"}