Browser Automation Screenshot Verification

This document describes the workflow for using playwright-cli to verify site rendering, take responsive screenshots across different device formats, and upload verification files to the site.

Prerequisites

Ensure playwright-cli is installed and accessible:

which playwright-cli

Browser Setup

When playwright-cli cannot find the Chrome distribution, install the chromium browser:

playwright-cli install-browser chromium

Open the browser with the --browser=chromium flag:

playwright-cli open https://michael.wegener.engineering/ --no-headed --browser=chromium

Screenshot Workflow

1. Resize Viewport and Take Screenshot

# Desktop (1920x1080)
playwright-cli resize 1920 1080
playwright-cli screenshot --hires --filename=/path/to/screenshot-desktop-home.png

# Mobile iPhone SE (375x812)
playwright-cli resize 375 812
playwright-cli screenshot --hires --filename=/path/to/screenshot-mobile-iphone-se.png

# Mobile iPhone 14/15 (390x844)
playwright-cli resize 390 844
playwright-cli screenshot --hires --filename=/path/to/screenshot-mobile-iphone.png

# Tablet iPad (768x1024)
playwright-cli resize 768 1024
playwright-cli screenshot --hires --filename=/path/to/screenshot-tablet-ipad.png

2. Navigate to Different Pages

# Blog listing
playwright-cli goto https://michael.wegener.engineering/blog/

# Blog entry
playwright-cli goto https://michael.wegener.engineering/blog/2026-07-07-neovim-als-standard-editor/

# Flappy bird projects
playwright-cli goto https://michael.wegener.engineering/projects/flappy-bird-clone/

# Gemma version
playwright-cli goto https://michael.wegener.engineering/games/flappy-bird-clone/gemma-4-31b-mtp/

3. Check Console Errors

playwright-cli console error

4. Close Browser Session

playwright-cli close-all

Verification File Upload

To verify site ownership with Google Search Console, upload the verification file to the site root:

# Copy to project public directory
cp /home/mw/Downloads/googlebd92749a59e77b6e.html site/public/

# Add to git
git add site/public/googlebd92749a59e77b6e.html
git commit -m "docs: add Google site verification file"

# Rsync to ds718 Synology host
rsync -avz site/public/googlebd92749a59e77b6e.html michael@ds718:/volume1/web/michael-wegener-engineering/ -e "ssh -p 22222"

# Verify accessibility
curl -s https://michael.wegener.engineering/googlebd92749a59e77b6e.html

Note: Keep the verification file on the site for ongoing verification.

Screenshot Naming Convention

screenshot-desktop-{page}.png - Desktop screenshots (1920x1080)
screenshot-mobile-{device}.png - Mobile screenshots
screenshot-tablet-{device}.png - Tablet screenshots

Common Issues

Chromium Distribution Not Found

Error: Chromium distribution 'chrome' is not found at /opt/google/chrome/chrome

Solution: Install chromium browser:

playwright-cli install-browser chromium

Or use the --browser=chromium flag:

playwright-cli open https://example.com/ --no-headed --browser=chromium

Console Errors

Use playwright-cli console error to check for JS errors or 404s on the page.