Skip to content

feat: add responsive snapshot capture, cookie capture, and cross-origin iframe support#25

Merged
bhokaremoin merged 19 commits intomainfrom
PPLT-4952-responsive-snapshot-capture-and-cors-iframe
Mar 13, 2026
Merged

feat: add responsive snapshot capture, cookie capture, and cross-origin iframe support#25
bhokaremoin merged 19 commits intomainfrom
PPLT-4952-responsive-snapshot-capture-and-cors-iframe

Conversation

@bhokaremoin
Copy link
Copy Markdown
Contributor

@bhokaremoin bhokaremoin commented Mar 9, 2026

Summary

This PR introduces three new snapshot capture features to the Percy Playwright Java SDK:

  1. Responsive Snapshot Capture — Automatically captures DOM snapshots at multiple viewport widths in a single snapshot() call.
  2. Cookie Capture — Attaches all page cookies to every snapshot payload so the CLI can use them during asset discovery.
  3. Cross-Origin (CORS) Iframe Capture — Detects cross-origin iframes on the page, serializes their DOM independently, and stitches them into the snapshot via data-percy-element-id.

Feature Details

1. Responsive Snapshot Capture

  • snapshot() now checks isCaptureResponsiveDOM() to decide between a single capture and a multi-width responsive capture.
  • Responsive capture is enabled via:
    • SDK option: options.put("responsiveSnapshotCapture", true)
    • CLI config: snapshot.responsiveSnapshotCapture: true
    • Disabled when percy.deferUploads: true (not compatible with deferred uploads)
  • Viewport widths/heights are fetched from the new Percy CLI endpoint GET /percy/widths-config.
  • For each width: resizes viewport → waits for window.resizeCount (via PercyDOM.waitForResize()) → optionally reloads → optionally sleeps → captures DOM.
  • Original viewport is restored after all widths are captured.

New environment variables:

Variable Description
RESPONSIVE_CAPTURE_SLEEP_TIME Sleep in seconds between each width capture
PERCY_RESPONSIVE_CAPTURE_RELOAD_PAGE Reload page between captures (true/false)
PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT Adjust height for browser chrome via outerHeight - innerHeight + minH

2. Cookie Capture

  • Before each DOM serialization, page.context().cookies() is collected (with graceful fallback on failure).
  • Cookies are serialized as plain maps (name, value, domain, path, expires, httpOnly, secure, sameSite) and attached as cookies in the snapshot payload.

3. Cross-Origin (CORS) Iframe Capture

  • getSerializedDOM() filters page.frames() to find frames whose host differs from the main page host.
  • For each cross-origin frame: injects the Percy DOM script → calls PercyDOM.serialize({enableJavaScript: true}) → retrieves the matching data-percy-element-id from the main page DOM.
  • Processed frames are attached as corsIframes in the snapshot payload.
  • A new test fixture cors-iframe.html embeds https://todomvc.com/examples/react/dist/ to provide a real cross-origin frame for integration testing.

Other Changes

  • HTTP timeout: request() now uses a 600-second socket/connect timeout (was none), preventing long snapshot posts from hanging indefinitely.
  • CLI config caching: The healthcheck response now stores the CLI's config object, used to drive responsive capture and deferUploads behavior without restarting.
  • Structured logging: log() now POSTs {message, level} JSON to the Percy CLI /percy/log endpoint in addition to printing to stdout. Debug-level messages are suppressed from stdout unless PERCY_LOGLEVEL=debug.
  • Percy CLI: Bumped @percy/cli to ^1.31.10-alpha.0 to pick up the widths-config and /percy/log endpoints.

Tests

  • Unit tests for isCaptureResponsiveDOM — SDK option, CLI config, and deferUploads override.
  • Unit tests for cookie serialization — populated and empty cookie list.
  • Unit tests for CORS iframe detection — cross-origin frame captured, same-origin frame skipped.
  • Integration tests for responsive snapshot capture and CORS iframe snapshot.

…e support

