Part of my "beyond the full-stack" process includes sending my clients screen shots of several top-level pages at every breakpoint. Sometimes, I'll include a few more pages if there are distinct issues or if it's a huge web site.

I set up a github repository with this in mind. Let's look into one of the scripts.

First, look at the number of options we have here. Three browsers, five versions. That's a lot of files. It could be overwhelming. What I usually do is comment out two of these. Firefox usually goes, partly because right now, you don't get it at the tablet and phone sizes due to an issue with ‘is_mobile' and FF. Safari is the choice on an iPhone and Chrome on Android. So, that's the safest best.

 browser_types = {
        "chrome": p.chromium,
        "firefox": p.firefox,
        "safari": p.webkit
    }

    emulations    = {
        '1-iphone-emulation': p.devices['iPhone 11 Pro'],
        '2-ipad-emulation'  : p.devices['iPad Pro 11'],
        '3-laptop': '1280x1024',
        '4-desktop': '1440x1024',
        '5-hd-desktop': '1920x1080'
    }

I also sometimes eliminate 5-hd or 3-laptop. It really depends on the client and whether you want to overwhelm them.

Here's a zoomed out version of all the code. It's really a short script. That's what's so awesome. And, you can set this to run and go do something while it does, so it's just not a lot of work.

↓ Here's what all of theme together can look like when you are done. ↓

I set this up script up originally to just hit one URL, which I can pass in on the command line. To do multiple, I've been feeding a list of URLs using bash, like this.

#!/bin/bash

filename=$PWD/$1
dir=`dirname $0`
while read line; do
    echo "DOING >> python3 ./playwright-python-screenshot-3-browsers-5-breakpoints.py $line"
    python3 $dir/playwright-python-screenshot-3-browsers-5-breakpoints.py $line
    sleep 3
done < $filename

The URL file is just one per line, like:

https://hansanderson.com/
https://dist1nc7ive.com/
https://huckfacedg.com/

Hit me up if you like the scripts and want something added! Or, fork and drop a PR, I'd love that.