# Puppeteer: Browser Automation mit Chrome DevTools Protocol
**Meta-Description:** Puppeteer für Browser Automation. Chrome DevTools Protocol, Headless Mode, Screenshots, PDF Generation und Testing.
**Keywords:** Puppeteer, Browser Automation, Chrome DevTools Protocol, Headless Chrome, Screenshot, PDF, Web Testing
---
## Einführung
Puppeteer ist die **offizielle Node.js Library von Google** für Chrome/Firefox Automation. Über das Chrome DevTools Protocol (CDP) bietet es direkten Zugang zu Browser-Funktionen, die über normale APIs nicht erreichbar sind.
---
## 2026 Updates
```
┌─────────────────────────────────────────────────────────────┐
│ PUPPETEER 2026 │
├─────────────────────────────────────────────────────────────┤
│ │
│ Neue Features: │
│ ├── WebDriver BiDi Protocol Support │
│ ├── Firefox vollständig unterstützt │
│ ├── Neuer Headless Mode (schwerer zu detecten) │
│ ├── Verbesserte Locator API │
│ └── 15-20% weniger Memory Usage │
│ │
│ DevTools Protocol: │
│ ├── Network Interception │
│ ├── Performance Metrics │
│ ├── Coverage Reports │
│ ├── Console Logs │
│ └── Security/Certificate Handling │
│ │
│ Use Cases: │
│ ├── Web Scraping │
│ ├── Automated Testing │
│ ├── PDF Generation │
│ ├── Screenshot Services │
│ └── Performance Auditing │
│ │
└─────────────────────────────────────────────────────────────┘
```
---
## Setup
```bash
# Mit Chrome Download
npm install puppeteer
# Ohne Chrome (für eigene Installation)
npm install puppeteer-core
```
```typescript
// basic.ts
import puppeteer from 'puppeteer';
async function main() {
const browser = await puppeteer.launch({
headless: true, // 'new' Headless Mode ist default
args: [
'--no-sandbox',
'--disable-setuid-sandbox',
'--disable-dev-shm-usage'
]
});
const page = await browser.newPage();
await page.setViewport({ width: 1920, height: 1080 });
await page.goto('https://example.com');
const title = await page.title();
console.log('Title:', title);
await browser.close();
}
```
---
## Screenshots & PDFs
```typescript
// Screenshot
async function captureScreenshot(url: string, outputPath: string) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1920, height: 1080 });
await page.goto(url, { waitUntil: 'networkidle0' });
// Full Page Screenshot
await page.screenshot({
path: outputPath,
fullPage: true,
type: 'png'
});
// Specific Element
const element = await page.$('.hero-section');
if (element) {
await element.screenshot({ path: 'hero.png' });
}
// Mit Clip (Ausschnitt)
await page.screenshot({
path: 'clip.png',
clip: {
x: 0,
y: 0,
width: 800,
height: 600
}
});
await browser.close();
}
// PDF Generation
async function generatePDF(url: string, outputPath: string) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle0' });
// Print-Styles laden
await page.emulateMediaType('print');
await page.pdf({
path: outputPath,
format: 'A4',
printBackground: true,
margin: {
top: '20mm',
right: '20mm',
bottom: '20mm',
left: '20mm'
},
displayHeaderFooter: true,
headerTemplate: 'Header
',
footerTemplate: '/
'
});
await browser.close();
}
// Invoice PDF aus HTML
async function generateInvoicePDF(html: string): Promise {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(html, { waitUntil: 'networkidle0' });
const pdf = await page.pdf({
format: 'A4',
printBackground: true
});
await browser.close();
return pdf;
}
```
---
## Form Handling & Interaction
```typescript
async function fillAndSubmitForm(page: Page) {
// Text Input
await page.type('#email', 'user@example.com', { delay: 50 });
await page.type('#password', 'secretpassword', { delay: 50 });
// Checkbox
await page.click('#terms');
// Select Dropdown
await page.select('#country', 'DE');
// Radio Button
await page.click('input[name="plan"][value="premium"]');
// File Upload
const fileInput = await page.$('input[type="file"]');
await fileInput?.uploadFile('./document.pdf');
// Submit
await Promise.all([
page.waitForNavigation(),
page.click('button[type="submit"]')
]);
}
// Keyboard & Mouse
async function advancedInteraction(page: Page) {
// Keyboard
await page.keyboard.press('Tab');
await page.keyboard.type('Hello World');
await page.keyboard.down('Shift');
await page.keyboard.press('ArrowLeft');
await page.keyboard.up('Shift');
await page.keyboard.press('Backspace');
// Mouse
await page.mouse.move(100, 200);
await page.mouse.click(100, 200);
await page.mouse.wheel({ deltaY: 500 });
// Drag & Drop
const source = await page.$('#drag-source');
const target = await page.$('#drop-target');
if (source && target) {
const sourceBox = await source.boundingBox();
const targetBox = await target.boundingBox();
if (sourceBox && targetBox) {
await page.mouse.move(
sourceBox.x + sourceBox.width / 2,
sourceBox.y + sourceBox.height / 2
);
await page.mouse.down();
await page.mouse.move(
targetBox.x + targetBox.width / 2,
targetBox.y + targetBox.height / 2
);
await page.mouse.up();
}
}
}
```
---
## Network Interception
```typescript
import { Page, HTTPRequest } from 'puppeteer';
async function interceptNetwork(page: Page) {
await page.setRequestInterception(true);
page.on('request', (request: HTTPRequest) => {
const resourceType = request.resourceType();
const url = request.url();
// Block Images, CSS, Fonts
if (['image', 'stylesheet', 'font'].includes(resourceType)) {
request.abort();
return;
}
// Block Tracking
if (url.includes('analytics') || url.includes('tracking')) {
request.abort();
return;
}
// Modify Headers
const headers = {
...request.headers(),
'X-Custom-Header': 'value'
};
request.continue({ headers });
});
// Response Interception
page.on('response', async (response) => {
if (response.url().includes('/api/')) {
try {
const json = await response.json();
console.log('API Response:', json);
} catch {}
}
});
}
// Mock API Responses
async function mockApi(page: Page) {
await page.setRequestInterception(true);
page.on('request', (request) => {
if (request.url().includes('/api/users')) {
request.respond({
status: 200,
contentType: 'application/json',
body: JSON.stringify([
{ id: 1, name: 'Mock User' }
])
});
} else {
request.continue();
}
});
}
```
---
## Chrome DevTools Protocol Direct Access
```typescript
async function cdpAccess(page: Page) {
const client = await page.target().createCDPSession();
// Network Conditions (Throttling)
await client.send('Network.emulateNetworkConditions', {
offline: false,
downloadThroughput: 1.5 * 1024 * 1024 / 8, // 1.5 Mbps
uploadThroughput: 750 * 1024 / 8, // 750 Kbps
latency: 40 // 40ms
});
// CPU Throttling
await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
// Performance Metrics
await client.send('Performance.enable');
const metrics = await client.send('Performance.getMetrics');
console.log('Performance Metrics:', metrics);
// Coverage (CSS/JS Usage)
await client.send('CSS.startRuleUsageTracking');
// ... navigate and interact
const coverage = await client.send('CSS.stopRuleUsageTracking');
console.log('CSS Coverage:', coverage);
// Clear Browser Data
await client.send('Network.clearBrowserCache');
await client.send('Network.clearBrowserCookies');
// Console Messages
client.on('Runtime.consoleAPICalled', (event) => {
console.log('Console:', event.type, event.args);
});
}
```
---
## Performance Testing
```typescript
async function measurePerformance(url: string) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Performance Observer
await page.evaluateOnNewDocument(() => {
window.performanceEntries = [];
const observer = new PerformanceObserver((list) => {
window.performanceEntries.push(...list.getEntries());
});
observer.observe({ entryTypes: ['navigation', 'resource', 'paint', 'largest-contentful-paint'] });
});
await page.goto(url, { waitUntil: 'networkidle0' });
// Metrics abrufen
const metrics = await page.metrics();
console.log('Puppeteer Metrics:', {
JSHeapUsedSize: metrics.JSHeapUsedSize,
LayoutCount: metrics.LayoutCount,
RecalcStyleCount: metrics.RecalcStyleCount
});
// Performance Timing
const timing = await page.evaluate(() => {
const t = performance.timing;
return {
dns: t.domainLookupEnd - t.domainLookupStart,
tcp: t.connectEnd - t.connectStart,
ttfb: t.responseStart - t.requestStart,
download: t.responseEnd - t.responseStart,
domInteractive: t.domInteractive - t.navigationStart,
domComplete: t.domComplete - t.navigationStart,
load: t.loadEventEnd - t.navigationStart
};
});
console.log('Timing:', timing);
// Core Web Vitals
const cwv = await page.evaluate(() => {
return (window as any).performanceEntries.filter(
e => ['largest-contentful-paint', 'first-input', 'layout-shift'].includes(e.entryType)
);
});
await browser.close();
return { metrics, timing, cwv };
}
```
---
## Stealth Mode
```typescript
import puppeteer from 'puppeteer-extra';
import StealthPlugin from 'puppeteer-extra-plugin-stealth';
puppeteer.use(StealthPlugin());
async function stealthBrowse() {
const browser = await puppeteer.launch({
headless: true,
args: [
'--disable-blink-features=AutomationControlled',
'--no-sandbox'
]
});
const page = await browser.newPage();
// Additional Stealth
await page.evaluateOnNewDocument(() => {
// Chrome Runtime
Object.defineProperty(navigator, 'webdriver', {
get: () => false
});
// Permissions
const originalQuery = window.navigator.permissions.query;
window.navigator.permissions.query = (parameters: any) =>
parameters.name === 'notifications'
? Promise.resolve({ state: 'denied' } as PermissionStatus)
: originalQuery(parameters);
// Plugins
Object.defineProperty(navigator, 'plugins', {
get: () => [1, 2, 3, 4, 5]
});
});
await page.goto('https://bot.sannysoft.com');
await page.screenshot({ path: 'stealth-test.png', fullPage: true });
await browser.close();
}
```
---
## Fazit
Puppeteer 2026 bietet:
1. **CDP Direct Access**: Volle Browser-Kontrolle
2. **Multi-Browser**: Chrome + Firefox (WebDriver BiDi)
3. **New Headless**: Schwerer zu detecten
4. **Performance Tools**: Metrics, Coverage, Auditing
Ideal für Testing, PDF-Generation und Chrome-spezifische Features.
---
## Bildprompts
1. "Puppet master controlling browser strings, automation concept"
2. "Chrome DevTools with code connections, developer tools visualization"
3. "PDF documents being generated from web pages, document automation"
---
## Quellen
- [Puppeteer Documentation](https://pptr.dev/)
- [Puppeteer GitHub](https://github.com/puppeteer/puppeteer)
- [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/)
- [Puppeteer Web Scraping 2026](https://roundproxies.com/blog/puppeteer-web-scraping/)