How to use Playwright with external/existing Chrome

#playwright #javascript #chrome

Mostly example using Playwright in JavaScript is using Chromium that bundled with Playwright. How about if we want to use existing or external Chrome?

No worries, it means you have to set the Playwright to connect to a Chromium instance manually using Chrome DevTools Protocol (CDP) and that means you should run the Chrome with --remote-debugging-port=9222.

For the external Chrome I recommend using Chrome for Testing that is good for this situation. Just to to https://developer.chrome.com/blog/chrome-for-testing to read more.

I have created the repository and quick script sample about this. Just go to https://github.com/sonyarianto/playwright-using-external-chrome

Wanna quick try? Here is the script index.js.

import { chromium } from 'playwright';

(async () => {
    try {
        const browser = await chromium.connectOverCDP('http://localhost:9222');

        console.log(browser.isConnected() && 'Connected to Chrome.');
        console.log(`Contexts in CDP session: ${browser.contexts().length}.`);

        const context = browser.contexts()[0];

        const page = await context.newPage();
        await page.goto('https://example.com');
        await page.screenshot({ path: 'example.png' });

        await page.close();
        await context.close();
        await browser.close();
    } catch (error) {
        console.log('Cannot connect to Chrome.');
    }
})();

Then run it like this. Make sure you already run the Chrome first (with argument --remote-debugging-port=9222).

node ./index.js

Happy using Playwright.

Top comments (3)

akhil charugulla • Oct 13 • Edited

I am getting this error while running the code. Please can you help what is going wrong
Running chrome in remote debugging port 9223

PS B:\job-search\jobsearchplaywright> npx ts-node excelToGoogleSearch.ts
node:internal/modules/cjs/loader:1228
throw err;
^

Error: Cannot find module './excelToGoogleSearch.ts'
Require stack:

B:\job-search\jobsearchplaywright\imaginaryUncacheableRequireResolveScript at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15) at Function.resolve (node:internal/modules/helpers:190:19) at requireResolveNonCached (B:\job-search\jobsearchplaywright\node_modules\ts-node\dist\bin.js:549:16) at getProjectSearchDir (B:\job-search\jobsearchplaywright\node_modules\ts-node\dist\bin.js:519:40) at phase3 (B:\job-search\jobsearchplaywright\node_modules\ts-node\dist\bin.js:267:27) at bootstrap (B:\job-search\jobsearchplaywright\node_modules\ts-node\dist\bin.js:47:30) at main (B:\job-search\jobsearchplaywright\node_modules\ts-node\dist\bin.js:33:12) at Object. (B:\job-search\jobsearchplaywright\node_modules\ts-node\dist\bin.js:579:5) at Module._compile (node:internal/modules/cjs/loader:1469:14) at Module._extensions..js (node:internal/modules/cjs/loader:1548:10) { code: 'MODULE_NOT_FOUND', requireStack: [ 'B:\job-search\jobsearchplaywright\imaginaryUncacheableRequireResolveScript' ] }