- Add responsive snapshot capture with CLI widths-config integration
- Add cross-origin iframe processing via processFrame() and getSerializedDOM()
- Add cookie capture using page.context().cookies()
- Parse cliConfig from healthcheck for responsive capture detection
- Add HTTP status checks with clear error messages for failed requests
- Update logging to always show responsive capture errors
- Add 600s timeout for snapshot requests, 30s for widths-config
- Support PERCY_RESPONSIVE_CAPTURE_RELOAD_PAGE and RESPONSIVE_CAPTURE_SLEEP_TIME env vars
@bhokaremoin bhokaremoin changed the title feat: add responsive snapshot capture, cross-origin iframe, and cooki… feat: add responsive snapshot capture, cookie capture, and cross-origin iframe support Mar 9, 2026
@bhokaremoin bhokaremoin marked this pull request as ready for review March 9, 2026 19:56
@bhokaremoin bhokaremoin requested a review from a team as a code owner March 9, 2026 19:56
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds new snapshot-capture capabilities to the Percy Playwright Java SDK (responsive multi-viewport capture, cookie attachment, and cross-origin iframe stitching) along with CLI-driven configuration and improved logging/timeout behavior.

Changes:

  • Implement responsive snapshot capture driven by CLI /percy/widths-config, with viewport resizing/reload/sleep support.
  • Attach cookies and captured cross-origin iframe snapshots into the DOM snapshot payload.
  • Add structured CLI logging, request timeouts, and tests/fixtures for the new behaviors.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.

File Description
src/main/java/io/percy/playwright/Percy.java Core implementation for responsive capture, cookie capture, CORS iframe capture, CLI config caching, structured logging, and HTTP timeouts
src/test/java/io/percy/playwright/SDKTest.java Adds unit/integration tests for responsive capture, cookies, and CORS iframes
src/test/resources/testapp/cors-iframe.html New fixture page embedding a cross-origin iframe
package.json Updates Percy CLI devDependency to an alpha version range

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/main/java/io/percy/playwright/Percy.java Outdated
Comment thread src/main/java/io/percy/playwright/Percy.java Outdated
Comment thread src/main/java/io/percy/playwright/Percy.java Outdated
Comment thread src/main/java/io/percy/playwright/Percy.java Outdated
Comment thread src/test/java/io/percy/playwright/SDKTest.java
Comment thread src/test/java/io/percy/playwright/SDKTest.java Outdated
Comment thread package.json
Comment thread src/main/java/io/percy/playwright/Percy.java Outdated
bhokaremoin and others added 4 commits March 10, 2026 11:45
Refactoring Log Request Body construction

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
error handling for cors iframe url check

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/main/java/io/percy/playwright/Percy.java
Comment thread src/main/java/io/percy/playwright/Percy.java Outdated
Comment thread src/main/java/io/percy/playwright/Percy.java
Comment thread src/main/java/io/percy/playwright/Percy.java
Comment thread src/main/java/io/percy/playwright/Percy.java
Comment thread src/test/resources/testapp/responsive-capture.html
Comment thread src/main/java/io/percy/playwright/Percy.java Outdated
bhokaremoin and others added 3 commits March 10, 2026 14:32
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/main/java/io/percy/playwright/Percy.java
Comment thread package.json
Comment thread src/test/java/io/percy/playwright/SDKTest.java Outdated
Comment thread src/main/java/io/percy/playwright/Percy.java Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/main/java/io/percy/playwright/Percy.java
Comment thread src/main/java/io/percy/playwright/Percy.java Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/main/java/io/percy/playwright/Percy.java
Comment thread src/main/java/io/percy/playwright/Percy.java Outdated
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/main/java/io/percy/playwright/Percy.java
Comment thread src/main/java/io/percy/playwright/Percy.java
Comment thread src/test/java/io/percy/playwright/SDKTest.java Outdated
@bhokaremoin bhokaremoin added the enhancement New feature or request label Mar 12, 2026
@bhokaremoin bhokaremoin merged commit 0baa73c into main Mar 13, 2026
11 checks passed
@bhokaremoin bhokaremoin deleted the PPLT-4952-responsive-snapshot-capture-and-cors-iframe branch March 13, 2026 05:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants