|
| 1 | +// End-to-end tests: builds the website (apps/website) and drives every live |
| 2 | +// example on the usage page and the playground in Chromium, with the CDN's |
| 3 | +// @ffmpeg/core swapped for this repository's build. |
| 4 | +// |
| 5 | +// npm run test:e2e build the site if needed, run everything |
| 6 | +// npm run test:e2e -- --rebuild rebuild the site first |
| 7 | +// npm run test:e2e -- --headed |
| 8 | +import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs"; |
| 9 | +import { execSync } from "node:child_process"; |
| 10 | +import { join } from "node:path"; |
| 11 | +import { chromium } from "playwright"; |
| 12 | +import { startServer, root } from "../lib/server.mjs"; |
| 13 | + |
| 14 | +const args = new Set(process.argv.slice(2)); |
| 15 | +const site = join(root, "apps/website/build"); |
| 16 | +if (!existsSync(site) || args.has("--rebuild")) { |
| 17 | + execSync("npm run build -w website", { cwd: root, stdio: "inherit" }); |
| 18 | +} |
| 19 | + |
| 20 | +const { server, url } = await startServer({ dir: site }); |
| 21 | +const browser = await chromium.launch({ headless: !args.has("--headed") }); |
| 22 | +const context = await browser.newContext(); |
| 23 | + |
| 24 | +// Keep the run hermetic: no ads or analytics. |
| 25 | +await context.route(/google|doubleclick|adtrafficquality/, (route) => route.abort()); |
| 26 | +// jsDelivr's @ffmpeg/core -> packages/core/dist. |
| 27 | +await context.route(/cdn\.jsdelivr\.net\/npm\/@ffmpeg\/core@[^/]+\/dist\/(.*)$/, (route) => { |
| 28 | + const file = route.request().url().match(/\/dist\/(.*)$/)[1]; |
| 29 | + route.fulfill({ path: join(root, "packages/core/dist", file), headers: { "Access-Control-Allow-Origin": "*" } }); |
| 30 | +}); |
| 31 | +// Sample media from the testdata repository, downloaded once into .cache. |
| 32 | +const cache = join(root, ".cache/testdata"); |
| 33 | +mkdirSync(cache, { recursive: true }); |
| 34 | +await context.route(/raw\.githubusercontent\.com\/ffmpegwasm\/testdata\/master\/(.*)$/, async (route) => { |
| 35 | + const file = join(cache, route.request().url().split("/").pop()); |
| 36 | + if (!existsSync(file)) { |
| 37 | + writeFileSync(file, Buffer.from(await (await fetch(route.request().url())).arrayBuffer())); |
| 38 | + } |
| 39 | + route.fulfill({ body: readFileSync(file), headers: { "Access-Control-Allow-Origin": "*" } }); |
| 40 | +}); |
| 41 | + |
| 42 | +let failures = 0; |
| 43 | +async function test(name, fn) { |
| 44 | + const page = await context.newPage(); |
| 45 | + const errors = []; |
| 46 | + page.on("pageerror", (e) => errors.push(e.message)); |
| 47 | + const start = Date.now(); |
| 48 | + try { |
| 49 | + await fn(page); |
| 50 | + if (errors.length) throw new Error(errors.join("\n")); |
| 51 | + console.log(`✓ ${name} (${((Date.now() - start) / 1000).toFixed(1)}s)`); |
| 52 | + } catch (e) { |
| 53 | + failures++; |
| 54 | + console.log(`✗ ${name}\n ${e.message.split("\n").join("\n ")}`); |
| 55 | + } |
| 56 | + await page.close(); |
| 57 | +} |
| 58 | + |
| 59 | +// Every live example: click "Load ffmpeg-core", then its action button, and |
| 60 | +// wait for the <video> it fills to load. |
| 61 | +const probe = await context.newPage(); |
| 62 | +await probe.goto(`${url}/docs/getting-started/usage`); |
| 63 | +const examples = await probe.$$eval('[class*="playgroundPreview"]', (previews) => |
| 64 | + previews.map((preview) => { |
| 65 | + let el = preview.closest('[class*="playgroundContainer"]'); |
| 66 | + while (el && el.tagName !== "H2") el = el.previousElementSibling; |
| 67 | + return el?.textContent.replace(/\u200b/g, "").trim() ?? "untitled"; |
| 68 | + }) |
| 69 | +); |
| 70 | +await probe.close(); |
| 71 | + |
| 72 | +await test("usage page has live examples", async () => { |
| 73 | + if (examples.length < 6) throw new Error(`found ${examples.length} live examples`); |
| 74 | +}); |
| 75 | + |
| 76 | +for (const [i, title] of examples.entries()) { |
| 77 | + await test(`usage: ${title}`, async (page) => { |
| 78 | + await page.goto(`${url}/docs/getting-started/usage`); |
| 79 | + const preview = page.locator('[class*="playgroundPreview"]').nth(i); |
| 80 | + await preview.scrollIntoViewIfNeeded(); |
| 81 | + const load = preview.getByRole("button", { name: /^Load ffmpeg-core/ }); |
| 82 | + await load.click(); |
| 83 | + await load.waitFor({ state: "detached", timeout: 60000 }); |
| 84 | + const started = Date.now(); |
| 85 | + await preview.getByRole("button").first().click(); |
| 86 | + const video = await preview.locator("video").elementHandle(); |
| 87 | + await page.waitForFunction((el) => el.src.startsWith("blob:"), video, { timeout: 180000 }); |
| 88 | + if (/timeout/i.test(title)) { |
| 89 | + // exec(..., 1000) stops early; the partial output isn't expected to play. |
| 90 | + if (Date.now() - started > 15000) throw new Error("the 1 s timeout took over 15 s"); |
| 91 | + return; |
| 92 | + } |
| 93 | + await page.waitForFunction((el) => el.readyState >= 1 && el.duration > 0, video, { timeout: 30000 }); |
| 94 | + }); |
| 95 | +} |
| 96 | + |
| 97 | +await test("playground: loads the core and runs the default command", async (page) => { |
| 98 | + await page.goto(`${url}/playground`); |
| 99 | + // The page also renders standalone copies of the file manager and editor |
| 100 | + // to explain them. |
| 101 | + const workspace = page.getByTestId("playground"); |
| 102 | + await workspace.getByRole("button", { name: "Load Sample Files" }).click({ timeout: 120000 }); |
| 103 | + await workspace.getByText("video.webm", { exact: true }).waitFor(); |
| 104 | + await workspace.getByRole("button", { name: "Run" }).click(); // ["-i", "video.webm", "video.mp4"] |
| 105 | + await workspace.getByText(/Time Elapsed/).waitFor({ timeout: 180000 }); |
| 106 | + await workspace.getByRole("button", { name: "fresh" }).click(); |
| 107 | + await workspace.getByText("video.mp4", { exact: true }).waitFor(); |
| 108 | +}); |
| 109 | + |
| 110 | +await browser.close(); |
| 111 | +server.close(); |
| 112 | +process.exit(failures ? 1 : 0); |
0 commit comments