puppeteer-extra-plugin-portal

puppeteer-extra-plugin-portal

A puppeteer-extra plugin to remotely view and interact with puppeteer sessions. Essentially opening a "portal" to the page.

Demo

Here is a demo of the code below:

https://user-images.githubusercontent.com/6274312/135788752-3b919efa-6b64-4c0b-859a-62cafcf9a7b8.mp4

Install

yarn add puppeteer-extra-plugin-portal
# - or -
npm install puppeteer-extra-plugin-portal

If this is your first puppeteer-extra plugin here's everything you need:

yarn add puppeteer puppeteer-extra puppeteer-extra-plugin-portal
# - or -
npm install puppeteer puppeteer-extra puppeteer-extra-plugin-portal

Usage your own express server (middleware)

// puppeteer-extra is a drop-in replacement for puppeteer,
// it augments the installed puppeteer with plugin functionality
import puppeteer from 'puppeteer-extra';

import express from 'express';

// add portal plugin
import PortalPlugin from 'puppeteer-extra-plugin-portal';
puppeteer.use(
  PortalPlugin({
    webPortalConfig: {
        // When used as middleware, you'll need to provide the baseUrl if it's anything but `http://localhost:3000`
        baseUrl: 'http://localhost:3001',
      },
  })
)

const app = express();
app.use(portalPlugin.createExpressMiddleware());
const server = app.listen(3001);
server.headersTimeout = 0; // Required for Node 18+ due to slow loris attack change

// puppeteer usage as normal
puppeteer.launch({ headless: true }).then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://www.google.com/recaptcha/api2/demo');

  // Open a portal to get a link to it. 
  const portalUrl = await page.openPortal();
  console.log('Portal URL:', portalUrl);

  // Wait a long time for the success condition to be met
  const successDiv = await page.waitForSelector('.recaptcha-success', {
      timeout: 86400 * 1000, // 24 hours
    });
  
  await page.closePortal(); // You can manually close a portal with
  // OR
  await page.close(); // Closing the page will automatically close its portal.
  // OR
  await browser.close(); // Closing the browser will automatically close the portals opened on it.
})

// You'll need to close the server on your own
app.close()

Usage with plugin-managed server

// puppeteer-extra is a drop-in replacement for puppeteer,
// it augments the installed puppeteer with plugin functionality
import puppeteer from 'puppeteer-extra';


// add portal plugin
import PortalPlugin from 'puppeteer-extra-plugin-portal';
puppeteer.use(
  PortalPlugin({
    // This is a typical configuration when hosting behind a secured reverse proxy
    webPortalConfig: {
        listenOpts: {
          port: 3000,
        },
        baseUrl: 'https://portal.example.com',
      },
  })
)

// puppeteer usage as normal
puppeteer.launch({ headless: true }).then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://www.google.com/recaptcha/api2/demo');

  // Open a portal to get a link to it. 
  const portalUrl = await page.openPortal();
  console.log('Portal URL:', portalUrl);

  // Wait a long time for the success condition to be met
  const successDiv = await page.waitForSelector('.recaptcha-success', {
      timeout: 86400 * 1000, // 24 hours
    });
  
  await page.closePortal(); // You can manually close a portal with
  // OR
  await page.close(); // Closing the page will automatically close its portal.
  // OR
  await browser.close(); // Closing the browser will automatically close the portals opened on it.
  // When all portals are closed, the web server will automatically shut down
})