Shot-scraper: automated screenshots for documentation, built on Playwright

[simonw]

https://simonwillison.net/2022/Mar/10/shot-scraper/

[spockz]

I wonder if adding overlays could be easier done with another tool. Let shot-scraper export the coordinates of the elements you are interested in and then use another tool to add in the arrows or circles. This also allows for re-using a single screenshot for multiple annotations.

[simonw → spockz]

My hunch is that applying annotations in-browser will be easier, just because SVG and canvas are such powerful tools for dynamic graphics.

I'm hoping people with stronger frontend skills than me will provide some more interesting examples there!

[spockz → simonw]

Yes, I agree that SVG and cans are powerful tools. But the amount of JavaScript in the examples isn’t insignificant. I saw a simple dsl for annotating pictures with arrows, rectangles, circles, and text from the Cli. But I can’t find it anymore.

[simonw → spockz]

One idea I had there was to build a utility library that gets made available automatically, so you could write JavaScript that looks something like this:

    ShotScraper.annotate(
        ".facet-link",
        ShotScraper.Arrow({
            color: "pink",
            width: 150,
            direction: "right"
        })
     )

Building this out is a lot of extra work though, so I decided to ship without that and see what kind of things people needed.

[spockz → simonw]

That would be neat indeed. Would it be a lot of extra work?

If there is a transparant SVG canvas placed over the element, then the positioning of elements should be relatively trivial? It would basically follow the example JavaScript in the post.

[simonw → spockz]

My concern is more about the long-term maintenance of it.

If I ship a JavaScript library with the tool, then modify that JavaScript library later, I risk breaking the automated screenshots that were scripted against previous versions of the library.

If I'm committing to shipping a library that won't break backwards compatibility, I have to be very confident that I'm designing it well from the start.

So I'm probably going to do it at some point, but I'm not going to rush into it.

[zellyn → simonw]

That sounds entirely reasonable. It might also be a good idea to have users call it with something like:

    Shotscraper.v1.annotate( // etc

[snthpy]

I see something by Simon so I take a look. Was not disappointed.

[sebazzz]

> As software changes over time, screenshots get out-of-date. I don’t like the idea of stale screenshots, but I also don’t want to have to manually recreate them every time I make the tiniest tweak to the visual appearance of my software.

I made an automated test that would allow me to grab screenshots for documentation. Besides it's primary function as an automated Selenium test, it also provided a realistic test data and allowed me to update the screenshots as the design of my Retrospective tool took shape.

[cjlm]

As an alternative I’m a big fan of the screenshot service from 11ty – very easy to use as part of a static site

https://www.11ty.dev/docs/services/screenshots/

[captnswing]

Playwright is amazing

[lofatdairy → captnswing]

It really is, I recently used the automatic code generator feature and it blew my mind how much easier it was to use than puppeteer. Maybe that feature made it to puppeteer, but even still I find playwright's syntax far friendlier.