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:
- Imports the
chromium
object from Playwright. - Launches a persistent context using the default Edge profile.
- Gets the first page from the context.
- Pauses the execution, which opens the Playwright Inspector (Codegen) for interactive debugging.
- 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:
- Inspect the page structure
- Record actions and generate code
- Step through your script
- 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
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.
Profile Names: The profile directory names (e.g., "Profile 2") should match exactly with the names in your browser's profile directory.
Browser Channel: In our examples, we've used
channel: 'msedge'
for Microsoft Edge. For Google Chrome, you would usechannel: 'chrome'
. Make sure to adjust the profile path accordingly.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.
Top comments (1)
Thank you very much for the contribution