Running Playwright Codegen with existing Chromium Profiles

Playwright is a powerful tool for browser automation, and one of its lesser-known features is the ability to run tests using existing browser profiles. This can be incredibly useful when you need to test scenarios that require specific browser configurations, extensions, or saved login states. In this article, we'll explore how to use Playwright to launch Microsoft Edge or Google Chrome with custom profiles.

Setting Up the Environment

Before we dive into the code, make sure you have Playwright installed in your project:

npm install @playwright/test

Create a file named codegen.mjs in your project directory. We'll use this file to run our Playwright scripts.

Launching a Browser with the Default Profile

Let's start with a basic example that launches Microsoft Edge with the default profile:

import { chromium } from '@playwright/test';

(async () => {
  const context = await chromium.launchPersistentContext('C:\\Users\\YourUsername\\AppData\\Local\\Microsoft\\Edge\\User Data', {
    headless: false,
    channel: 'msedge',
  });
  // For macOS, use:
  // Microsoft Edge: '/Users/YourUsername/Library/Application Support/Microsoft Edge'
  // Google Chrome:  '/Users/YourUsername/Library/Application Support/Google/Chrome'

  const page = context.pages()[0];

  await page.pause(); // This will open Codegen if needed

  await context.close();
})();

This script does the following:

1. Imports the chromium object from Playwright.
2. Launches a persistent context using the default Edge profile.
3. Gets the first page from the context.
4. Pauses the execution, which opens the Playwright Inspector (Codegen) for interactive debugging.
5. Closes the context when done.

Using a Specific Browser Profile

To use a different profile, we need to add the --profile-directory argument. The profile directory might be different to the profile
name. In order to find out the profile directory, you can navigate to chrome://version in the browser and look for the Profile Path field. The last part of the path is the profile directory name.

import { chromium } from '@playwright/test';

(async () => {
  // Setup
  const context = await chromium.launchPersistentContext('C:\\Users\\YourUsername\\AppData\\Local\\Microsoft\\Edge\\User Data', {
    headless: false,
    channel: 'msedge',
    args: [`--profile-directory=Profile 2`]
  });
  // For macOS, use:
  // Microsoft Edge: '/Users/YourUsername/Library/Application Support/Microsoft Edge'
  // Google Chrome:  '/Users/YourUsername/Library/Application Support/Google/Chrome'

  const page = context.pages()[0];

  await page.pause();

  await context.close();
})();

The key difference here is the args option in the launchPersistentContext method, which specifies the profile directory to use.

Remember to replace YourUsername with your actual username on your system.

Using Playwright Codegen

In both examples, we've included await page.pause();. This line opens the Playwright Inspector, also known as Codegen. This tool allows you to:

1. Inspect the page structure
2. Record actions and generate code
3. Step through your script
4. Modify and rerun parts of your script

Running the Script

To run the script, use the following command in your terminal:

node codegen.mjs

Important Notes

1. Profile Availability: Ensure that the browser profile you're trying to use isn't already open. If it is, Playwright won't be able to launch it.

2. Profile Names: The profile directory names (e.g., "Profile 2") should match exactly with the names in your browser's profile directory.

3. Browser Channel: In our examples, we've used channel: 'msedge' for Microsoft Edge. For Google Chrome, you would use channel: 'chrome'. Make sure to adjust the profile path accordingly.

4. Path Accuracy: Double-check that the path to your browser's user data directory is correct. It may vary depending on your operating system and browser version.