Improve Select Element screenshots with visual context#175
Merged
neonwatty merged 3 commits intoMay 18, 2026
Merged
Conversation
|
🎉 This PR is included in version 1.36.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refs #172
What changed
Select Element screenshots now have an optional surrounding-context mode that can capture a nearby container and draw a border-only rounded highlight around the selected element. The default remains the original tight element crop, and teams opt into more context with
data-element-context-max-area.The review screen and docs now point people to that setting, and GitHub issues explain the highlight using the exact resolved color. The local check config also now recognizes the existing semantic-release workflow usage so the pre-PR check suite passes.
Why this shape (and not the obvious alternative)
The useful triage behavior is the larger contextual screenshot, but making that the default would change the existing Select Element behavior for every install and could make captures larger or slower. Keeping the default at the selected element, then letting teams expand context explicitly, preserves the current behavior while still supporting AI-assisted review workflows.
The highlight is a border using the widget accent color instead of an overlay. An overlay can obscure the actual element styling, which is exactly the detail the screenshot is meant to preserve.
This branch is built directly on current
mainand does not include the full CSS-path metadata work or the private fixture cleanup work from the other open PRs.Out of scope
This does not add a new selector metadata format. It only improves the visual evidence captured by Select Element screenshots.
Test plan
git diff --checkpassed.npm run format:checkpassed.make checkpassed. ESLint still reports the existing file-size warnings forsrc/widget/capture-flow.tsandsrc/widget/screenshot.ts; the critical audit gate passed with moderate-only audit output.NODE_OPTIONS=--no-experimental-webstorage make testpassed: 13 files, 236 tests. Plainmake testhit this machine's experimental NodelocalStoragebehavior before the rerun.make build-allpassed.CI=true make test-e2e-shard SHARD=1/2passed: 89 tests.CI=true make test-e2e-shard SHARD=2/2passed: 89 tests.NODE_OPTIONS=--no-experimental-webstorage npx vitest run test/api.test.tspassed after the final caption wording change.