0
# Media Generation
1

2
Screenshot capture and PDF generation with extensive customization options for visual testing and documentation.
3

4
## Capabilities
5

6
### Screenshot Capture
7

8
Take screenshots of pages or specific elements.
9

10
```typescript { .api }
11
/**
12
 * Take screenshot of page
13
 * @param options - Screenshot configuration
14
 * @returns Promise resolving to image buffer
15
 */
16
screenshot(options?: ScreenshotOptions): Promise<Uint8Array>;
17

18
interface ScreenshotOptions {
19
  /** Path to save screenshot */
20
  path?: string;
21
  /** Image format */
22
  type?: "png" | "jpeg" | "webp";
23
  /** Image quality (0-100, JPEG only) */
24
  quality?: number;
25
  /** Capture full scrollable page */
26
  fullPage?: boolean;
27
  /** Clip to specific area */
28
  clip?: {x: number; y: number; width: number; height: number};
29
  /** Omit background (PNG only) */
30
  omitBackground?: boolean;
31
  /** Encoding format */
32
  encoding?: "base64" | "binary";
33
  /** Capture beyond viewport */
34
  captureBeyondViewport?: boolean;
35
  /** From surface (experimental) */
36
  fromSurface?: boolean;
37
}
38
```
39

40
**Usage Examples:**
41

42
```typescript
43
// Basic screenshot
44
const buffer = await page.screenshot();
45

46
// Full page screenshot
47
await page.screenshot({
48
  path: "fullpage.png",
49
  fullPage: true
50
});
51

52
// Clipped screenshot
53
await page.screenshot({
54
  path: "section.png",
55
  clip: { x: 0, y: 0, width: 800, height: 600 }
56
});
57

58
// Base64 encoded
59
const base64 = await page.screenshot({
60
  encoding: "base64",
61
  type: "jpeg",
62
  quality: 80
63
});
64
```
65

66
### PDF Generation
67

68
Generate PDF documents from pages.
69

70
```typescript { .api }
71
/**
72
 * Generate PDF from page
73
 * @param options - PDF configuration
74
 * @returns Promise resolving to PDF buffer
75
 */
76
pdf(options?: PDFOptions): Promise<Uint8Array>;
77

78
interface PDFOptions {
79
  /** Path to save PDF */
80
  path?: string;
81
  /** Scale factor */
82
  scale?: number;
83
  /** Display header and footer */
84
  displayHeaderFooter?: boolean;
85
  /** Header template HTML */
86
  headerTemplate?: string;
87
  /** Footer template HTML */
88
  footerTemplate?: string;
89
  /** Print background graphics */
90
  printBackground?: boolean;
91
  /** Landscape orientation */
92
  landscape?: boolean;
93
  /** Page ranges to print */
94
  pageRanges?: string;
95
  /** Paper format */
96
  format?: "Letter" | "Legal" | "Tabloid" | "Ledger" | "A0" | "A1" | "A2" | "A3" | "A4" | "A5" | "A6";
97
  /** Paper width */
98
  width?: string | number;
99
  /** Paper height */
100
  height?: string | number;
101
  /** Page margins */
102
  margin?: {
103
    top?: string | number;
104
    right?: string | number;
105
    bottom?: string | number;
106
    left?: string | number;
107
  };
108
  /** Prefer CSS page size */
109
  preferCSSPageSize?: boolean;
110
  /** Generate tagged PDF */
111
  generateTaggedPDF?: boolean;
112
  /** Generate document outline */
113
  generateDocumentOutline?: boolean;
114
}
115
```
116

117
**Usage Examples:**
118

119
```typescript
120
// Basic PDF
121
const pdfBuffer = await page.pdf();
122

123
// Configured PDF
124
await page.pdf({
125
  path: "document.pdf",
126
  format: "A4",
127
  printBackground: true,
128
  margin: {
129
    top: "1in",
130
    right: "1in",
131
    bottom: "1in",
132
    left: "1in"
133
  }
134
});
135

136
// With header/footer
137
await page.pdf({
138
  path: "report.pdf",
139
  displayHeaderFooter: true,
140
  headerTemplate: '<div style="font-size:10px;">Header</div>',
141
  footerTemplate: '<div style="font-size:10px;">Page <span class="pageNumber"></span></div>'
142
});
143
```
144

145
### Screen Recording
146

147
Record page interactions as video.
148

149
```typescript { .api }
150
/**
151
 * Start screen recording
152
 * @param options - Recording options
153
 */
154
screencast(options?: ScreencastOptions): Promise<void>;
155

156
interface ScreencastOptions {
157
  /** Path to save video */
158
  path?: string;
159
  /** Video format */
160
  format?: "webm";
161
  /** Video quality */
162
  quality?: number;
163
  /** Frame rate */
164
  fps?: number;
165
  /** Video scale */
166
  scale?: number;
167
  /** Crop area */
168
  crop?: {x: number; y: number; width: number; height: number};
169
}
170
```
171

172
**Usage Examples:**
173

174
```typescript
175
// Start recording
176
await page.screencast({
177
  path: "recording.webm",
178
  fps: 25
179
});
180

181
// Perform actions
182
await page.goto("https://example.com");
183
await page.click("#button");
184

185
// Stop recording (implementation depends on browser)
186
```