Automating-Chrome-1

Automating browser tasks is a powerful way to streamline workflows, conduct tests, and perform repetitive actions efficiently. Playwright, an open-source library developed by Microsoft, enables seamless browser automation with multi-browser support. One of its most useful features is the ability to launch browsers with existing user profiles. This allows for a customized browsing environment, complete with saved passwords, extensions, and personalized settings. 

In this blog, we’ll walk you through the process of launching a Chrome browser with a specific user profile using Playwright and TypeScript. We’ll cover the prerequisites, provide a step-by-step guide, and discuss the benefits of using Playwright for browser automation. 

Why Use Existing Chrome Profiles?

Using existing Chrome profiles in browser automation provides several benefits: 

  • Custom Environment: Utilizing existing profiles allows tests to run in a familiar environment with saved settings, cookies, and extensions, ensuring consistency across testing sessions.  
  • Efficiency: Saves time by eliminating the need to log in or set up the environment repeatedly. You can directly access websites and services without re-entering credentials. 
  • Real-World Testing: Mimics real user interactions more accurately by using a profile that has real-world browsing data. This helps in identifying issues that might not surface in a clean, fresh profile. 
  • Persistent Sessions: Maintain a persistent session across multiple test runs. This is especially useful for long-running tests or scenarios where maintaining a continuous session is critical. 
  • Extension Support: Utilize existing Chrome extensions installed in the user profile. This is particularly useful for testing applications that rely on specific browser extensions.
  • Data Scraping: Facilitates data scraping by maintaining session states. If you’re logged into a website in your Chrome profile, you can directly scrape data from that site without having to navigate through the login process each time. 
  • OTP Management: Overcomes issues related to OTP (One-Time Password) verification. If the profile is already logged in and trusted, it can bypass OTP requests, streamlining the automation process. 
  • Testing Complex Scenarios: Simplifies testing complex scenarios that involve multiple steps and require a pre-configured state. For instance, if your test involves navigating through several pages that require authentication, using an existing profile can significantly reduce setup time. 
  • Profile Customization: Easily switch between different profiles for various testing scenarios, allowing for testing in different user contexts without extensive setup. 
  • Enhanced Debugging: With the ability to pause execution (page.pause()), you can manually inspect and interact with the browser in its existing state, making it easier to debug issues that arise during automated tests.  

Pre-requisites:

Before we dive into the code, ensure you have the following prerequisites: 

  1. Node.js: Ensure Node.js is installed on your machine. You can download it from here
  2. Playwright: Install Playwright by running the following command in the desired folder directory:
    • npm init playwright@latest. 
  3. Chrome Browser: Make sure you have Google Chrome installed on your machine. 
  4. Chrome User Profile: Locate your Chrome user profile directory. Typically, it is located at: 
    • Windows: C:/Users/<Your Username>/AppData/Local/Google/Chrome/User Data 
    • macOS: /Users/<Your Username>/Library/Application Support/Google/Chrome 
    • Linux: /home/<Your Username>/.config/google-chrome 

To verify your profile and executable path, you can navigate to chrome://version/ in your Chrome browser. This page displays the profile path and executable path, which can help ensure you are using the correct directories in your script.

Steps to set up Playwright with TypeScript:

 Step 1: Create a New Directory 

Create a new directory for your project and navigate into it: 

Step 2: Initialize the Project

Initialize a new Node.js project: 

Step 3: Install Playwright

Install Playwright and opt for TypeScript when prompted for the language type:

Step 4: Navigate to the Playwright Project Directory

Navigate to the Playwright project directory where the example.spec.ts file is located: 

Step 6: Create a Test Case File 

Navigate to the example.spec.ts file in your Playwright project directory and add the following code: 

Playwright and TypeScript 

Explanation:

Importing Modules and User Data Directory

Playwright and TypeScript 

We import the necessary modules from Playwright (test, expect, and chromium) and define the path to the Chrome user profile directory (userDataDir). This directory contains the profile data for the Chrome user, including saved passwords, cookies, and session data. 

 “launchPersistentContext()” Method

Playwright and TypeScript 

The launchPersistentContext method launches a browser context with persistent storage linked to a specific user profile. This allows the automated session to access all user data, including saved passwords and extensions. 

Parameters:

  • userDataDir: The path to the user data directory containing the Chrome user profile. This includes all the user’s settings, extensions, and session data. 
  • Options Object
    • headless: false: Runs the browser in headed mode (with a visible UI). Set to true for headless mode, useful for CI/CD pipelines. 
    • channel: “chrome”: Ensures the use of the Google Chrome browser. Playwright supports multiple browser channels, including Chromium, firefox, and Webkit. 
    • executable path: “C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe”: Specifies the path to the Chrome executable to ensure the correct browser instance is launched. 

Execution:

To run the script, use the following command:  

Result:

Playwright and TypeScript 

Using the launchPersistentContext method in Playwright, we can launch Chrome with an existing user profile. This allows the user to directly open the browser with all their saved settings, extensions, and session data intact. When navigating to Gmail, the browser opens the Gmail account directly without asking for login credentials, leveraging the already authenticated session from the user profile. 

Conclusion:

Using Playwright to launch Chrome with an existing user profile streamlines browser automation by leveraging saved user data and settings. This approach provides a customized environment, enhances efficiency, and enables real-world testing scenarios. By following the steps outlined in this guide, you can easily set up and use Playwright with TypeScript to automate browser tasks with an existing Chrome profile, making your automation process more robust and realistic.