DEV Community

Sony AK
Sony AK

Posted on

7

How to use Playwright with external/existing 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.');
    }
})();
Enter fullscreen mode Exit fullscreen mode

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

node ./index.js
Enter fullscreen mode Exit fullscreen mode

Happy using Playwright.

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (3)

Collapse
 
akhil_charugulla_896edc6c profile image

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

Image description

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' ] }
Collapse
 
akhil_charugulla_896edc6c profile image
akhil charugulla

solved it
its just a missing import issue

Collapse
 
vlatkodimeski profile image
driveIN

good job man!
Thanks!

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay