Simplify setup in happoPlaywright.init

.github/workflows/test.yml

@@ -0,0 +1,35 @@
+name: Run tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Start dev server in the background
+        run: yarn dev &
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium
+
+      - name: Run tests
+        run: yarn test
+        env:
+          HAPPO_API_KEY: ${{ secrets.HAPPO_API_KEY }}
+          HAPPO_API_SECRET: ${{ secrets.HAPPO_API_SECRET }}

index.js

@@ -3,14 +3,31 @@ const pathToBrowserBuild = require.resolve('happo-e2e/browser.build.js');
 
 const controller = new Controller();
 
+async function lazyLoadBrowserBundle(page) {
+  if (
+    await page.evaluate(() => typeof window.happoTakeDOMSnapshot === 'undefined')
+  ) {
+    await page.addScriptTag({ path: pathToBrowserBuild });
+
+    // Add timeout check for happoTakeDOMSnapshot
+    try {
+      await page.waitForFunction(
+        () => typeof window.happoTakeDOMSnapshot !== 'undefined',
+        { timeout: 10000 },
+      );
+    } catch (error) {
+      throw new Error('Timed out waiting for happoTakeDOMSnapshot to be defined');
+    }
+  }
+}
+
 module.exports = {
-  async init(contextOrPage) {
-    await contextOrPage.addInitScript({ path: pathToBrowserBuild });
-    await contextOrPage.addInitScript(`
-      window.addEventListener('load', () => {
-        window.happoTakeDOMSnapshot.init(window);
-      });
-    `);
+  async init(pageOrContext) {
+    if (pageOrContext) {
+      console.warn(
+        '[HAPPO] You no longer need to pass a page or context to happoPlaywright.init()',
+      );
+    }
     await controller.init();
   },
 
@@ -35,6 +52,8 @@ module.exports = {
       );
     }
 
+    await lazyLoadBrowserBundle(page);
+
     const elementHandle = handleOrLocator.elementHandle
       ? await handleOrLocator.elementHandle()
       : handleOrLocator;

tests/app.spec.js

@@ -1,11 +1,11 @@
 const { test, expect } = require('@playwright/test');
 const happoPlaywright = require('../');
 
-test.beforeEach(async ({ context }) => {
-  await happoPlaywright.init(context);
+test.beforeAll(async () => {
+  await happoPlaywright.init();
 });
 
-test.afterEach(async () => {
+test.afterAll(async () => {
   await happoPlaywright.finish();
 });