It would be great to have an omit_background option so you can take transparent PNG screenshots

[palewire]

It's in the options, but I don't think it's available.

https://playwright.dev/python/docs/api/class-locator#locator-screenshot-option-omit-background

[simonw]

Seeing an error with this in CI: https://github.com/simonw/shot-scraper/actions/runs/4815473826/jobs/8574190652

Screenshot of '.day' on 'https://simonwillison.net/' written to 'examples/selector-all.png'
Screenshot of 'https://simonwillison.net/' written to 'examples/simon-narrow.png'
Error: TypeError: Cannot set properties of undefined (setting 'backgroundColor')
    at eval (eval at evaluate (:195:30), <anonymous>:1:60)
    at eval (<anonymous>)
    at UtilityScript.evaluate (<anonymous>:195:30)
    at UtilityScript.<anonymous> (<anonymous>:1:44)

[simonw]

Looks like the error is from:

shot-scraper/tests/run_examples.sh

Lines 33 to 37 in ebc2e90

	# Omit background
	shot-scraper https://simonwillison.net/ \
	-h 800 -o examples/simonwillison-transparent.png \
	--javascript "document.getElementsByTagName('body').style.backgroundColor='transparent'" \
	--omit-background

That gives me the same error locally too:

% shot-scraper https://simonwillison.net/ \
  -h 800 -o examples/simonwillison-transparent.png \
  --javascript "document.getElementsByTagName('body').style.backgroundColor='transparent'" \
  --omit-background
Error: TypeError: Cannot set properties of undefined (setting 'backgroundColor')
    at eval (eval at evaluate (:197:30), <anonymous>:1:60)
    at eval (<anonymous>)
    at UtilityScript.evaluate (<anonymous>:197:30)
    at UtilityScript.<anonymous> (<anonymous>:1:44)

[simonw]

It's because document.getElementsByTagName('body') returns an array-like collection. I'm going to try document.querySelector('body') instead.

[simonw]

This worked without an error:

shot-scraper https://simonwillison.net/ \
  -h 800 -o examples/simonwillison-transparent.png \
  --javascript "document.querySelector('body').style.backgroundColor='transparent'" \
  --omit-background

And produced this image (which has a transparent background, though you can't see that on GitHub Issues because the background here is white too):