Using Kameleo with Playwright framework

When you are working with Kameleo and Playwright:

1. You will use Kameleo Local API to manage your virtual browser profiles and launch Kameleo's built-in browsers.
2. You will use a Playwright client library to drive the browser using a modified version of Chrome DevTools Protocol.

Automate any browsing activity with Playwright. We'll help with keeping your scripts undetected by the sites you're visiting so that they won't see automation tools in use. Let's see how.

Before reading this article, we recommend reading the Getting started with Kameleo Automation article.

Known limitations

• Do not use multiple browser contexts when working with Playwright, as it can cause unexpected behavior. If you would like to use several contexts, please utilize Kameleo's virtual browser profiles.
• Do not open any incognito window as Kameleo is not yet fully functional in incognito mode.
• When you are using different versions of Kameleo you will have to use different versions of Playwright libraries. Please refer to the table below.

Best practices

Do not use any other browser fingerprint modifier tool besides Kameleo (such as playwright-extra-plugin-stealth, Canvas Fingerprint Defender, etc.) because those tools may interfere with Kameleo's ability to spoof correctly.

Install Playwright

• To work with Playwright, you need to install its official library.

  npm i playwright

• To work with Playwright, you need to install its official library.

  Install-Package Microsoft.Playwright

• To work with Playwright, you need to install its official library.

  pip install playwright

Connect Playwright to a Kameleo profile

1. Follow this guide for starting a profile from your script. Once the profile is up and running, you can move on to the next step to control it with Puppeteer commands.

2. You need to connect to the browser through a WebSocket URL through the Kameleo.CLI component's /playwright/{profileId} endpoint. It is a little different for Firefox and for Chromium-based browsers.

   Chroma browser (Chromium-based Base Profiles & Mobile Profiles)

   • const playwright = require('playwright');
     
     const browserWSEndpoint = `ws://localhost:${kameleoPort}/playwright/${profile.id}`;
     const browser = await playwright.chromium.connectOverCDP(browserWSEndpoint);

   • using Microsoft.Playwright;
     
     var browserWsEndpoint = $"ws://localhost:{KameleoPort}/playwright/{profile.Id}";
     var playwright = await Playwright.CreateAsync();
     var browser = await playwright.Chromium.ConnectOverCDPAsync(browserWsEndpoint);

   • from playwright.sync_api import sync_playwright
     
     browser_ws_endpoint = f'ws://localhost:{kameleo_port}/playwright/{profile.id}'
     with sync_playwright() as playwright:
       browser = playwright.chromium.connect_over_cdp(endpoint_url=browser_ws_endpoint)

   Junglefox browser (Firefox Base Profiles)

   The Playwright framework is not designed to connect to already running browsers. To overcome this limitation, a tool bundled with Kameleo, named pw-bridge.exe will bridge the communication gap between the running Firefox instance and this playwright script.

   • const playwright = require('playwright');
     
     const browserWSEndpoint = `ws://localhost:${kameleoPort}/playwright/${profile.id}`;
     const browser = await playwright.firefox.launchPersistentContext('', {
       // The Playwright framework is not designed to connect to already running
       // browsers. To overcome this limitation, a tool bundled with Kameleo, named
       // pw-bridge.exe will bridge the communication gap between the running Firefox
       // instance and this playwright script.
       executablePath: '<PATH_TO_KAMELEO_FOLDER>\\pw-bridge.exe',
       args: [`-target ${browserWSEndpoint}`],
       persistent: true,
       viewport: null,
     });

   • using Microsoft.Playwright;
     
     var browserWsEndpoint = $"ws://localhost:{KameleoPort}/playwright/{profile.Id}";
     var playwright = await Playwright.CreateAsync();
       var browser = await playwright.Firefox.LaunchPersistentContextAsync("", new BrowserTypeLaunchPersistentContextOptions
       {
         // The Playwright framework is not designed to connect to already running 
         // browsers. To overcome this limitation, a tool bundled with Kameleo, named 
         // pw-bridge.exe will bridge the communication gap between the running Firefox 
         // instance and this playwright script.
         ExecutablePath = "<PATH_TO_KAMELEO_FOLDER>\\pw-bridge.exe",
         Args = new List<string> { $"-target {browserWsEndpoint}" },
         ViewportSize = null,
       });

   • from playwright.sync_api import sync_playwright
     
     browser_ws_endpoint = f'ws://localhost:{kameleo_port}/playwright/{profile.id}'
     with sync_playwright() as playwright:
       browser = playwright.firefox.launch_persistent_context(
         '',
         # The Playwright framework is not designed to connect to already running
         # browsers. To overcome this limitation, a tool bundled with Kameleo, named
         # pw-bridge.exe will bridge the communication gap between the running Firefox
         # instance and this playwright script.
         executable_path='<PATH_TO_KAMELEO_FOLDER>\\pw-bridge.exe',
         args=[f'-target {browser_ws_endpoint}'],
         viewport=None)

3. We recommend that you always work in the default browser context.

   Chroma browser (Chromium-based Base Profiles & Mobile Profiles)

   • const context = browser.contexts()[0];
     const page = await context.newPage();

   • var context = browser.Contexts[0];
     var page = await context.NewPageAsync();

   • context = browser.contexts[0]
     page = context.new_page()

   Junglefox browser (Firefox Base Profiles)

   Kameleo will open the new page in the default browser context.

   • const page = await browser.newPage();

   • var page = await browser.NewPageAsync();

   • page = browser.new_page()

4. Then you can use any Playwright command to drive the browser, for example:

   • await page.goto('https://google.com');

   • await page.GotoAsync("https://google.com");

   • page.goto('https://google.com')

5. Make sure to stop the browser. The virtual browser profile is then stored in you local workspace. Optionally you can export it to a .kameleo file, so you can load it later on another computer as well. Or simply you can delete the profile from Kameleo's workspace once you don't need it anymore. This way, you can keep your resource usage low.

   • await client.stopProfile(profile.id);
     await client.exportProfile(profile.id, { body: { path: `${__dirname}\\test.kameleo` } }); // optional
     await client.deleteProfile(profile.id); // optional

   • await client.StopProfileAsync(profile.Id);
     await client.ExportProfileAsync(profile.Id, new SaveProfileRequest(
       Path.Combine(Environment.CurrentDirectory,"test.kameleo"))); // optional
     await client.DeleteProfileAsync(profile.Id); // optional
     

   • client.stop_profile(profile.id)
     path = f'{os.path.dirname(os.path.realpath(__file__))}\\test.kameleo'
     result = client.export_profile(profile.id, body=SaveProfileRequest(path=path)) # optional
     client.delete_profile(profile.id); # optional

If you want to see the full example code, click any of the links below:

Chroma(Chromium-based Base Profiles & Mobile Profiles)

• Javascript example code on GitHub
• C# example code on GitHub
• Python example code on GitHub

Junglefox (Firefox Base Profiles)

• Javascript example code on GitHub
• C# example code on GitHub
• Python example code on GitHub

Playwright library compatibility

Ensure you always use the right version of Playwright with different versions of Kameleo. See the compatibility table below: