Omid Sayfun
Omid SayfunComputer Geek
Home
Notebook
Journey

Online

Github
Linkedin
Hevy
Plyatomic
Notebook
The trap of making everything dynamic
March 01, 2024
A try at type-safe groupBy function in TypeScript
April 10, 2025
Email special headers
November 20, 2024
Adding prettier to eslint
April 10, 2025
Storing Vector in Postgres with Drizzle ORM
March 21, 2024
Upgrading my blog to Next 15
April 05, 2025
Canvas macOS issue
February 20, 2024
tsx doesn’t support decorators
March 26, 2025
Validating NestJS env vars with zod
February 06, 2025
Extending Window: types vs interfaces
March 21, 2025
Loading env file into Node process
February 06, 2025
Add update date field to Postgres
February 27, 2024
Using node API for delay
February 06, 2025
React Component Lifecycle
November 28, 2024
How CQRS is different than Event Sourcing
August 18, 2024
RabbitMQ exchange vs queue
August 14, 2024
PgVector similarity search distance functions
August 13, 2024
PgVector indexing options for vector similarity search
July 31, 2024
Using puppeteer executable for GSTS
June 08, 2024
Why EQ is Your Next Career Upgrade
May 13, 2024
Counting GPT tokens
June 30, 2024
Logging route handler responses in Next.js 14
June 19, 2024
Redirect www subdomain with Cloudflare
June 17, 2024
Logging requests in Express app
June 16, 2024
Move Docker volume to bind mount
June 12, 2024
Next.js Hydration Window Issue
May 29, 2024
Using Git rebase without creating chaos in your repo
May 16, 2024
Implementing RPC Calls with RabbitMQ in TypeScript
March 16, 2024
Optimize webpage load with special tags
March 15, 2024
What the hell is Open Graph?
March 13, 2024
My go-to Next.js ESlint config
March 10, 2024
List of useful Chrome args
March 10, 2024
Combining RxJS observables - Part 1
February 20, 2024

List of useful Chrome args

March 10, 2024

Puppeteer is a Node library, which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. It's primarily used for automating web browser tasks such as testing web applications, taking screenshots of web pages, generating pre-rendered content for websites, and crawling SPAs.

Why SPA?

Puppeteer has the ability to interact with web pages programmatically. SPAs usually dynamically load content using JavaScript that presents unique challenges for web automation, testing, and rendering. Here’s why Puppeteer is perfect for SPAs:

  1. Dynamic Content Loading: Puppeteer can wait for elements to appear or for certain conditions to be met, making it ideal for testing or scraping SPAs.
  2. JavaScript Execution: It can programmatically trigger events or call JavaScript functions within the page, allowing for interactions that closely mimic those of a real user.
  3. Performance Monitoring and Optimization: Puppeteer can capture metrics like load times, time to interactive, and other crucial performance indicators.
  4. Screenshot and PDF Generation: For documentation, testing, or archiving purposes, Puppeteer can capture screenshots or generate PDFs of SPAs.

Running Puppeteer

Here’s the most simplified approach:

import puppeteer from "puppeteer";
 
async function takeScreenshot(url: string, filePath: string) {
	const browser = await puppeteer.launch();
	const page = await browser.newPage

Continue Reading

();
await page.goto(url, { waitUntil: "networkidle2" });
await page.screenshot({ path: filePath });
await browser.close();
}
// The screenshot will be saved in the current directory
takeScreenshot("https://omiid.me", "screenshot.png")
.then(() => console.log("Screenshot taken successfully."))
.catch((err) => console.error("Error taking screenshot:", err));

Arguments

Arguments are passed to Chromium (the browser engine behind Puppeteer) to control its behavior, often to enhance performance, enable certain features, or work around limitations. Here's a breakdown of the usefulness and meaning of each argument:

  • -no-sandbox: Disabling the sandbox is often necessary in containerized environments like Docker, where the sandbox's security restrictions can prevent Chromium from running.
  • -disable-setuid-sandbox: Similar to -no-sandbox, this disables the setuid sandbox, which is another layer of security in Linux. It's also typically used in containerized setups.
  • -disable-gpu: Disables GPU hardware acceleration. This can be useful in environments without a GPU or where GPU usage leads to problems. It might reduce performance in graphics-heavy applications but can reduce resource usage in headless environments.
  • -disable-dev-shm-usage: Instructs Chromium to not use /dev/shm (shared memory) which is limited in size in some environments (like Docker). This can prevent crashes due to running out of shared memory.
  • -disable-accelerated-2d-canvas: Disables hardware acceleration for 2D canvas elements. This can reduce GPU usage, which might be beneficial in server or test environments without dedicated GPU resources.
  • -disable-extensions: Disables all browser extensions. This can speed up startup and reduce potential interference from third-party extensions, ensuring a clean testing or automation environment.
  • -no-first-run: Skips the first run wizard to speed up initialization. This is useful in automated testing or scraping scenarios where you want to minimize startup time and user intervention.
  • -no-zygote: Disables zygote process creation, which is part of Chrome's multi-process architecture. It can have implications for security and stability and is usually used to reduce resource usage in constrained environments.
  • -single-process: Runs the browser with a single process, contrary to the default multi-process architecture. While it can reduce resource usage, it may significantly affect stability and security, making it less suitable for production environments. (I don’t really recommend using this unless you know why you’re using it)
  • -disable-background-timer-throttling: Prevents Chromium from throttling background timers to reduce CPU usage. This can be useful for tests or tasks that need to run in the background without being slowed down.
  • -disable-backgrounding-occluded-windows, -disable-renderer-backgrounding: These flags prevent Chromium from reducing the priority of certain processes or rendering tasks for background or occluded (hidden) windows. They can be useful for ensuring consistent performance for background tasks or tests.
  • -disable-web-security: Disables the same-origin policy, allowing scripts to access resources from any domain. This is a powerful option that can be useful for testing cross-origin requests without CORS policy restrictions but introduces significant security risks. Use it only in controlled, secure environments for testing purposes.

  • 02-20-2026

    The trap of making everything dynamic

  • 04-11-2025

    A try at type-safe groupBy function in TypeScript

  • 04-10-2025

    Email special headers

  • 04-10-2025

    Adding prettier to eslint

  • 04-09-2025

    Storing Vector in Postgres with Drizzle ORM