feat: add css parameter for custom CSS injection in screenshots
All checks were successful
Build & Deploy to Staging / Build & Deploy to Staging (push) Successful in 10m33s
All checks were successful
Build & Deploy to Staging / Build & Deploy to Staging (push) Successful in 10m33s
This commit is contained in:
parent
1b7251fbcb
commit
0999474fbd
8 changed files with 176 additions and 17 deletions
|
|
@ -103,17 +103,21 @@ const singleHide = await snap.capture('https://example.com', {
|
|||
});
|
||||
```
|
||||
|
||||
### Combined Dark Mode + Element Hiding
|
||||
### Custom CSS Injection
|
||||
|
||||
```typescript
|
||||
// Perfect for clean marketing screenshots
|
||||
const marketingShot = await snap.capture({
|
||||
url: 'https://your-saas-app.com',
|
||||
// Inject custom CSS before capture
|
||||
const styled = await snap.capture({
|
||||
url: 'https://example.com',
|
||||
css: 'body { background: #1a1a2e !important; color: #eee !important; font-family: "Comic Sans MS" }',
|
||||
});
|
||||
|
||||
// Combine with other options
|
||||
const combined = await snap.capture({
|
||||
url: 'https://example.com',
|
||||
css: '.hero { padding: 80px 0 } h1 { font-size: 48px }',
|
||||
darkMode: true,
|
||||
hideSelectors: ['.dev-banner', '.beta-notice'],
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
deviceScale: 2,
|
||||
hideSelectors: ['.cookie-banner'],
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -145,6 +149,7 @@ Returns a `Promise<Buffer>` containing the screenshot image.
|
|||
| `waitUntil` | `string` | `'domcontentloaded'` | Load event to wait for |
|
||||
| `darkMode` | `boolean` | `false` | Emulate prefers-color-scheme: dark |
|
||||
| `hideSelectors` | `string \| string[]` | — | CSS selectors to hide before capture |
|
||||
| `css` | `string` | — | Custom CSS to inject before capture (max 5000 chars) |
|
||||
|
||||
### `snap.health()`
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue