Skip to content

fix: use Playwright's bundled FFmpeg when system ffmpeg not on PATH#3

Merged
DeDuckProject merged 4 commits intomainfrom
fix/ffmpeg-playwright-bundled
Mar 11, 2026
Merged

fix: use Playwright's bundled FFmpeg when system ffmpeg not on PATH#3
DeDuckProject merged 4 commits intomainfrom
fix/ffmpeg-playwright-bundled

Conversation

@DeDuckProject
Copy link
Copy Markdown
Owner

In CI (GitHub Actions), playwright install chromium --with-deps downloads its own FFmpeg binary to the ms-playwright cache directory, but it is not added to the system PATH. The bare ffmpeg command in post-processor.ts therefore fails, causing the pipeline to fall back to screenshots instead of producing a GIF.

resolveFfmpegPath() now tries system ffmpeg first, then scans the Playwright cache directory (~/.cache/ms-playwright on Linux, etc.) for the bundled binary. Works on Linux, macOS, and Windows without any changes to the CI workflow.

In CI (GitHub Actions), `playwright install chromium --with-deps`
downloads its own FFmpeg binary to the ms-playwright cache directory,
but it is not added to the system PATH. The bare `ffmpeg` command in
post-processor.ts therefore fails, causing the pipeline to fall back
to screenshots instead of producing a GIF.

`resolveFfmpegPath()` now tries system ffmpeg first, then scans the
Playwright cache directory (~/.cache/ms-playwright on Linux, etc.)
for the bundled binary. Works on Linux, macOS, and Windows without
any changes to the CI workflow.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 11, 2026

🎬 UI Demo Preview

Changes detected in: .github/workflows/ci.yml, .github/workflows/demo.yml, examples/simple-app/server.js, packages/action/dist/index.js, packages/action/dist/index.js.map (+2 more)

What changed: The product page UI has been enhanced with a 'Best Seller' badge, a formatted price display ($129.99), an updated cart counter showing 'X in cart', and a new Wishlist button that toggles to '♥ Wishlisted' and shows a confirmation message when clicked.

Demo

Demo script (auto-generated)
import type { Page } from '@playwright/test';

export async function demo(page: Page): Promise<void> {
  await page.goto('http://localhost:3000');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1500);

  // Highlight the 'Best Seller' badge
  const badge = page.locator('.badge');
  await badge.scrollIntoViewIfNeeded();
  await page.waitForTimeout(1500);

  // Highlight the price
  const price = page.locator('.price');
  await price.scrollIntoViewIfNeeded();
  await page.waitForTimeout(1500);

  // Click 'Add to Cart' first time
  await page.getByRole('button', { name: 'Add to Cart' }).click();
  await page.waitForTimeout(1000);

  // Click 'Add to Cart' second time
  await page.getByRole('button', { name: 'Add to Cart' }).click();
  await page.waitForTimeout(1500);

  // Show the counter now reads '2 in cart'
  const counter = page.locator('#counter');
  await counter.scrollIntoViewIfNeeded();
  await page.waitForTimeout(1500);

  // Click the Wishlist button
  await page.getByRole('button', { name: '♡ Wishlist' }).click();
  await page.waitForTimeout(1500);

  // Show the 'Added to wishlist!' confirmation message
  const wishlistMsg = page.locator('#wishlist-msg');
  await wishlistMsg.scrollIntoViewIfNeeded();
  await page.waitForTimeout(2000);
}

Generated by git-glimpse

DeDuckProject and others added 3 commits March 11, 2026 21:37
Playwright's bundled FFmpeg is compiled with --disable-everything and
only supports WebM encoding for recording — it lacks the fps, palettegen,
and paletteuse filters required for GIF conversion. Install system ffmpeg
via apt-get in the demo workflow to fix post-processing.

Also add meaningful UI changes to the example app (price display, wishlist
button, best-seller badge) so the diff analyzer detects UI changes and
the pipeline runs end-to-end instead of short-circuiting.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Recordings were uploaded via uploadArtifact() which produces a zip
download link that cannot be rendered inline in GitHub markdown.
Switch to uploadToGitHubAssets() (already used for screenshots) which
returns a direct browser_download_url that GitHub renders as an inline
image via ![Demo](url).

Also removes the unused @actions/artifact dependency from the bundle,
shrinking the action dist from 5.0MB to 2.1MB.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@DeDuckProject DeDuckProject merged commit a35d57d into main Mar 11, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant