feat: playwright recorder for example-app walkthroughs#108
Merged
Conversation
Adds scripts/walkthroughs/record.mjs to record narrated walkthrough videos and preview images for dashnote, dashnote-starter, and dashmint-lab, with caption copy in scripts/walkthroughs/captions/. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The recorder previously printed nothing between browser launch and final output, making long runs (especially dashmint-lab) look hung. Add a timestamped logStep helper and emit it at each major phase: browser launch, navigation, key waits, login, and tab switches. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… wait Press Ctrl+C (SIGINT) or SIGTERM during recording to finalize the partial video. The shutdown path now tolerates already-closed browsers and prefers video.saveAs over manual copy. Caption restyled as a dark glass card pinned upper-right so it reads on dark UIs without covering the heading and tabs on the left. Wait for any card article rather than a specific card name so the recorder doesn't depend on contract contents. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reorder the dashmint-lab walkthrough so tab navigation (All / Marketplace / Sort) and the Buy hover demo run before login. After signing in, walk through the Yours tab and animate the owned-card overflow menu (Transfer, Copy ID, View on Explorer, Burn). Center the caption within the content area to the right of the 208px sidebar so the heading and account balance stay visible. Theme the caption with an amber accent that matches the app. Extract dashmint-lab caption copy into scripts/walkthroughs/captions/dashmint-lab.json so it can be edited without touching the recorder. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Caption files are now the sole source of caption strings. The recorder errors out when the captions JSON is missing or a referenced key is absent, and the dashnote-starter captions file ships alongside the existing ones. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add a runDashrate driver covering public aggregate browsing, identity-owned review create/edit, and review history, with caption copy in captions/dashrate.json and a walkthrough:dashrate npm script. Add scrollToLocator, scrollToFirstLocator, and scrollToTop driver helpers, a configurable per-app viewport (dashrate records at 1440x1000), and pointer-events: none on the caption overlay so it does not intercept clicks. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The dashmint-lab walkthrough now performs one real card mint so the token-paid create flow is visible, then visits the Tokens tab to show the signed-in identity's DashMint balance and transfer form. Captions are updated to narrate the mint and Tokens steps; the browse-only (--no-login) recording is unchanged. The recorder still avoids token transfers, purchases, burns, and contract registration. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Every app now outputs to a per-app directory under the repo-root walkthrough/ tree instead of beside each app, and TokenOps drops its flat-output special case.
|
Warning Review limit reached
Next review available in: 48 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds a Playwright CLI that records captioned walkthrough videos for five applications, supporting authentication options, browser configuration, conditional UI flows, previews, and persisted video artifacts. ChangesWalkthrough recording
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant NpmScripts
participant RecordCLI
participant Playwright
participant TargetApp
participant WalkthroughOutput
NpmScripts->>RecordCLI: invoke app walkthrough command
RecordCLI->>TargetApp: open configured URL
RecordCLI->>Playwright: launch Chromium and enable video recording
Playwright->>TargetApp: execute application walkthrough
RecordCLI->>Playwright: capture preview and finalize video
Playwright->>WalkthroughOutput: save WebM and PNG artifacts
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Collaborator
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@scripts/walkthroughs/README.md`:
- Around line 8-13: Add the missing TokenOps walkthrough documentation to the
command list by including the walkthrough:token-ops command and its
token-ops.json caption manifest alongside the existing walkthrough entries in
scripts/walkthroughs/README.md.
In `@scripts/walkthroughs/record.mjs`:
- Around line 1342-1350: Update the cleanup logic in the walkthrough recording
flow to remove tmpVideoDir after the temporary video has been processed,
including when processing fails if cleanup is handled in a finally path. Reuse
the existing tmpVideoDir symbol and ensure its contents are deleted without
affecting targetWebm or targetPreview.
- Around line 1393-1404: Update the video persistence handling around
video.saveAs and its copy fallback so a failure of both operations is retained
rather than only logged. Preserve the original persistence error or combined
failure, allow the surrounding recording cleanup to complete, then rethrow it so
the command does not report success without the video artifact.
- Around line 608-677: Default authenticated walkthroughs must preserve the
documented no-write contract: in scripts/walkthroughs/record.mjs lines 608-677,
guard the Dashnote create/update/delete flow behind explicit write consent or
stop before it; apply the same consent guard or early stop to the DashRate
review save flow at lines 1115-1148; update scripts/walkthroughs/README.md lines
35-39 to accurately describe the no-write behavior or document the opt-in write
mode.
- Around line 95-97: Update the --env-file handling in the argument parser to
validate that argv[++i] exists before passing it to path.resolve. Preserve the
intended “--env-file requires a value” error for missing values, then resolve
and assign the validated value to args.envFile.
- Around line 924-931: Update the Login handling around loginButtons to use the
checked locator helper, and guard both the absent-button and null-boundingBox
cases before accessing coordinates. Preserve the no-login recording flow by
skipping the cursor click when no visible Login button is available.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 85d207d3-8289-4ade-a956-24c4e1e84ab8
⛔ Files ignored due to path filters (2)
walkthrough/dashnote/dashnote-preview.pngis excluded by!**/*.pngwalkthrough/dashnote/dashnote-walkthrough.webmis excluded by!**/*.webm
📒 Files selected for processing (8)
package.jsonscripts/walkthroughs/README.mdscripts/walkthroughs/captions/dashmint-lab.jsonscripts/walkthroughs/captions/dashnote-starter.jsonscripts/walkthroughs/captions/dashnote.jsonscripts/walkthroughs/captions/dashrate.jsonscripts/walkthroughs/captions/token-ops.jsonscripts/walkthroughs/record.mjs
Validate --env-file before resolving so a missing value raises the intended CLI error instead of silently resolving to cwd. Use the guarded clickLastLocator helper for the read-only Login path so an absent or hidden button no longer crashes the recording. Fail the run when the video cannot be persisted rather than reporting success with a missing artifact, and remove the temporary video directory during cleanup. Add the token-ops walkthrough command and caption manifest to the README. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
Summary
Adds a Playwright-based walkthrough recorder that produces narrated
.webmscreencasts and a preview.pngfor example apps. The recorder drives the live app with an on-screen cursor and caption overlay, optionally signing in with a testnet mnemonic to show full read/write flows.What's included
scripts/walkthroughs/record.mjs— the recorder. Onerun<App>flow per app, a shared cursor/caption driver, graceful SIGINT/SIGTERM handling that still finalizes a partial video, and progress logging.scripts/walkthroughs/captions/*.json— overlay copy per app, kept as plain JSON so wording can change without touching recorder code (caption files are required — no inline fallback).package.json—walkthrough:<app>npm scripts for each app.scripts/walkthroughs/README.md— usage, env vars, and output layout.dashnoterecording + preview underwalkthrough/dashnote/.Credentials & safety
The recorder loads
.env.walkthroughwhen present and accepts a mnemonic viaWALKTHROUGH_MNEMONIC/PLATFORM_MNEMONIC(and fallbacks). Sign-in uses.fill()into masked fields (nativepasswordinputs orcolor: transparent), so the mnemonic never renders on screen. Without credentials, apps record in read-only mode via--no-login. All identifiers shown are public testnet data.Summary by CodeRabbit
New Features
Documentation