feat: exposing waitForSelectors

pixeleye-io · May 22, 2024 · 0b4d68a · 0b4d68a
1 parent e45bc21
commit 0b4d68a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 2 deletions.
diff --git a/.changeset/ninety-games-judge.md b/.changeset/ninety-games-judge.md
@@ -0,0 +1,7 @@
+---
+"@pixeleye/playwright": patch
+"@pixeleye/puppeteer": patch
+"@pixeleye/cypress": patch
+---
+
+Exposing waitForSelectors option
diff --git a/integrations/cypress/src/snapshot.ts b/integrations/cypress/src/snapshot.ts
@@ -9,6 +9,7 @@ export interface Options {
   selector?: string;
   devices?: DeviceDescriptor[];
   maskSelectors?: string[];
+  waitForSelectors?: string[];
   maskColor?: string;
   css?: string;
   wait?: number;
@@ -33,6 +34,10 @@ export const pixeleyeSnapshot = (options: Options) => {
       ? `${configCSS ?? ""}\n${options.css ?? ""}`
       : undefined;
 
+  for (const waitForSelector of options.waitForSelectors ?? []) {
+    cy.get(waitForSelector);
+  }
+
   return cy.document().then(async (doc) => {
     const serializedDom = domSnapshot(doc, {
       recordCanvas: true,
@@ -53,6 +58,7 @@ export const pixeleyeSnapshot = (options: Options) => {
       serializedDom,
       fullPage: options.fullPage,
       wait: options.wait,
+      waitForSelectors: options.waitForSelectors,
     };
 
     cy.request({

diff --git a/integrations/playwright/src/snapshot.ts b/integrations/playwright/src/snapshot.ts
@@ -24,7 +24,11 @@ export interface Options {
   fullPage?: boolean;
   variant?: string;
   selector?: string;
+  /**
+   * @deprecated use {@link Options.waitForSelectors} instead
+   */
   waitForSelector?: string;
+  waitForSelectors?: string[];
   devices?: DeviceDescriptor[];
   maskSelectors?: string[];
   maskColor?: string;
@@ -62,8 +66,19 @@ export async function pixeleyeSnapshot(page: Page, options: Options) {
     path: rrwebScript,
   });
 
-  if (options.waitForSelector)
-    await page.waitForSelector(options.waitForSelector);
+  // TODO remove in next major release
+  if (options.waitForSelector) {
+    options.waitForSelectors = [
+      options.waitForSelector,
+      ...(options.waitForSelectors ?? []),
+    ];
+  }
+
+  if (options.waitForSelectors) {
+    for (const selector of options.waitForSelectors) {
+      await page.waitForSelector(selector);
+    }
+  }
 
   const domSnapshot = await (page as Page).evaluate(() => {
     const r: RRWeb = (window as any).rrwebSnapshot;
@@ -88,6 +103,7 @@ export async function pixeleyeSnapshot(page: Page, options: Options) {
     maskSelectors: options.maskSelectors,
     maskColor: options.maskColor,
     wait: options.wait,
+    waitForSelectors: options.waitForSelectors,
     css,
   };
 

diff --git a/integrations/puppeteer/src/snapshot.ts b/integrations/puppeteer/src/snapshot.ts
@@ -28,6 +28,7 @@ export interface Options {
   selector?: string;
   devices?: DeviceDescriptor[];
   maskSelectors?: string[];
+  waitForSelectors?: string[];
   maskColor?: string;
   css?: string;
   wait?: number;
@@ -66,6 +67,12 @@ export async function pixeleyeSnapshot(
     path: rrwebScript,
   });
 
+  if (options.waitForSelectors) {
+    for (const selector of options.waitForSelectors) {
+      await page.waitForSelector(selector);
+    }
+  }
+
   const domSnapshot = await (page as Page).evaluate(() => {
     const r: RRWeb = (window as any).rrwebSnapshot;
 
@@ -90,6 +97,7 @@ export async function pixeleyeSnapshot(
     maskSelectors: options.maskSelectors,
     maskColor: options.maskColor,
     wait: options.wait,
+    waitForSelectors: options.waitForSelectors,
     css,
   };