93 lines
2.4 KiB
Markdown
93 lines
2.4 KiB
Markdown
|
# WebShot Example Scripts
|
||
|
|
|
||
|
|
Collection of example puppeteer automation scripts for WebShot.
|
||
|
|
|
||
|
|
## 📜 Available Scripts
|
||
|
|
|
||
|
|
### `scroll-animation.js`
|
||
|
|
Smoothly scrolls through the entire page before capturing. Great for long-form content and revealing lazy-loaded images.
|
||
|
|
|
||
|
|
**Usage:**
|
||
|
|
```bash
|
||
|
|
webshot -u https://example.com -s ~/webshot-examples/scroll-animation.js
|
||
|
|
```
|
||
|
|
|
||
|
|
### `dark-mode.js`
|
||
|
|
Attempts to enable dark mode on the page using various common methods. Perfect for capturing dark theme versions of websites.
|
||
|
|
|
||
|
|
**Usage:**
|
||
|
|
```bash
|
||
|
|
webshot -u https://github.com -s ~/webshot-examples/dark-mode.js
|
||
|
|
```
|
||
|
|
|
||
|
|
### `interact-form.js`
|
||
|
|
Fills out and interacts with forms on the page. Useful for capturing form states with data.
|
||
|
|
|
||
|
|
**Usage:**
|
||
|
|
```bash
|
||
|
|
webshot -u https://example.com/contact -s ~/webshot-examples/interact-form.js
|
||
|
|
```
|
||
|
|
|
||
|
|
### `hover-effects.js`
|
||
|
|
Simulates hovering over interactive elements to capture hover states.
|
||
|
|
|
||
|
|
**Usage:**
|
||
|
|
```bash
|
||
|
|
webshot -u https://example.com -s ~/webshot-examples/hover-effects.js
|
||
|
|
```
|
||
|
|
|
||
|
|
### `mobile-view.js`
|
||
|
|
Sets viewport to mobile dimensions (iPhone SE). Capture mobile-responsive designs.
|
||
|
|
|
||
|
|
**Usage:**
|
||
|
|
```bash
|
||
|
|
webshot -u https://example.com -s ~/webshot-examples/mobile-view.js
|
||
|
|
```
|
||
|
|
|
||
|
|
### `animated-sections.js`
|
||
|
|
Scrolls through page sections to trigger scroll-based animations. Perfect for modern websites with scroll-triggered effects.
|
||
|
|
|
||
|
|
**Usage:**
|
||
|
|
```bash
|
||
|
|
webshot -u https://bruno-simon.com -s ~/webshot-examples/animated-sections.js
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🎯 Cool Websites to Try
|
||
|
|
|
||
|
|
- **https://bruno-simon.com** - 3D portfolio with scroll interactions
|
||
|
|
- **https://threejs.org/examples** - WebGL animations
|
||
|
|
- **https://stripe.com** - Beautiful modern design
|
||
|
|
- **https://linear.app** - Sleek UI with animations
|
||
|
|
- **https://github.com** - Try with dark-mode.js
|
||
|
|
|
||
|
|
## ✨ Creating Your Own Scripts
|
||
|
|
|
||
|
|
Scripts have access to the `page` object from Puppeteer. Here's a template:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// Your custom automation script
|
||
|
|
|
||
|
|
console.log('🚀 Starting custom automation...');
|
||
|
|
|
||
|
|
// Do something with the page
|
||
|
|
await page.evaluate(() => {
|
||
|
|
// Manipulate DOM
|
||
|
|
document.body.style.background = '#000';
|
||
|
|
});
|
||
|
|
|
||
|
|
// Wait for animations
|
||
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
|
|
||
|
|
console.log('✓ Automation complete');
|
||
|
|
```
|
||
|
|
|
||
|
|
## 📚 Puppeteer API Reference
|
||
|
|
|
||
|
|
- [Page Methods](https://pptr.dev/api/puppeteer.page)
|
||
|
|
- [Browser Context](https://pptr.dev/api/puppeteer.browsercontext)
|
||
|
|
- [Element Handles](https://pptr.dev/api/puppeteer.elementhandle)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**WebShot** - Shoot your favorite Websites!!!
|