Website Full-Page Screenshot Script

Shared on August 19, 2025

JavaScriptNode.js

“

Create a script to take full-page screenshots of these websites: Google (https://google.com), GitHub (https://github.com), and Stack Overflow (https://stackoverflow.com). Save each screenshot with the website name and timestamp.

“

Sample Output

Example output generated from this coding session

Google_2025-08-19.png

56.93 KB • image/png

Download

Conversation

2 messages

Slash

💭 Reasoning

The user wants me to create a script that:

Takes full-page screenshots of Google, GitHub, and Stack Overflow
Saves each screenshot with the website name and timestamp
Use existing codebase as much as possible

I should first:

Use TodoWrite to plan the task
Explore the current project structure to understand the existing codebase
Look for existing Playwright configuration and patterns
Create or modify scripts to implement the screenshot functionality

Let me start by planning the task and exploring the project structure.

Update Tasks4 tasks

Explore current Playwright project structure and existing code patternspending

Check existing Playwright configuration and setuppending

Create script to take full-page screenshots of Google, GitHub, and Stack Overflow with timestampspending

Run and verify the screenshot script works correctlypending

List Directory/home/user/project

Read File/home/user/project/package.json

Read File/home/user/project/main.js

Read File/home/user/project/utils.js

Update Tasks4 tasks

Explore current Playwright project structure and existing code patternscompleted

Check existing Playwright configuration and setupcompleted

Create script to take full-page screenshots of Google, GitHub, and Stack Overflow with timestampsin progress

Run and verify the screenshot script works correctlypending

Perfect! The project already has Playwright configured with useful utilities. I'll update the main.js file to implement the screenshot functionality using the existing

takeScreenshot

utility.

Edit File/home/user/project/main.js

Update Tasks4 tasks

Explore current Playwright project structure and existing code patternscompleted

Check existing Playwright configuration and setupcompleted

Create script to take full-page screenshots of Google, GitHub, and Stack Overflow with timestampscompleted

Run and verify the screenshot script works correctlyin progress

Now let's test the script:

Terminalcd /home/user/project && npm start

List Directory/home/user/project/output

Update Tasks4 tasks

Explore current Playwright project structure and existing code patternscompleted

Check existing Playwright configuration and setupcompleted

Create script to take full-page screenshots of Google, GitHub, and Stack Overflow with timestampscompleted

Run and verify the screenshot script works correctlycompleted

Perfect! The script is working successfully. I've updated the existing Playwright project to take full-page screenshots of Google, GitHub, and Stack Overflow. The script:

Uses the existing project structure and utilities
Takes screenshots with website names and timestamps (format:
```
WebsiteName_YYYY-MM-DD.png
```
)
Saves all screenshots to the
```
output
```
directory
Handles errors gracefully for each website
Uses the existing
```
takeScreenshot
```
utility function

All three screenshots have been captured and saved successfully. Run

npm start

anytime to take fresh screenshots with updated timestamps.

Frequently Asked Questions

Key insights from this conversation

What is the goal of this script and which sites are included?

Capture full-page screenshots of Google, GitHub, and Stack Overflow; saved as WebsiteName_YYYY-MM-DD.png in the output dir.

What tech stack and utilities were used?

Playwright with an existing takeScreenshot utility; main.js updated; run via npm start.

What was accomplished?

All three screenshots were saved successfully; per-site error handling added.

How do you run or reuse this script?

Run npm start to capture fresh screenshots; files saved to output with the current date in the filename.