test: add a test for the web build (#12367)

test/installation/assets/puppeteer/puppeteer-in-browser.js

@@ -0,0 +1,34 @@
+import puppeteer from 'puppeteer';
+
+const browser = await puppeteer.launch({
+  headless: true,
+  args: ['--remote-allow-origins=*'],
+});
+
+try {
+  const port = process.argv[2];
+
+  const page = await browser.newPage();
+
+  await page.goto(`http://localhost:${port}/index.html`);
+
+  await page.type('input', browser.wsEndpoint());
+
+  const [result] = await Promise.all([
+    new Promise(resolve => {
+      page.once('dialog', dialog => {
+        dialog.accept();
+        resolve(dialog.message());
+      });
+    }),
+    page.click('button'),
+  ]);
+
+  const alert = await result;
+
+  if (alert !== 'Browser has 2 pages') {
+    throw new Error('Unexpected alert content: ' + alert);
+  }
+} finally {
+  await browser.close();
+}

test/installation/package.json

@@ -29,7 +29,8 @@
       "dependencies": [
         "../../packages/puppeteer:build",
         "../../packages/puppeteer-core:build",
-        "../../packages/browsers:build"
+        "../../packages/browsers:build",
+        "../../packages/testserver:build"
       ],
       "files": [],
       "output": [

test/installation/src/constants.ts

@@ -23,3 +23,10 @@ export const ASSETS_DIR = join(
   '..',
   'assets'
 );
+export const EXAMPLES_DIR = join(
+  dirname(fileURLToPath(import.meta.url)),
+  '..',
+  '..',
+  '..',
+  'examples'
+);

test/installation/src/puppeteer.spec.ts

@@ -5,11 +5,16 @@
  */
 
 import assert from 'assert';
+import {spawnSync} from 'child_process';
 import {readdirSync} from 'fs';
+import fs from 'fs';
 import {readdir} from 'fs/promises';
 import {platform} from 'os';
 import {join} from 'path';
 
+import {TestServer} from '@pptr/testserver';
+
+import {EXAMPLES_DIR} from './constants.js';
 import {configureSandbox} from './sandbox.js';
 import {readAsset} from './util.js';
 
@@ -37,6 +42,33 @@ describe('`puppeteer`', () => {
     const script = await readAsset('puppeteer-core', 'imports.js');
     await this.runScript(script, 'mjs');
   });
+
+  it('runs in the browser', async function () {
+    const puppeteerInBrowserPath = join(this.sandbox, 'puppeteer-in-browser');
+    fs.cpSync(
+      join(EXAMPLES_DIR, 'puppeteer-in-browser'),
+      puppeteerInBrowserPath,
+      {
+        recursive: true,
+      }
+    );
+    spawnSync('npm', ['ci'], {
+      cwd: puppeteerInBrowserPath,
+      shell: true,
+    });
+    spawnSync('npm', ['run', 'build'], {
+      cwd: puppeteerInBrowserPath,
+      shell: true,
+    });
+
+    const server = await TestServer.create(puppeteerInBrowserPath);
+    try {
+      const script = await readAsset('puppeteer', 'puppeteer-in-browser.js');
+      await this.runScript(script, 'mjs', [String(server.port)]);
+    } finally {
+      await server.stop();
+    }
+  });
 });
 
 // Skipping this test on Windows as windows runners are much slower.

test/installation/src/sandbox.ts

@@ -52,7 +52,11 @@ declare module 'mocha' {
      */
     sandbox: string;
     env: NodeJS.ProcessEnv | undefined;
-    runScript: (content: string, type: 'cjs' | 'mjs') => Promise<void>;
+    runScript: (
+      content: string,
+      type: 'cjs' | 'mjs',
+      args?: string[]
+    ) => Promise<void>;
   }
 }
 
@@ -111,10 +115,14 @@ export const configureSandbox = (options: SandboxOptions): void => {
 
     this.sandbox = sandbox;
     this.env = env;
-    this.runScript = async (content: string, type: 'cjs' | 'mjs') => {
+    this.runScript = async (
+      content: string,
+      type: 'cjs' | 'mjs',
+      args?: string[]
+    ) => {
       const script = join(sandbox, `script-${crypto.randomUUID()}.${type}`);
       await writeFile(script, content);
-      await execFile('node', [script], {cwd: sandbox, env});
+      await execFile('node', [script, ...(args ?? [])], {cwd: sandbox, env});
     };
     console.timeEnd('before');
   });