Example code to download files via browser automation

download-playwright.ts

import { chromium } from "playwright";

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto("https://motemen.github.io/beautiful-graph-maker/");

  const button = await page.$("button");
  if (!button) {
    throw new Error("not found: button");
  }

  const [download] = await Promise.all([
    page.waitForEvent("download"),
    button.click(),
  ]);

  // {
  //   path: '/var/folders/hm/0xt2zy.../279506cd-00e1-43d5-ad4f-f72909ba706c',
  //   suggestedFilename: 'graph.png'
  // }
  console.log({
    path: await download.path(),
    suggestedFilename: download.suggestedFilename(),
  });

  await browser.close();
})();

download-puppeteer.ts

import puppeteer from "puppeteer";
import * as path from "path";

const DOWNLOAD_TIMEOUT = 10 * 1000;

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  const downloadPath = path.join(process.cwd(), "downloads");

  const cdpSession = await page.target().createCDPSession();
  await cdpSession.send("Browser.setDownloadBehavior", {
    behavior: "allow",
    downloadPath,
    eventsEnabled: true,
  });

  const downloaded = new Promise<void>((resolve, reject) => {
    cdpSession.on(
      "Browser.downloadProgress",
      (params: { state: "inProgress" | "completed" | "canceled" }) => {
        if (params.state == "completed") {
          resolve();
        } else if (params.state == "canceled") {
          reject("download cancelled");
        }
      }
    );
  });

  await page.goto("https://motemen.github.io/beautiful-graph-maker/");

  const button = await page.$("button");
  if (!button) {
    throw new Error("not found: button");
  }

  await button.click();

  await Promise.race([
    downloaded,
    new Promise<boolean>((_resolve, reject) => {
      setTimeout(() => {
        reject("download timed out");
      }, DOWNLOAD_TIMEOUT);
    }),
  ]);

  await browser.close();
})();