This article explains the Chrome DevTools Protocol (CDP), its WebSocket‑based JSON‑RPC communication model, domain architecture, and how AI agents and tools like Playwright and Puppeteer rely on it, while providing practical TypeScript examples, common pitfalls, and tips for direct CDP usage.
The article explains Chrome DevTools Protocol (CDP) as the JSON‑over‑WebSocket interface that lets external programs control Chrome, details its request/response and event model, shows a raw Node.js client, compares built‑in DevTools panels to CDP domains, and surveys the ecosystem of tools such as Puppeteer, Playwright, Cypress and Lighthouse that are built on top of CDP.
This article explains how AgentRun’s All‑In‑One (AIO) sandbox integrates browser, shell, and code execution into a single cloud‑native container, eliminating file‑sharing headaches, simplifying tool coordination, reducing environment setup complexity, and cutting both memory usage and network latency for AI‑driven automation tasks.
This article explains how to overcome performance and integration challenges of 3D avatar rendering across multiple scenarios by exporting avatars as video or GIF resources using a Puppeteer‑driven H5 frame capture pipeline combined with FFmpeg video synthesis, detailing the evaluation of alternatives and the final implementation steps.
This article traces the evolution of browser automation from Selenium to Playwright, highlights emerging AI‑agent security risks such as prompt injection and credential theft, and provides a detailed cloud‑native sandbox architecture with deployment steps, usage examples for Playwright, Puppeteer, REST APIs, and code snippets for secure AI‑driven web interactions.
Midscene.js, an open‑source UI automation framework from ByteDance’s Web Infra team, combines multimodal AI inference with Chrome extensions, YAML scripts, and JavaScript SDKs to enable zero‑code testing across Web, Android, Playwright, and Puppeteer, offering key interfaces for actions, queries, and assertions.
This guide walks through setting up Claude Desktop as an MCP host, configuring iterm-mcp for terminal automation, and using a Puppeteer MCP server for web interaction, complete with step‑by‑step commands, troubleshooting examples, and practical insights for building AI agents.
Midscene.js, an open‑source UI automation tool enhanced with multimodal AI, lets developers create, run, and assert frontend tests without writing code via a Chrome extension, and also integrates into Playwright, Puppeteer, or YAML scripts, offering AI‑driven actions, queries, and assertions.
This tutorial demonstrates how to use Puppeteer to crawl frontend job postings from the Boss Zhipin website, extract details and job descriptions, and persist the data into a MySQL database through a NestJS application with TypeORM, including Docker setup and optional SSE streaming.
SSR (Server Side Rendering) generates complete HTML on the server, improving SEO and first‑paint speed, while CSR (Client Side Rendering) renders in the browser, offering front‑end flexibility but hurting SEO; the article compares their pros and cons, shows pseudocode, and presents practical SSR implementations using Next.js and Puppeteer.
This article explains how to set up and use jest-image-snapshot together with jest-puppeteer to automate visual regression testing for atomic frontend components, covering configuration, code examples, CI integration, and best practices for preventing unintended UI changes.
This article explains what headless browsers are, outlines their advantages and limitations, introduces Puppeteer as a Node.js library for controlling headless Chrome, and provides step‑by‑step code examples for taking screenshots, generating PDFs, and performing automated web interactions.
This article guides front‑end developers through creating a discreet VSCode extension that fetches and displays content such as news or comments, detailing required knowledge, installation steps, key APIs like status bar, commands, quick pick, hover providers, and includes essential code snippets.
This article explains the overall architecture of Chrome extensions, how to create popup, DevTools, and content scripts using React or Vue, configure manifest.json, set up multi‑entry Webpack builds, debug each component, and perform end‑to‑end testing with Puppeteer and Xvfb for CI environments.
This article details the design and deployment of a unified poster image generation service for the FoxFriend social product, explaining the background, challenges of platform‑specific implementations, the Node.js + Puppeteer solution, architectural flow, engineering stack, performance optimizations, operational results, and future enhancements.
This article introduces Chrome DevTools' experimental Recorder feature, explains what Puppeteer is, provides a step‑by‑step guide to record, edit, import, and export automation scripts, and demonstrates how the generated Puppeteer code can streamline front‑end testing and reduce manual effort.
This article explains how ByteDance’s frontend monitoring SDK is continuously optimized for bundle size and runtime performance through micro‑ and macro‑level code refactoring, benchmark testing with Benny and Puppeteer, and real‑world analysis using Perfsee Lab, ultimately achieving minimal impact on page load metrics.
This article explains how to use Wechaty’s PuppetPuppeteer to create a WeChat chatbot by intercepting login requests, injecting interaction scripts, and leveraging Angular services in the web client, while highlighting the risks of web‑client changes.
This article explains how a self‑built performance testing platform leverages data‑statistical models, such as scoring and interval models based on normal distribution and percentile analysis, to quantify web‑page metrics, guide automated and semi‑automated optimizations, and integrate with CI/CD workflows for frontend development.
This tutorial walks through creating a headless‑browser crawler using Puppeteer, extracting data from Juejin, storing it in a MySQL database, and exposing the results through an Express web service with user authentication, subscription, and a simple front‑end UI.
The article explains the concept of white‑screen time, its impact on user experience, and presents multiple detection methods—including Navigation Timing API, MutationObserver, element‑point analysis, and headless‑browser simulation—along with implementation code and a monitoring‑alert architecture for front‑end performance optimization.
This tutorial explains how to set up and use Puppeteer together with the Mocha test framework to create, run, and report UI automation test cases for web and H5 applications, covering installation, a demo script, selector handling, and visual test reporting.
This article describes the design and implementation of a cloud‑native automated web‑page recording system for Douyu advertising, covering the problem background, technology stack, end‑to‑end workflow, Chrome extension tricks, containerization with Docker, database handling, and deployment on Kubernetes, enabling scalable, hands‑free video capture and delivery.
This article demonstrates how websites can detect browsers driven by Selenium or Puppeteer, walks through experiments using bot.sannysoft.com, shows screenshots of detected features in both headed and headless modes, and explains why such tools often fail to evade detection.
This article explains how to create end‑to‑end visual regression tests for Canvas‑based tools by capturing reference screenshots with a headless browser, comparing them pixel‑by‑pixel using pixelmatch, and visualizing differences, complete with code examples and best‑practice recommendations.
This article details a compliance‑driven solution that records, replays, and merges user interaction videos across multiple insurance web pages by leveraging rrweb for event capture, Puppeteer for automated playback, and FFmpeg for video stitching, while addressing performance, storage, and privacy challenges.
This article shares a year‑long experience of UI automation at Youzan, covering how to select stable business scenarios, choose Puppeteer with Mocha, implement robust element locating, handle dynamic data via API interception, apply wait and retry mechanisms, capture screenshots, log responses, and integrate tests into CI pipelines for reliable regression testing.
This article details how the Anjuke mini‑program team tackled frequent, fragmented releases across multiple platforms by standardizing processes, introducing local SDK‑based uploads, integrating Jenkins, and ultimately building a platform‑based service with UI automation using Puppeteer, resulting in reduced cost, higher transparency, and scalable multi‑program support.
This article details a step‑by‑step method for extracting live chat bullet comments from Taobao live streams by analyzing page sources, intercepting the token‑providing API with Puppeteer, establishing a WebSocket connection, and decoding the received base64‑ and GZIP‑compressed messages to retrieve clean usernames and comment texts.
This article explains what skeleton screens are, reviews existing implementation methods, and presents a custom DOM‑based approach with configurable rules, code snippets, and a Puppeteer‑driven CLI tool that automatically generates and injects skeleton screens for web pages.
This article explains how to design and implement a bespoke performance testing platform for web pages using Lighthouse, Puppeteer, and Node.js, covering architecture, data collection, hook functions, gatherer modules, scoring logic, and automated weekly reporting.
The article demonstrates how to use Puppeteer—a Node.js API built on the Chrome DevTools Protocol—to run headless Chrome for tasks such as scraping Google emoji images, generating screenshots or PDFs, and automating front‑end tests by launching a browser, navigating pages, handling cookies, simulating user input, capturing responses, and saving results.
This article explains how reinforcement‑learning (Q‑learning) can generate mock interface data for regression testing, how Puppeteer automates UI interactions, and how a DSL‑plus‑runtime approach enables scalable pop‑up components, reducing testing costs in complex e‑commerce interactions.
This article explains how the Taobao front‑end team tackled the complexity of the 618 interactive game by using reinforcement‑learning‑driven intelligent testing, Puppeteer‑based automated regression, and a decoupled UI‑logic architecture for scalable popup production, dramatically improving development efficiency and stability.
The article details how the Tongtian Tower team adopted Puppeteer for end‑to‑end testing of their web‑based build system, covering technology selection, core concepts, API usage, project architecture, practical challenges, and the measurable efficiency gains achieved through automation.
This article explains how Ctrip's vacation team introduced behavior‑driven development (BDD) for UI automation testing using Cucumber and Puppeteer, covering the testing background, BDD concepts, framework selection, project structure, CI/CD integration, parallel execution, and best practices such as test‑id usage to improve reliability.
This guide explains how to use Node.js, Puppeteer, and Nodemailer to capture Grafana panel images, generate email reports, and schedule automated deliveries, covering environment setup, code modules, screenshot techniques, font handling, and optional cron integration for continuous monitoring.
This article describes how a content‑heavy company built a scalable, high‑quality image generation service for its app by leveraging Puppeteer, a custom connection‑pool implementation, CDN caching, launch‑argument tuning, and performance monitoring to achieve low latency and high throughput.
This article explains why personalized tech‑news gathering is valuable, proposes a DIY framework for controlling sources, collection, filtering, reading experience and iteration, and demonstrates three concrete Node.js scraping examples—HTML pages, API data, and WeChat public accounts—plus extended thoughts on building a simple product.
This article explains how to use Puppeteer to automate interactions with non‑DOM canvas objects in KuJiaLe's web‑based design tools, detailing the underlying API, the automation framework setup, and a step‑by‑step demo of moving a bedroom bed.
This article introduces Puppeteer, a Node library for controlling Chrome, and demonstrates its use in automating web performance analysis and scraping tasks.
The article describes a pipeline that automatically extracts a JSON‑like DSL representation of Alibaba’s 99‑promotion UI from rendered pages, cleanses CSS, converts transforms, renders the DSL to images, and combines it with dynamic ViewModel data to generate tens of thousands of high‑quality samples per module, raising recognition accuracy above 98%.
This article explains why users care about sub‑two‑second page loads, introduces skeleton screens as a visual solution, reviews existing front‑end approaches, and details a custom automated pipeline using Puppeteer and a draw‑page‑structure plugin to generate and inject skeleton screens with minimal maintenance.
This article introduces the Baice web performance optimization platform built by the Zhengcai Cloud front‑end team, explaining synthetic and real‑user monitoring, the Lighthouse workflow, custom extensions using Puppeteer, metric weighting, detection models, scoring, optimization suggestions, and trend analysis for improving page speed and user experience.
To solve the shortage of annotated UI data for UI2CODE, the team uses Puppeteer to load Weex pages, traverses the DOM to gather text and image elements, records their styles and positions, screenshots the page, and repeatedly swaps content, automatically generating thousands of realistic, labeled UI samples from a few hundred templates, greatly cutting manual labeling effort and boosting model accuracy.
The article explains how to build a poster‑rendering service with Puppeteer, detailing its advantages over canvas, the Redis‑based caching and CDN workflow, optimization tricks for headless Chromium, and future plans to boost QPS and pre‑generate popular posters.
This article explains how to use the Node.js‑based Puppeteer library to automate the solving of slide‑captcha challenges by opening the target page, extracting canvas data, calculating the missing piece position, simulating a human‑like drag motion, and verifying the result, while comparing Puppeteer with Selenium/WebDriver.
End‑to‑end testing treats the application as a black box, using Puppeteer to programmatically control a Chromium browser and simulate real user actions—such as navigating pages, typing, mouse movements, solving slide captchas, and uploading files—to verify the complete front‑end to back‑end workflow.
This article describes a real‑time monitoring solution for large numbers of H5 pages that combines Python's Requests library for data crawling with a headless Chrome browser driven by Puppeteer to detect resource errors, API failures, and DOM anomalies, automatically alerting stakeholders.
This article explains how to build an automated system that generates diverse advertising creative images by classifying size ratios, designing multi‑layer templates, selecting the best template through element structure, constraints, style and industry rules, and rendering them with Node.js, Puppeteer, and canvas.
This article explores headless browser automation technologies including Selenium, PhantomJS, Puppeteer, and Headless Chrome, comparing their architectures, use cases, and implementation differences.
SnapDiff is a JavaScript‑based platform that automates front‑end visual and message‑level regression testing through image comparison, distributed execution, mock data handling, and intelligent report analysis, dramatically reducing maintenance effort and improving test coverage for rapidly iterating web applications.
The Jingdong Woodpecker system is an automated monitoring solution that scans tens of thousands of e-commerce activities daily across multiple platforms, detecting functional and performance issues to ensure optimal user experience and prevent revenue loss.
This article introduces Puppeteer, a Node library for controlling Chrome/Chromium, explains its installation, key APIs, and demonstrates practical use cases such as generating PDFs, automating UI tests on mobile emulators, and capturing performance traces for web pages.
This article explains how Pandora.js solves inter‑process communication challenges by introducing IPC‑Hub, showing simple domain‑socket examples, a concise object‑proxy model, and a practical use‑case that offloads heavy webpage‑snapshot tasks to a background process using Puppeteer.
