# Puppeteer Puppeteer is a JavaScript library that provides a high-level API to control Chrome or Firefox through the DevTools Protocol or WebDriver BiDi. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Unlock runtime insights: Introducing third-party developer tools for Chrome DevTools for agents DevFeed: [Unlock runtime insights: Introducing third-party developer tools for Chrome DevTools for agents]() Original publisher: [Read original article]() Author: Wolfgang Beyer X GitHub Published: 2026-06-18T07:00:00Z Content type: article Language: en Sources: [developer.chrome.com: Blog]() Topics: [AI Agent](), [Chrome](), [MCP Server](), [Tooling](), [debugging](), [Puppeteer](), [Document Object Model (DOM)](), [JSON Schema](), [JavaScript](), [Angular](), [React](), [Vue.js]() Tags: [ai](), [ai-agent](), [ai-coding](), [angular](), [chrome](), [debugging](), [developer-tools](), [javascript](), [json](), [mcp](), [mcp-server](), [react](), [vue](), [web-development]() ### AI overview Chrome DevTools for agents now supports third-party developer tools that expose runtime context from frameworks and applications to AI coding assistants. The article explains how these tools help agents inspect internal state, connect DOM elements to framework components, access server-side or database state, and debug issues beyond static source-code analysis. ### Source excerpt Chrome DevTools for agents introduces third-party developer tools, which lets frameworks and applications share rich, runtime context with AI coding assistants. ## Testing a React App in Chrome with Heroku CI DevFeed: [Testing a React App in Chrome with Heroku CI]() Original publisher: [Read original article]() Author: Julián Duque Published: 2024-09-24T20:11:00Z Content type: tutorial Language: en Sources: [Heroku]() Topics: [React](), [Heroku](), [ci](), [Playwright](), [Puppeteer](), [Headless Browser](), [Testing](), [Jest](), [web applications](), [JavaScript]() Tags: [browser](), [ci](), [continuous-integration](), [developer-tools](), [download](), [engineering](), [github](), [google-chrome](), [guide](), [heroku](), [javascript](), [jest](), [react](), [testing](), [unit-testing](), [web-applications]() ### AI overview This tutorial explains how to run end-to-end tests for a React application in Heroku CI using headless Chrome, Jest, and Puppeteer. It covers automating tests for a simple form-based application and configuring the application and test scripts for CI execution. ### Source excerpt When building web applications, unit testing your individual components is certainly important. However, end-to-end testing provides assurance that the final user experience of your components chained together matches the expected behavior. Testing web application behavior locally in your browser can be helpful, but this approach isn't efficient or reliable, especially as your application grows more [...] The post Testing a React App in Chrome with Heroku CI appeared first on Heroku. ## Announcing Official Puppeteer Support for Firefox DevFeed: [Announcing Official Puppeteer Support for Firefox]() Original publisher: [Read original article]() Author: James Graham Published: 2024-08-07T15:44:40Z Content type: article Language: en Sources: [Mozilla Hacks - the Web developer blog]() Topics: [Puppeteer](), [Firefox](), [Automation](), [webDriver](), [Chrome](), [Web]() Tags: [automation](), [blog](), [browser](), [chrome](), [featured-article](), [firefox](), [mozilla](), [testing](), [web](), [web-developers](), [webdriver]() ### AI overview Puppeteer version 23 adds first-class Firefox support, enabling browser automation and end-to-end testing against both Firefox and Chrome. The implementation uses the cross-browser WebDriver BiDi protocol, with examples including console log capture and device emulation. ### Source excerpt We're pleased to announce that, as of version 23, the Puppeteer browser automation library now has first-class support for Firefox. This means that it's now easy to write automation and perform end-to-end testing using Puppeteer, and run against both Chrome and Firefox. The post Announcing Official Puppeteer Support for Firefox appeared first on Mozilla Hacks - the Web developer blog. ## Supabase Beta November 2022 DevFeed: [Supabase Beta November 2022]() Original publisher: [Read original article]() Author: Ant Wilson Published: 2022-12-07T07:00:00Z Content type: article Language: en Sources: [Supabase Blog]() Topics: [Supabase](), [Authentication](), [PostgreSQL](), [React](), [Remix](), [Puppeteer](), [Artificial Intelligence](), [API](), [JSON Web Tokens](), [MFA](), [Netlify](), [Serverless]() Tags: [api](), [article](), [auth](), [authentication](), [features](), [flutter](), [launch](), [netlify](), [openai](), [postgresql](), [react](), [serverless](), [typescript](), [video]() ### AI overview Supabase's November 2022 beta update previews Launch Week 6 and highlights Remix Auth Helpers, Edge Functions content and examples, function fixes, customizable magic links, redirects, and Conda support. It also showcases community courses, projects, tutorials, videos, podcasts, guides, and articles involving Supabase and related technologies. ### Source excerpt We are preparing everything for Launch Week 6, but we still had time to ship some goodies this month! ## Migrating a JS project from Travis to GitHub Actions DevFeed: [Migrating a JS project from Travis to GitHub Actions]() Original publisher: [Read original article]() Author: HTTP Toolkit; Tim Perry Published: 2020-10-27T11:45:00Z Content type: tutorial Language: en Sources: [HTTP Toolkit]() Topics: [GitHub Actions](), [JavaScript](), [TypeScript](), [ci](), [Testing](), [Chrome](), [Puppeteer](), [npm](), [chmod]() Tags: [chmod](), [chrome](), [ci](), [cli](), [github-actions](), [js](), [node-js](), [testing](), [travis](), [typescript]() ### AI overview This tutorial explains how to migrate a JavaScript/TypeScript project from Travis to GitHub Actions. It uses an HTTP Toolkit UI repository as an example, covering Node.js version selection, Chrome and XVFB setup for Puppeteer and Karma tests, dependency installation with npm ci, and test execution with npm test. It also discusses reproducing the cloud CI environment locally to debug environment-specific failures. ### Source excerpt Travis has been the most popular place to build open-source code for a long time, but the world is moving on. GitHub Actions is modern, tightly integrated with the most popular code hosting platform in the world, flexible, fast, and free (for public repos). Travis has been popular for years though, there's still a lot of projects being built there, including many of HTTP Toolkit's own repos. Last week, I decided to bite the bullet, and start migrating. Travis was having a particularly bad build backlog day, and HTTP Toolkit is entirely open source on GitHub already, so it's super convenient. I've been looking longingly at GitHub Actions builds on other projects for a little while, and I'd already seen lots of useful extensions in the marketplace of drop-in action steps that'd make my life much easier. Unfortunately, I knew very little about GitHub actions, and I already had some Travis configuration that worked. In this post, I want to share how I converted my JavaScript (well, TypeScript) build from Travis to GitHub, so you can do the same. The Goal I decided to start with the simplest Travis setup I had: the HTTP Toolkit UI repo. Here's the previous travis.yml file: dist: xenial sudo: required language: node_js node_js: - '14' install: - npm ci services: - xvfb before_script: - sudo chown root /opt/google/chrome/chrome-sandbox - sudo chmod 4755 /opt/google/chrome/chrome-sandbox script: - npm test addons: chrome: stable There's a few notable things here: I want to build with a specific node version. I need Chrome & XVFB installed for testing with Puppeteer & Karma. There's some existing workarounds (before_script) for Travis.yml in here. The build itself is just npm ci to install dependencies and then npm test. Although not shown here, some of the npm dependencies include native node extensions, and need a working native build environment. One other feature I'd really like, and which I'd strongly recommend for everybody, is the option to run an equivalent CI enviro ## Automatic visual diffing with Puppeteer DevFeed: [Automatic visual diffing with Puppeteer]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2018-01-31T00:00:00Z Content type: tutorial Language: en Sources: [Monica Dinculescu]() Topics: [Puppeteer](), [Testing](), [Chrome](), [Chai](), [Mocha](), [npm](), [Selenium](), [Express]() Tags: [chrome](), [code](), [npm](), [selenium](), [testing]() ### AI overview A tutorial on using Puppeteer to take screenshots of web application routes and compare them with golden images for visual regression testing. The approach works with Chrome, supports wide and narrow viewports, and can exercise UI states such as an opened navigation drawer. ### Source excerpt So testing, right? We should do it. The thing is, testing is hard, and good testing is reaaaaaaally hard, and tbh I'm pretty bad at testing. So I end up not testing my apps, and then I feel guilty about it, but I'll stop you now: you can't run guilt on Travis. If this sounds familiar, then this blog post is for you. I did a little song-and-dance that sets up Puppeteer* , takes screenshots of your app (like, all the routes you care about), and then compares them to the "golden" ones. If they match, your test passes! Yes, it only works on Chrome. No, it's not actually unit testing. Yes, it's literally just counting pixels but you know what? It counts them in both a wide and a narrow viewport size and any testing is better than no testing at all; fight me. * Puppeteer is an npm library that lets you control Chrome. You know, like a puppet. In particular, Puppeteer makes it super easy to take screenshots (and click on things in your page). It's like a waaaaaaay less infuriating Selenium, but infinitely harder to spell. This post looks long because I've put all the code I have so that you can copy paste it. Skip to the good part if you already know how to test. Do the npm If you want to test things with Puppeteer, you have to setup a thing for the tests, a server that launches your site, and then Puppeteer to look at that site. I have this in my package.json to wrangle these things: "devDependencies": { "chai": "^4.1.2", "mocha": "^5.0.0", "puppeteer": "^1.0.0", "pixelmatch": "^4.0.2", "polyserve": "^0.23.0" } Explanation: I chose Mocha/Chai for testing because that's what I'm used to. You can literally use any other testing framework you're comfortable with; I don't think it matters. Pixelmatch is the thing that diffs two images and tells you how many pixels they differ by. It's super awesome 🏆. Polyserve is what I use as a local server. You can use Python or Express or whatever you cool kids use. I'll point out in the code where it's Polyserve specific (literally 2 lin ## Firefox-ui-tests - Platform Operations Project of the Month DevFeed: [Firefox-ui-tests - Platform Operations Project of the Month]() Original publisher: [Read original article]() Author: Admin Published: 2016-06-02T09:18:23Z Content type: article Language: en Sources: [Mozilla Automation]() Topics: [Firefox](), [Testing](), [ci](), [Puppeteer](), [Automation](), [Mozilla](), [Jenkins]() Tags: [automation](), [browser](), [ci](), [continuous-integration](), [firefox](), [jenkins](), [marionette](), [mozilla](), [mozmill](), [taskcluster](), [testing](), [tests](), [treeherder]() ### AI overview This article presents firefox-ui-tests as a Mozilla project for integration testing of Firefox's user interface. The tests use the Marionette automation framework and Firefox Puppeteer's page object model, run across Firefox code-check and release workflows, and include localized-build and update testing. The project's work includes improving result visibility, test placement, stability, and coverage. ### Source excerpt Hello from Platforms Operations! Once a month we highlight one of our projects to help the Mozilla community discover a useful tool or an interesting contribution opportunity. This month's project is firefox-ui-tests! What are firefox-ui-tests? Firefox UI tests are a test suite for integration tests which are based on the Marionette automation framework and are majorly used for user interface centric testing of Firefox. The difference to pure Marionette tests is, that Firefox UI tests are interacting with the chrome scope (browser interface) and not content scope (websites) by default.Continue readingFirefox-ui-tests - Platform Operations Project of the Month ## Review of Firefox desktop automation work - Q1 2016 DevFeed: [Review of Firefox desktop automation work - Q1 2016]() Original publisher: [Read original article]() Author: Admin Published: 2016-03-31T14:10:13Z Content type: opinion Language: en Sources: [Mozilla Automation]() Topics: [Firefox](), [Automation](), [Puppeteer](), [Mozilla](), [GitHub]() Tags: [automation](), [build-system](), [ci](), [debug](), [files](), [firefox](), [github](), [linux](), [marionette](), [mozilla](), [mozqa](), [qa](), [reports](), [testing](), [tests](), [ui]() ### AI overview A Q1 2016 review of Firefox desktop automation work describes Mozharness and Build System changes, a Firefox UI test task in Taskcluster, and the move of Firefox UI tests and their harness to mozilla-central. ### Source excerpt Today is the last day of Q1 2016 which means time to review what I have done during all those last weeks. When I checked my status reports it's kinda lot, so I will shorten it a bit and only talk about the really important changes. Build System / Mozharness After I had to dig into mozharness to get support for Firefox UI Tests during last quarter I have seen that more work had to be done to fully support tests which utilize Nightly or Release builds of Firefox. TheContinue readingReview of Firefox desktop automation work - Q1 2016 ## Review of automation work - Q4 2015 DevFeed: [Review of automation work - Q4 2015]() Original publisher: [Read original article]() Author: Admin Published: 2016-01-08T22:25:58Z Content type: article Language: en Sources: [Mozilla Automation]() Topics: [Automation](), [Firefox](), [Mozilla](), [Puppeteer](), [GitHub](), [Refactoring](), [bug]() Tags: [automation](), [bug](), [ci](), [code](), [continuous-integration](), [firefox](), [github](), [jenkins](), [marionette](), [misc](), [mozilla](), [mozmill](), [mozqa](), [refactoring](), [script](), [tests](), [treeherder]() ### AI overview A Q4 2015 review of work to move Firefox UI tests into mozilla-central, run them with mozharness in mozmill-ci, fix failures and regressions, split the repository into packages, and improve related test tooling. ### Source excerpt The last quarter of 2015 is gone and its time to reflect what happened in Q4. In the following you will find a full overview again for the whole quarter. It will be the last time that I will do that. From now on I will post in shorter intervals to specific topics instead of covering everything. This was actually a wish from our latest automation survey which I want to implement now. I hope you will like it. So during the last quarter my focus was completely on gettingContinue readingReview of automation work - Q4 2015 ## Firefox Automation report - Q3 2015 DevFeed: [Firefox Automation report - Q3 2015]() Original publisher: [Read original article]() Author: Admin Published: 2015-10-20T19:42:37Z Content type: article Language: en Sources: [Mozilla Automation]() Topics: [Automation](), [Firefox](), [Jenkins](), [Refactoring](), [Puppeteer](), [ci](), [modules]() Tags: [automation](), [blog](), [ci](), [continuous-integration](), [firefox](), [jenkins](), [marionette](), [modules](), [mozilla](), [mozmill](), [refactoring](), [report](), [software](), [taskcluster](), [test](), [treeherder]() ### AI overview A Q3 2015 Firefox Automation report describes work on mozharness scripts for firefox-ui-tests, including improved configurability, crash-report handling, and support for Jenkins and release-testing workflows. It also covers Mozmill-CI updates, test-job refactoring, fixes for update tests affected by Release Engineering changes, and rewritten Pulse-message handling. ### Source excerpt It's time for another Firefox Automation report! It's incredible how fast a quarter passes by without that I have time to write reports more often. Hopefully it will change soon - news will be posted in a follow-up blog post. Ok, so what happened last quarter for our projects. Mozharness One of my deliverables in Q3 was to create mozharness scripts for our various tests in the firefox-ui-tests repository, so that our custom runner scripts can be replaced. This gives us a way more stable system and additional features likeContinue readingFirefox Automation report - Q3 2015