{"id":15536825,"url":"https://github.com/trentmwillis/devtools-protocol-demos","last_synced_at":"2025-04-23T14:31:53.556Z","repository":{"id":65996634,"uuid":"147576886","full_name":"trentmwillis/devtools-protocol-demos","owner":"trentmwillis","description":"Demos of the Chrome DevTools Protocol for various testing/automation techniques","archived":false,"fork":false,"pushed_at":"2018-09-07T09:26:10.000Z","size":38,"stargazers_count":23,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T00:31:41.347Z","etag":null,"topics":["demos","devtools-protocol","node","puppeteer"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trentmwillis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-05T20:39:39.000Z","updated_at":"2023-01-17T20:34:29.000Z","dependencies_parsed_at":"2023-05-21T20:15:07.298Z","dependency_job_id":null,"html_url":"https://github.com/trentmwillis/devtools-protocol-demos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fdevtools-protocol-demos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fdevtools-protocol-demos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fdevtools-protocol-demos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fdevtools-protocol-demos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trentmwillis","download_url":"https://codeload.github.com/trentmwillis/devtools-protocol-demos/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250451659,"owners_count":21432866,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demos","devtools-protocol","node","puppeteer"],"created_at":"2024-10-02T11:53:47.232Z","updated_at":"2025-04-23T14:31:53.539Z","avatar_url":"https://github.com/trentmwillis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DevTools Protocol Demos\n\nDemos of the [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) for various testing/automation techniques. For simplicity, these demos use [Puppeteer](https://github.com/GoogleChrome/puppeteer) to interact with the Chrome DevTools Protocol.\n\nThese demos were originally used in a talk given at [Nordic.js](http://nordicjs.com/). You can [view the talk slides on Notist](https://noti.st/trentmwillis/wls5J4/powerful-automation-with-the-chrome-devtools-protocol).\n\n## Setup\n\nIn order to setup the demos for use, run the following commands (assuming you have [git](https://git-scm.com/) and [npm](https://www.npmjs.com/get-npm) installed):\n\n1. `git clone https://github.com/trentmwillis/devtools-protocol-demos.git`\n2. `cd devtools-protocol-demos`\n3. `npm install`\n\nFrom there you can run the various demos using `npm run` and then the corresponding script name as documented below.\n\n## Demos\n\nThere are two types of demos in this repository:\n\n1. **[Service Demos](./service-demos)** - These are demos that use Puppeteer to power an API service to automate some workflow.\n2. **[Testing Demos](./testing-demos)** - These are demos that use Puppeteer to test some aspect of a web application.\n\n### Service Demos\n\nThe Service Demos showcase Puppeteer-powered APIs. You can run them with `npm run service\u003cname\u003e`.\n\n1. `static-site-api` - Creates a RESTful API for getting content from a statically generated site. After starting the service, go to `http://localhost:3000` to get a random post from my blog.\n2. `screenshot-emailer` - Creates a service where you can email a screenshot of a webpage to someone. You'll need a Gmail account in order for this demo to work.\n3. `playback` - Creates a service where you can post a series of commands and Puppeteer will \"playback\" those commands. After starting the service, you can run `service-demos/playback-demo-script.js` in the browser to see it work.\n\n### Testing Demos\n\nThe Testing Demos showcase testing various aspects of the [ChitChat](https://chitchat.glitch.me/) web application. You can run them with `npm run test:\u003cname\u003e`.\n\n1. `intro` - A basic introduction showing launching the browser, visiting a page, and checking for an element's text.\n2. `user-flow` - Builds on the `intro` demo and runs through a user flow for sending messages in the app.\n3. `accessibility` - Builds on the `user-flow` demo and checks the accessibility of the page using [`axe-core`](https://www.deque.com/axe/).\n4. `visual-regression` - Builds on the `accessibility` demo and checks the visual appearance of the app by using screenshots.\n5. `memory-leak-by-heap` - Demonstrates a simple approach to detecting memory leaks by looking at the JS heap size of the app before and after a series of actions.\n6. `memory-leak-by-prototype` - Demonstrates detecting memory leaks by checking for objects of a specific prototype in the app's memory.\n7. `code-coverage` - Shows how to get code coverage (usage) reports for the assets used by a web app. Runs a test and then uses [Istanbul](https://github.com/istanbuljs/nyc) to generate the report.\n8. `multi-user` - Demonstrates how to launch multiple instances of an application to test multi-user interactions.\n9. `multi-user-full` - Demonstrates how to launch multiple instances of an application to test multi-user interactions with accessibility, memory, and code coverage checks as well.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrentmwillis%2Fdevtools-protocol-demos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrentmwillis%2Fdevtools-protocol-demos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrentmwillis%2Fdevtools-protocol-demos/lists"}