Merge pull request #9 from lightpanda-io/playwright-lightpanda

Playwright: connect over CDP

Author: krichprollsch

README.md

@@ -150,7 +150,7 @@ $ /usr/bin/time -v ./browsercore-get --dump http://127.0.0.1:1234/campfire-comme
 ## Multiple requests using Playwright
 
 We compare now multiple page loads and js evaluations using
-[Playwright](https://playwright.dev).
+[Playwright](https://playwright.dev), which connects to the browser using CDP (Chrome Debug Protocol).
 
 ### Dependencies
 
@@ -162,20 +162,34 @@ dependencies, mainly Playwright.
 You have also to install [Google Chrome](https://www.google.com/chrome/) and
 Lightpanda browser, but the code is not publicly available yet.
 
-### Google Chrome benchmark
+### Running the benchmark
 
-We use Google Chrome version 123.0.6312.105.
-
-The `playwright/chrome.js` benchmark accepts multiple env vars to be configured.
-* `CHROME_PATH` is the path to your Google Chrome bin,
-* `BASE_URL` is the base url of the running web reser to request, by default `http://127.0.0.1:1234`,
+The `playwright/cdp.js` benchmark accepts multiple env vars to be configured.
+* `BROWSER_ADDRESS` is the address of the running browser listening the CDP protocol, by default `http://127.0.0.1:9222`.
+* `BASE_URL` is the base url of the running web reser to request, by default `http://127.0.0.1:1234`.
 * `RUNS` is the number of pages loaded by the benchmark, default is `100`.
 
-`npm run bench-chrome` starts a playwright process, load a Google Chrome
+`npm run bench-cdp` starts a playwright process
 instance and load the page to extract data 100 times.
 
 ```console
-$ CHROME_PATH=`which google-chrome` npm run bench-chrome
+$ npm run bench-cdp
+```
+
+### Results
+
+**Google Chrome**
+
+We use Google Chrome version 123.0.6312.105.
+
+You have to start the browser first.
+```console
+$ google-chrome --headless=new --disable-gpu --remote-debugging-port=9222
+```
+
+Then you can run the benchmark.
+```console
+$ npm run bench-cdp
 
 > [email protected] bench-chrome
 > node playwright/chrome.js

package.json

@@ -5,9 +5,8 @@
   "description": "Lightpanda browser demo",
   "main": "index.js",
   "scripts": {
-    "install-chrome": "npx playwright install chrome",
     "ws": "go run ws/main.go",
-    "bench-chrome": "node playwright/chrome.js"
+    "bench-cdp": "node playwright/cdp.js"
   },
   "repository": {
     "type": "git",

playwright/chrome.js renamed to playwright/cdp.js

@@ -15,18 +15,8 @@
 // Import the Chromium browser into our scraper.
 import { chromium } from 'playwright';
 
-// options passed to the browser.
-let browser_options = {};
-
-// chrome browser path
-if (process.env.CHROME_PATH) {
-    browser_options.executablePath = process.env.CHROME_PATH;
-}
-
-// headless
-if (process.env.HEADLESS) {
-    browser_options.headless = process.env.HEADLESS === 'true';
-}
+// browserAddress
+const browserAddress = process.env.BROWSER_ADDRESS ? process.env.BROWSER_ADDRESS : 'http://127.0.0.1:9222';
 
 // web serveur url
 const baseURL = process.env.BASE_URL ? process.env.BASE_URL : 'http://127.0.0.1:1234';
@@ -39,9 +29,9 @@ const gstart = process.hrtime.bigint();
 // store all run durations
 let metrics = [];
 
-// Open a Chromium browser. We use headless: false
-// to be able to watch the browser window.
-const browser = await chromium.launch(browser_options);
+// Connect to an existing browser
+console.log("Connection to browser on " + browserAddress);
+const browser = await chromium.connectOverCDP(browserAddress);
 
 for (var run = 1; run<=runs; run++) {