3 ms·

shot-scraper is a CLI tool for HTML render snapshots with --height --width and --scale-factor (--retina ~= --scale-factor=2.0) args, and a -j/--javascript optio

shot-scraper is a CLI tool for HTML render snapshots with --height --width and --scale-factor (--retina ~= --scale-factor=2.0) args, and a -j/--javascript option to run JS before taking the screenshot. There's not yet a way to resize the viewport and take another screenshot without loading the page again. There's not yet a way to store (h,w,scale,showbrowserchrome) configurations in a YAML file; but shot-scraper does work in GitHub Actions. Some web testing tools can record a video of a test session and save it if there's a test failure. E.g. Playwright defaults to an 800x600 viewport for test videos to retain-on-failure or record only if on-first-retry: https://playwright.dev/docs/videos https://playwright.dev/docs/videos Something like Cloudflare Browser Isolation - which splits the browser at an interface such that a Chrome browser server runs on a remote server and a Chrome client runs locally - might make it easier to compress recordings of n x test invocations (in isolated browsers or workers)

onassar 2y ago
This is awesome: thanks for these resources! We'll take a look at Cloudflare Browser Isolation for sure. We've played with screenshot tools at specific viewport dimensions etc, but it's not often the right fit for when we're doing interactive frontend responsive updates. That aside though, the screenshot APIs could be a great integration to be able to download/save screenshots of specific viewports.
- westurner 2y ago
  DevTools has a list of default viewport sizes, but they change from browser release to release. Is there a better way or an existing [YAML] file schema to generate a list of viewport configurations to import into DevTools?
  - onassar 2y ago
    We looked into this, and we couldn't find a way to do so, but we've open sourced the data (here: https://github.com/bitcomplete/labs-delta-viewport-tester-viewports https://github.com/bitcomplete/labs-delta-viewport-tester-vi...) so if you are able to find a way to do so, that could be a great option.
    - westurner 2y ago
      Hey thanks! https://github.com/bitcomplete/labs-delta-viewport-tester-viewports/blob/main/items.json https://github.com/bitcomplete/labs-delta-viewport-tester-vi... Use case: add which few of these to DevTools. IDK if there's a YAML parser in DevTools already, otherwise JSON + jq should work somehow awesome-chrome-devtools: https://github.com/paulirish/awesome-chrome-devtools https://github.com/paulirish/awesome-chrome-devtools
      - onassar 2y ago
        Thanks for sharing this @westurner

onassar 2y ago

This is awesome: thanks for these resources! We'll take a look at Cloudflare Browser Isolation for sure. We've played with screenshot tools at specific viewport dimensions etc, but it's not often the right fit for when we're doing interactive frontend responsive updates. That aside though, the screenshot APIs could be a great integration to be able to download/save screenshots of specific viewports.

westurner 2y ago
DevTools has a list of default viewport sizes, but they change from browser release to release. Is there a better way or an existing [YAML] file schema to generate a list of viewport configurations to import into DevTools?
- onassar 2y ago
  We looked into this, and we couldn't find a way to do so, but we've open sourced the data (here: https://github.com/bitcomplete/labs-delta-viewport-tester-viewports https://github.com/bitcomplete/labs-delta-viewport-tester-vi...) so if you are able to find a way to do so, that could be a great option.
  - westurner 2y ago
    Hey thanks! https://github.com/bitcomplete/labs-delta-viewport-tester-viewports/blob/main/items.json https://github.com/bitcomplete/labs-delta-viewport-tester-vi... Use case: add which few of these to DevTools. IDK if there's a YAML parser in DevTools already, otherwise JSON + jq should work somehow awesome-chrome-devtools: https://github.com/paulirish/awesome-chrome-devtools https://github.com/paulirish/awesome-chrome-devtools
    - onassar 2y ago
      Thanks for sharing this @westurner