Partial Web Automation: Chrome Debugging + Puppeteer

I don’t want to fully automate every interaction in the browser - just certain repetitive routines (e.g., filling in forms, checking values, etc.). At the same time, I like to watch the script run step by step so I can verify what’s happening.

Here’s how I’ve set things up to partially automate my workflow.
For example, when I need to log in to an insurance company’s website and fill out an application, I store the applicant information (name, birthday, address) in an Excel file. I log in to the site manually, then launch a Node.js script to handle the repetitive parts. This way, I can monitor each step as it runs and still perform the final review myself.

Steps:
1. Install Node.js and Puppeteer

# install the package globally  
npm install -g puppeteer 

2. Start Chrome with a debugging port
Launch Chrome with the option --remote-debugging-port=8888. To confirm it’s running correctly, check either of these URLs in your browser:
chrome://version/
http://127.0.0.1:8888/json/version (shows Chrome’s DevTools JSON endpoint)

3. Log in and let Puppeteer handle the routine
After logging in to the site manually, you can add code at the // DO SOMETHING placeholder to automate whichever steps you’d like.

const url = 'https://www.manulife.ca';
const puppeteer = require('puppeteer');

(async () => {
    // connect to Chrome
    const browser = await puppeteer.connect({
        browserURL: 'http://127.0.0.1:8888', // debug endpoint
        defaultViewport: null,
    });
    
    const pages = await browser.pages();
    console.log('NOTE: Pages currently open:', pages.map(p => p.url()));

    let page = pages.find(p => p.url().includes(url));

    if (page) {
        console.log('NOTE: Attaching existing page:', page.url());
        await page.bringToFront();
    } else {
        console.log('NOTE: Creating new one...');
        page = await browser.newPage();
        await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 90_000 });
    }

    // DO SOMETHING ...

    browser.disconnect();
})().catch(err => {
    console.log("ERROR occurs.");
    console.error(err);
    process.exit(1);
});