From a8f6c556362962da57eb0e6d21f18ee2bf622a09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Thu, 23 Jul 2026 23:24:46 +0200 Subject: [PATCH] feat(playwright): warn when recommended Chromium launch options are missing Add a check in the Argos Playwright reporter that inspects the resolved config on `onBegin` and warns when a Chromium project is missing the recommended launch args (`--disable-lcd-text`, `--font-render-hinting=none`) used to stabilize font rendering. Also add these args to the package's own playwright.config.ts and update all docs links from `/docs/sdks-reference/` to `/docs/reference/`. Co-Authored-By: Claude Opus 4.8 (1M context) --- examples/storybook-test-runner/README.md | 2 +- examples/storybook-vitest/README.md | 2 +- examples/storybook-vitest/vite.config.js | 2 +- packages/cli/README.md | 4 +-- packages/cli/package.json | 2 +- packages/core/README.md | 4 +-- packages/core/package.json | 2 +- packages/cypress/README.md | 4 +-- packages/cypress/package.json | 2 +- packages/cypress/src/support.ts | 2 +- packages/playwright/README.md | 4 +-- packages/playwright/package.json | 2 +- packages/playwright/playwright.config.ts | 7 +++- packages/playwright/src/reporter.ts | 42 ++++++++++++++++++++++++ packages/playwright/src/screenshot.ts | 2 +- packages/puppeteer/README.md | 6 ++-- packages/puppeteer/package.json | 2 +- packages/puppeteer/src/index.ts | 2 +- packages/storybook/README.md | 4 +-- packages/storybook/package.json | 2 +- packages/storybook/src/test-runner.ts | 2 +- packages/vitest/README.md | 4 +-- packages/vitest/package.json | 2 +- packages/webdriverio/README.md | 6 ++-- packages/webdriverio/package.json | 2 +- 25 files changed, 81 insertions(+), 34 deletions(-) diff --git a/examples/storybook-test-runner/README.md b/examples/storybook-test-runner/README.md index b05704df..78d51f5a 100644 --- a/examples/storybook-test-runner/README.md +++ b/examples/storybook-test-runner/README.md @@ -24,6 +24,6 @@ Read [Argos documentations](https://argos-ci.com/docs) or explore [Storybook Tes ## Links - [Quickstart with Argos + Storybook Test Runner](https://argos-ci.com/docs/quickstart/storybook-quickstart/storybook-test-runner-quickstart) -- [Storybook SDK Reference](https://argos-ci.com/docs/sdks-reference/storybook) +- [Storybook SDK Reference](https://argos-ci.com/docs/reference/storybook) - [Official Argos Docs](https://argos-ci.com/docs) - [Discord](https://argos-ci.com/discord) diff --git a/examples/storybook-vitest/README.md b/examples/storybook-vitest/README.md index 8d38bf1f..a907805b 100644 --- a/examples/storybook-vitest/README.md +++ b/examples/storybook-vitest/README.md @@ -24,6 +24,6 @@ Read [Argos documentations](https://argos-ci.com/docs) or explore [Storybook Tes ## Links - [Quickstart with Argos + Storybook + Vitest](https://argos-ci.com/docs/quickstart/storybook-quickstart) -- [Storybook SDK Reference](https://argos-ci.com/docs/sdks-reference/storybook) +- [Storybook SDK Reference](https://argos-ci.com/docs/reference/storybook) - [Official Argos Docs](https://argos-ci.com/docs) - [Discord](https://argos-ci.com/discord) diff --git a/examples/storybook-vitest/vite.config.js b/examples/storybook-vitest/vite.config.js index b994ae7d..9ab50ae3 100644 --- a/examples/storybook-vitest/vite.config.js +++ b/examples/storybook-vitest/vite.config.js @@ -23,7 +23,7 @@ export default defineConfig({ }) // The plugin will capture screenshots of your stories and upload them to Argos. - // See options at: https://argos-ci.com/docs/sdks-reference/storybook + // See options at: https://argos-ci.com/docs/reference/storybook argosVitestPlugin({ // Upload to Argos on CI only. uploadToArgos: !!process.env.CI, diff --git a/packages/cli/README.md b/packages/cli/README.md index a9201b7e..5ceec6fb 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -17,7 +17,7 @@ Interact with and upload screenshots to [argos-ci.com](https://argos-ci.com) fro [![npm dm](https://img.shields.io/npm/dm/@argos-ci/cli.svg)](https://www.npmjs.com/package/@argos-ci/cli) [![npm dt](https://img.shields.io/npm/dt/@argos-ci/cli.svg)](https://www.npmjs.com/package/@argos-ci/cli) -Visit the [Argos CLI documentation](https://argos-ci.com/docs/sdks-reference/argos-command-line-interface-cli) for the full command reference and more. +Visit the [Argos CLI documentation](https://argos-ci.com/docs/reference/argos-command-line-interface-cli) for the full command reference and more. ## Installation @@ -41,5 +41,5 @@ npx @argos-ci/cli --help ## Links -- [Official CLI Docs](https://argos-ci.com/docs/sdks-reference/argos-command-line-interface-cli) +- [Official CLI Docs](https://argos-ci.com/docs/reference/argos-command-line-interface-cli) - [Discord](https://argos-ci.com/discord) diff --git a/packages/cli/package.json b/packages/cli/package.json index 83f0b057..7d7aab84 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -14,7 +14,7 @@ "url": "https://github.com/argos-ci/argos-javascript.git", "directory": "packages/core" }, - "homepage": "https://argos-ci.com/docs/sdks-reference/argos-command-line-interface-cli", + "homepage": "https://argos-ci.com/docs/reference/argos-command-line-interface-cli", "bugs": { "url": "https://github.com/argos-ci/argos-javascript/issues" }, diff --git a/packages/core/README.md b/packages/core/README.md index 0ec2adc0..67dc7343 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -17,7 +17,7 @@ Node.js SDK for visual testing with Argos. It powers the Argos CLI and the highe [![npm dm](https://img.shields.io/npm/dm/@argos-ci/core.svg)](https://www.npmjs.com/package/@argos-ci/core) [![npm dt](https://img.shields.io/npm/dt/@argos-ci/core.svg)](https://www.npmjs.com/package/@argos-ci/core) -Visit the [Node.js SDK documentation](https://argos-ci.com/docs/sdks-reference/node.js-sdk) for guides, the API reference, and more. +Visit the [Node.js SDK documentation](https://argos-ci.com/docs/reference/node.js-sdk) for guides, the API reference, and more. ## Installation @@ -46,6 +46,6 @@ console.log(`Build created: ${build.url}`); ## Links -- [Official SDK Docs](https://argos-ci.com/docs/sdks-reference/node.js-sdk) +- [Official SDK Docs](https://argos-ci.com/docs/reference/node.js-sdk) - [API Reference](https://js-sdk-reference.argos-ci.com) - [Discord](https://argos-ci.com/discord) diff --git a/packages/core/package.json b/packages/core/package.json index dedd0c7a..aa6ec581 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -18,7 +18,7 @@ "url": "https://github.com/argos-ci/argos-javascript.git", "directory": "packages/core" }, - "homepage": "https://argos-ci.com/docs/sdks-reference/node.js-sdk", + "homepage": "https://argos-ci.com/docs/reference/node.js-sdk", "bugs": { "url": "https://github.com/argos-ci/argos-javascript/issues" }, diff --git a/packages/cypress/README.md b/packages/cypress/README.md index ab819830..7eb8e25c 100644 --- a/packages/cypress/README.md +++ b/packages/cypress/README.md @@ -17,7 +17,7 @@ Capture stable Argos screenshots from your [Cypress](https://www.cypress.io/) tests. -Visit the [Cypress SDK documentation](https://argos-ci.com/docs/sdks-reference/cypress) for guides, the API reference, and more. +Visit the [Cypress SDK documentation](https://argos-ci.com/docs/reference/cypress) for guides, the API reference, and more. ## Installation @@ -69,6 +69,6 @@ describe("Homepage", () => { ## Links -- [Official SDK Docs](https://argos-ci.com/docs/sdks-reference/cypress) +- [Official SDK Docs](https://argos-ci.com/docs/reference/cypress) - [Quickstart](https://argos-ci.com/docs/quickstart/cypress-quickstart) - [Discord](https://argos-ci.com/discord) diff --git a/packages/cypress/package.json b/packages/cypress/package.json index 9e24af94..2c303b69 100644 --- a/packages/cypress/package.json +++ b/packages/cypress/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/argos-ci/argos-javascript.git", "directory": "packages/cypress" }, - "homepage": "https://argos-ci.com/docs/sdks-reference/cypress", + "homepage": "https://argos-ci.com/docs/reference/cypress", "bugs": { "url": "https://github.com/argos-ci/argos-javascript/issues" }, diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts index acc61691..20025861 100644 --- a/packages/cypress/src/support.ts +++ b/packages/cypress/src/support.ts @@ -57,7 +57,7 @@ declare global { /** * Stabilize the UI and takes a screenshot of the application under test. * - * @see https://argos-ci.com/docs/sdks-reference/cypress + * @see https://argos-ci.com/docs/reference/cypress * @example * cy.argosScreenshot("my-screenshot") * cy.get(".post").argosScreenshot() diff --git a/packages/playwright/README.md b/packages/playwright/README.md index cf1c18f3..82aa827b 100644 --- a/packages/playwright/README.md +++ b/packages/playwright/README.md @@ -17,7 +17,7 @@ Capture stable Argos screenshots from your [Playwright](https://playwright.dev/) tests, and report failure screenshots and traces to Argos. -Visit the [Playwright SDK documentation](https://argos-ci.com/docs/sdks-reference/playwright) for guides, the API reference, and more. +Visit the [Playwright SDK documentation](https://argos-ci.com/docs/reference/playwright) for guides, the API reference, and more. ## Installation @@ -65,6 +65,6 @@ test("screenshot homepage", async ({ page }) => { ## Links -- [Official SDK Docs](https://argos-ci.com/docs/sdks-reference/playwright) +- [Official SDK Docs](https://argos-ci.com/docs/reference/playwright) - [Quickstart](https://argos-ci.com/docs/quickstart/playwright-quickstart) - [Discord](https://argos-ci.com/discord) diff --git a/packages/playwright/package.json b/packages/playwright/package.json index 5612365a..32d8842d 100644 --- a/packages/playwright/package.json +++ b/packages/playwright/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/argos-ci/argos-javascript.git", "directory": "packages/playwright" }, - "homepage": "https://argos-ci.com/docs/sdks-reference/playwright", + "homepage": "https://argos-ci.com/docs/reference/playwright", "bugs": { "url": "https://github.com/argos-ci/argos-javascript/issues" }, diff --git a/packages/playwright/playwright.config.ts b/packages/playwright/playwright.config.ts index b31ce951..c4441e75 100644 --- a/packages/playwright/playwright.config.ts +++ b/packages/playwright/playwright.config.ts @@ -10,7 +10,12 @@ export default defineConfig({ projects: [ { name: "chromium", - use: { ...devices["Desktop Chrome"] }, + use: { + ...devices["Desktop Chrome"], + launchOptions: { + args: ["--disable-lcd-text", "--font-render-hinting=none"], + }, + }, }, ], reporter: [ diff --git a/packages/playwright/src/reporter.ts b/packages/playwright/src/reporter.ts index 488c4b3f..c215bfbb 100644 --- a/packages/playwright/src/reporter.ts +++ b/packages/playwright/src/reporter.ts @@ -76,6 +76,47 @@ function checkIsDynamicBuildName( return Boolean(typeof buildName === "object" && buildName); } +/** + * Chromium launch arguments recommended to stabilize font rendering + * and get consistent Argos screenshots. + */ +const RECOMMENDED_CHROMIUM_ARGS = [ + "--disable-lcd-text", + "--font-render-hinting=none", +]; + +/** + * Warn if the Playwright config is missing the recommended Chromium launch + * options used to stabilize screenshots. + */ +function checkLaunchOptions(config: FullConfig) { + for (const project of config.projects) { + // These flags only apply to Chromium. The browser defaults to Chromium + // when `browserName` is not set. + const browserName = project.use.browserName ?? "chromium"; + if (browserName !== "chromium") { + continue; + } + + const args = project.use.launchOptions?.args ?? []; + const missing = RECOMMENDED_CHROMIUM_ARGS.filter( + (arg) => !args.includes(arg), + ); + + if (missing.length > 0) { + const projectLabel = project.name || "default"; + console.warn( + chalk.yellow( + `⚠️ Argos: Playwright project "${projectLabel}" is missing recommended launchOptions args: ${missing.join( + ", ", + )}.\n` + + ` Add them to stabilize font rendering and get consistent screenshots. See https://argos-ci.com/docs/reference/playwright`, + ), + ); + } + } +} + export function createArgosReporterOptions( options: ArgosReporterOptions, ): ArgosReporterOptions { @@ -161,6 +202,7 @@ class ArgosReporter implements Reporter { onBegin(config: FullConfig) { debug("ArgosReporter:onBegin"); this.playwrightConfig = config; + checkLaunchOptions(config); } async onTestEnd(test: TestCase, result: TestResult) { diff --git a/packages/playwright/src/screenshot.ts b/packages/playwright/src/screenshot.ts index b5971855..2864c7b6 100644 --- a/packages/playwright/src/screenshot.ts +++ b/packages/playwright/src/screenshot.ts @@ -133,7 +133,7 @@ export type ArgosScreenshotOptions = { * * @example * argosScreenshot(page, "my-screenshot") - * @see https://argos-ci.com/docs/sdks-reference/playwright + * @see https://argos-ci.com/docs/reference/playwright */ export async function argosScreenshot( /** diff --git a/packages/puppeteer/README.md b/packages/puppeteer/README.md index c74ac67b..cf33e95a 100644 --- a/packages/puppeteer/README.md +++ b/packages/puppeteer/README.md @@ -17,11 +17,11 @@ Capture stable Argos screenshots from your [Puppeteer](https://github.com/puppeteer/puppeteer) tests. -Visit the [Puppeteer SDK documentation](https://argos-ci.com/docs/sdks-reference/puppeteer) for guides, the API reference, and more. +Visit the [Puppeteer SDK documentation](https://argos-ci.com/docs/reference/puppeteer) for guides, the API reference, and more. ## Installation -Install the SDK alongside the [Argos CLI](https://argos-ci.com/docs/sdks-reference/argos-command-line-interface-cli), which uploads the screenshots to Argos: +Install the SDK alongside the [Argos CLI](https://argos-ci.com/docs/reference/argos-command-line-interface-cli), which uploads the screenshots to Argos: ```sh npm install --save-dev @argos-ci/puppeteer @argos-ci/cli @@ -50,6 +50,6 @@ npx @argos-ci/cli upload ./screenshots ## Links -- [Official SDK Docs](https://argos-ci.com/docs/sdks-reference/puppeteer) +- [Official SDK Docs](https://argos-ci.com/docs/reference/puppeteer) - [Quickstart](https://argos-ci.com/docs/quickstart/puppeteer-quickstart) - [Discord](https://argos-ci.com/discord) diff --git a/packages/puppeteer/package.json b/packages/puppeteer/package.json index 5807be62..3af18310 100644 --- a/packages/puppeteer/package.json +++ b/packages/puppeteer/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/argos-ci/argos-javascript.git", "directory": "packages/puppeteer" }, - "homepage": "https://argos-ci.com/docs/sdks-reference/puppeteer", + "homepage": "https://argos-ci.com/docs/reference/puppeteer", "bugs": { "url": "https://github.com/argos-ci/argos-javascript/issues" }, diff --git a/packages/puppeteer/src/index.ts b/packages/puppeteer/src/index.ts index 844017c9..26a06281 100644 --- a/packages/puppeteer/src/index.ts +++ b/packages/puppeteer/src/index.ts @@ -231,7 +231,7 @@ ${reasons.map((reason) => `- ${reason}`).join("\n")} * * @example * argosScreenshot(page, "my-screenshot") - * @see https://argos-ci.com/docs/sdks-reference/puppeteer + * @see https://argos-ci.com/docs/reference/puppeteer */ export async function argosScreenshot( /** diff --git a/packages/storybook/README.md b/packages/storybook/README.md index cdb3cf0b..90ed4080 100644 --- a/packages/storybook/README.md +++ b/packages/storybook/README.md @@ -17,7 +17,7 @@ Capture and review visual changes of your [Storybook](https://storybook.js.org/) stories with Argos. It runs your stories in a real browser and uploads a screenshot of each one to Argos in your CI. -Visit the [Storybook SDK documentation](https://argos-ci.com/docs/sdks-reference/storybook) for guides, the API reference, and more. +Visit the [Storybook SDK documentation](https://argos-ci.com/docs/reference/storybook) for guides, the API reference, and more. ## Installation @@ -61,6 +61,6 @@ export const Example: Story = { ## Links -- [Official SDK Docs](https://argos-ci.com/docs/sdks-reference/storybook) +- [Official SDK Docs](https://argos-ci.com/docs/reference/storybook) - [Quickstart](https://argos-ci.com/docs/quickstart/storybook-quickstart) - [Discord](https://argos-ci.com/discord) diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 051a57bc..003e2178 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/argos-ci/argos-javascript.git", "directory": "packages/storybook" }, - "homepage": "https://argos-ci.com/docs/sdks-reference/storybook", + "homepage": "https://argos-ci.com/docs/reference/storybook", "keywords": [ "storybook", "storybook-addon", diff --git a/packages/storybook/src/test-runner.ts b/packages/storybook/src/test-runner.ts index 34cc6ebc..3055aee5 100644 --- a/packages/storybook/src/test-runner.ts +++ b/packages/storybook/src/test-runner.ts @@ -20,7 +20,7 @@ const DEFAULT_PLAYWRIGHT_VIEWPORT_SIZE = { width: 1280, height: 720 }; * Stabilize the UI and takes a screenshot of the application under test. * * @example argosScreenshot(page, context, options) - * @see https://argos-ci.com/docs/sdks-reference/playwright + * @see https://argos-ci.com/docs/reference/playwright */ export async function argosScreenshot( /** diff --git a/packages/vitest/README.md b/packages/vitest/README.md index a7abb34f..2211ec1b 100644 --- a/packages/vitest/README.md +++ b/packages/vitest/README.md @@ -17,7 +17,7 @@ Capture Argos screenshots directly from your [Vitest browser tests](https://vitest.dev/guide/browser/). -Visit the [Vitest SDK documentation](https://argos-ci.com/docs/sdks-reference/vitest) for guides, API and more. +Visit the [Vitest SDK documentation](https://argos-ci.com/docs/reference/vitest) for guides, API and more. ## Installation @@ -140,6 +140,6 @@ when `uploadToArgos` is enabled. ## Links -- [Official SDK Docs](https://argos-ci.com/docs/sdks-reference/vitest) +- [Official SDK Docs](https://argos-ci.com/docs/reference/vitest) - [Quickstart](https://argos-ci.com/docs/quickstart/vitest-quickstart) - [Discord](https://argos-ci.com/discord) diff --git a/packages/vitest/package.json b/packages/vitest/package.json index 8c0164cd..cf32b6cc 100644 --- a/packages/vitest/package.json +++ b/packages/vitest/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/argos-ci/argos-javascript.git", "directory": "packages/vitest" }, - "homepage": "https://argos-ci.com/docs/sdks-reference/vitest", + "homepage": "https://argos-ci.com/docs/reference/vitest", "bugs": { "url": "https://github.com/argos-ci/argos-javascript/issues" }, diff --git a/packages/webdriverio/README.md b/packages/webdriverio/README.md index 0a068075..580a6990 100644 --- a/packages/webdriverio/README.md +++ b/packages/webdriverio/README.md @@ -17,11 +17,11 @@ Capture stable Argos screenshots from your [WebdriverIO](https://webdriver.io) tests. -Visit the [WebdriverIO SDK documentation](https://argos-ci.com/docs/sdks-reference/webdriverio) for guides, the API reference, and more. +Visit the [WebdriverIO SDK documentation](https://argos-ci.com/docs/reference/webdriverio) for guides, the API reference, and more. ## Installation -Install the SDK alongside the [Argos CLI](https://argos-ci.com/docs/sdks-reference/argos-command-line-interface-cli), which uploads the screenshots to Argos: +Install the SDK alongside the [Argos CLI](https://argos-ci.com/docs/reference/argos-command-line-interface-cli), which uploads the screenshots to Argos: ```sh npm install --save-dev @argos-ci/webdriverio @argos-ci/cli @@ -50,6 +50,6 @@ npx @argos-ci/cli upload ./screenshots ## Links -- [Official SDK Docs](https://argos-ci.com/docs/sdks-reference/webdriverio) +- [Official SDK Docs](https://argos-ci.com/docs/reference/webdriverio) - [Quickstart](https://argos-ci.com/docs/quickstart/webdriverio-quickstart) - [Discord](https://argos-ci.com/discord) diff --git a/packages/webdriverio/package.json b/packages/webdriverio/package.json index 34b0aa39..24ba7204 100644 --- a/packages/webdriverio/package.json +++ b/packages/webdriverio/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/argos-ci/argos-javascript.git", "directory": "packages/webdriverio" }, - "homepage": "https://argos-ci.com/docs/sdks-reference/webdriverio", + "homepage": "https://argos-ci.com/docs/reference/webdriverio", "bugs": { "url": "https://github.com/argos-ci/argos-javascript/issues" },