Automation typically includes purely code-based tasks that don’t even think about a browser, but some tasks need to interact and use the browser as a human would like performing a search on a site. How can we leverage tools that can automate the browser and pack it into a serverless API endpoint to make easily accessible?

Generating social share images with a serverless function and headless browser.

• Get a DevTools performance trace for a page load
• Get a DevTools trace with screenshots
• Get a DevTools trace and extract filmstrip screenshots
• Get a DevTools trace for a user interaction
• Get Runtime performance metrics
• Generate a Lighthouse report
• Extract Lighthouse performance metrics
• Emulate a slow network
• Emulate a slow network and CPU
• Test your site renders with JavaScript disabled
• Get Navigation Timing API metrics
• Measure First Paint and First Contentful Paint
• Measure Largest Contentful Paint w/PerformanceObserver
• Measure Cumulative Layout Shift w/PerformanceObserver
• Measure SPA metrics with Next.js
• Get DevTools-specific metrics: Frames Per Second
• Measure memory leaks
• Override requests with Request Interception
• Block third-party domains
• Code Coverage for JavaScript and CSS

The next time you get something done with DevTools, ask yourself if it makes sense to automate it, and how much time this will save down-the-line.