Design and implement selector shots

[simonw]

Goal here is to be able to take a screenshot of a specific component of the page, identified by a CSS selector.

Should work for both multi and single shot mode.

[simonw]

https://playwright.dev/python/docs/screenshots

page.locator(".header").screenshot(path="screenshot.png")

[simonw]

In single shot mode:

shot-scraper https://simonwillison.net -s "#bighead"

In YAML:

- url: https://simonwillison.net/
  output: simonwillison.net.png
  selector: "#bighead"

[simonw]

Testing multi with this demo.yml file:

- output: example.com.png
  url: http://www.example.com/
- output: w3c.org.png
  url: https://www.w3.org/
- output: simonwillison-bighead.png
  url: https://simonwillison.net/
  selector: "#bighead"

% shot-scraper multi demo.yml
Screenshot of 'http://www.example.com/' written to 'example.com.png'
Screenshot of 'https://www.w3.org/' written to 'w3c.org.png'
Screenshot of '#bighead' on 'https://simonwillison.net/' written to 'simonwillison-bighead.png'

That last one produced this: