From 9e7deab4798de5ba19c89b4483f40138512ad504 Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Wed, 25 Feb 2026 12:30:55 +0000 Subject: [PATCH 1/6] Update example file for eclipse --- apps/eclipse/tests/example.spec.ts | 82 ++++++++++++++++++++++++++++-- 1 file changed, 77 insertions(+), 5 deletions(-) diff --git a/apps/eclipse/tests/example.spec.ts b/apps/eclipse/tests/example.spec.ts index d44097d6b2..5225a54ce3 100644 --- a/apps/eclipse/tests/example.spec.ts +++ b/apps/eclipse/tests/example.spec.ts @@ -1,7 +1,79 @@ -import { test } from "@playwright/test"; import { argosScreenshot } from "@argos-ci/playwright"; +import { Page, test } from "@playwright/test"; -test("screenshot homepage", async ({ page }) => { - await page.goto("/"); - await argosScreenshot(page, "homepage"); -}); +const pages = [ + // Atoms + { name: "Action", path: "/atoms/action" }, + { name: "Avatar", path: "/atoms/avatar" }, + { name: "Badge", path: "/atoms/badge" }, + { name: "Button", path: "/atoms/button" }, + { name: "Checkbox", path: "/atoms/checkbox" }, + { name: "Field", path: "/atoms/field" }, + { name: "Input", path: "/atoms/input" }, + { name: "Label", path: "/atoms/label" }, + { name: "Radio Group", path: "/atoms/radio-group" }, + { name: "Separator", path: "/atoms/separator" }, + { name: "Slider", path: "/atoms/slider" }, + { name: "Spinner", path: "/atoms/spinner" }, + { name: "Tooltip", path: "/atoms/tooltip" }, + // Molecules + { name: "Accordion", path: "/molecules/accordion" }, + { name: "Banner", path: "/molecules/banner" }, + { name: "Breadcrumb", path: "/molecules/breadcrumb" }, + { name: "Card", path: "/molecules/card" }, + { name: "Codeblock", path: "/molecules/codeblock" }, + { name: "Dialog", path: "/molecules/dialog" }, + { name: "Dropdown Menu", path: "/molecules/dropdownmenu" }, + { name: "Files", path: "/molecules/files" }, + { name: "Inline TOC", path: "/molecules/inlinetoc" }, + { name: "Pagination", path: "/molecules/pagination" }, + { name: "Steps", path: "/molecules/steps" }, + { name: "Table", path: "/molecules/table" }, + { name: "Tabs", path: "/molecules/tabs" }, + { name: "Type Table", path: "/molecules/typetable" }, +]; + +const ignoreElements: String[] = []; + +const disableComp = async (page: Page) => { + if (ignoreElements.length) { + for (const iEl of ignoreElements) { + try { + await page.waitForSelector(`[data-testid="${iEl}"]`, { timeout: 3000 }); + + await page.$$eval(`[data-testid="${iEl}"]`, (els) => { + els.forEach((el) => { + el.style.setProperty("visibility", "hidden", "important"); + }); + }); + } catch { + console.warn(`[skip] ${iEl} not found`); + } + } + } + await page.evaluate(() => { + return new Promise((resolve) => + requestAnimationFrame(() => requestAnimationFrame(resolve)), + ); + }); + + await page.waitForTimeout(500); // Optional: allow animations to settle +}; + +for (const { name, path } of pages) { + test(`run Argos on ${name} (${path})`, async ({ page }) => { + await page.goto(path, { waitUntil: "domcontentloaded" }); + await disableComp(page); + + try { + // Try full page screenshot + await argosScreenshot(page, name, { fullPage: true }); + } catch (err) { + console.warn( + `Full page screenshot failed for ${name}, falling back to viewport only. Error:`, + err, + ); + await argosScreenshot(page, name, { fullPage: false }); + } + }); +} From f413552e7be9006874954a3c507e1b243563df63 Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Wed, 25 Feb 2026 12:48:59 +0000 Subject: [PATCH 2/6] Update argos reference --- apps/docs/playwright.config.ts | 2 ++ apps/eclipse/playwright.config.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/apps/docs/playwright.config.ts b/apps/docs/playwright.config.ts index d78a986d63..57435fdf0c 100644 --- a/apps/docs/playwright.config.ts +++ b/apps/docs/playwright.config.ts @@ -26,6 +26,8 @@ export default defineConfig({ // Upload to Argos on CI only. uploadToArgos: !!process.env.CI, token: process.env.ARGOS_TOKEN, + // Specify the reference branch for comparison + reference: process.env.ARGOS_REFERENCE || "main", }), ], ] diff --git a/apps/eclipse/playwright.config.ts b/apps/eclipse/playwright.config.ts index ead78040d0..c61af566c5 100644 --- a/apps/eclipse/playwright.config.ts +++ b/apps/eclipse/playwright.config.ts @@ -26,6 +26,8 @@ export default defineConfig({ // Upload to Argos on CI only. uploadToArgos: !!process.env.CI, token: process.env.ARGOS_TOKEN, + // Specify the reference branch for comparison + reference: process.env.ARGOS_REFERENCE || "main", }), ], ] From 3af392deea6c36911ae371eb86344e284a414baf Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Wed, 25 Feb 2026 12:50:51 +0000 Subject: [PATCH 3/6] Update eclipse --- apps/eclipse/playwright.config.ts | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/apps/eclipse/playwright.config.ts b/apps/eclipse/playwright.config.ts index c61af566c5..e7dd278c11 100644 --- a/apps/eclipse/playwright.config.ts +++ b/apps/eclipse/playwright.config.ts @@ -26,8 +26,6 @@ export default defineConfig({ // Upload to Argos on CI only. uploadToArgos: !!process.env.CI, token: process.env.ARGOS_TOKEN, - // Specify the reference branch for comparison - reference: process.env.ARGOS_REFERENCE || "main", }), ], ] @@ -46,9 +44,22 @@ export default defineConfig({ }, /* Configure projects for major browsers */ + projects: [ { - name: "chromium", + name: "chromium - mobile", + use: { ...devices["Pixel 3"] }, + }, + { + name: "safari - mobile", + use: { ...devices["iPhone 15"] }, + }, + { + name: "safari - desktop", + use: { ...devices["Desktop Safari"] }, + }, + { + name: "chrome - desktop", use: { ...devices["Desktop Chrome"] }, }, ], From 317f08b7c32b5d0817f63cabc6ad1aab4d12ffbc Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Wed, 25 Feb 2026 12:53:55 +0000 Subject: [PATCH 4/6] remove reference --- apps/docs/playwright.config.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/docs/playwright.config.ts b/apps/docs/playwright.config.ts index 57435fdf0c..d78a986d63 100644 --- a/apps/docs/playwright.config.ts +++ b/apps/docs/playwright.config.ts @@ -26,8 +26,6 @@ export default defineConfig({ // Upload to Argos on CI only. uploadToArgos: !!process.env.CI, token: process.env.ARGOS_TOKEN, - // Specify the reference branch for comparison - reference: process.env.ARGOS_REFERENCE || "main", }), ], ] From 0298c6a65b1154700d8fa9f1b445cb2b3d30670d Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Wed, 25 Feb 2026 13:20:13 +0000 Subject: [PATCH 5/6] Optimize argos run a little --- apps/eclipse/playwright.config.ts | 14 ++++++++------ apps/eclipse/tests/example.spec.ts | 5 ++++- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/apps/eclipse/playwright.config.ts b/apps/eclipse/playwright.config.ts index e7dd278c11..cbd2ece559 100644 --- a/apps/eclipse/playwright.config.ts +++ b/apps/eclipse/playwright.config.ts @@ -13,7 +13,9 @@ export default defineConfig({ /* Retry on CI only */ retries: process.env.CI ? 2 : 0, /* Opt out of parallel tests on CI. */ - workers: process.env.CI ? 1 : undefined, + workers: process.env.CI ? 2 : undefined, + /* Increase timeout for slower pages */ + timeout: 60 * 1000, // 60 seconds /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: process.env.ARGOS_TOKEN ? [ @@ -46,10 +48,6 @@ export default defineConfig({ /* Configure projects for major browsers */ projects: [ - { - name: "chromium - mobile", - use: { ...devices["Pixel 3"] }, - }, { name: "safari - mobile", use: { ...devices["iPhone 15"] }, @@ -69,6 +67,10 @@ export default defineConfig({ command: "pnpm run dev", url: "http://localhost:3002", reuseExistingServer: !process.env.CI, - timeout: 120 * 1000, // 2 minutes + timeout: 180 * 1000, // 3 minutes + }, + expect: { + /* Maximum time expect() should wait for the condition to be met. */ + timeout: 10 * 1000, // 10 seconds }, }); diff --git a/apps/eclipse/tests/example.spec.ts b/apps/eclipse/tests/example.spec.ts index 5225a54ce3..644252c81c 100644 --- a/apps/eclipse/tests/example.spec.ts +++ b/apps/eclipse/tests/example.spec.ts @@ -62,7 +62,10 @@ const disableComp = async (page: Page) => { for (const { name, path } of pages) { test(`run Argos on ${name} (${path})`, async ({ page }) => { - await page.goto(path, { waitUntil: "domcontentloaded" }); + await page.goto(path, { + waitUntil: "networkidle", + timeout: 60000, + }); await disableComp(page); try { From ef194b730930c17abfe053da95577c155812b6d6 Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Wed, 25 Feb 2026 16:20:39 +0000 Subject: [PATCH 6/6] testing out other solutions --- apps/eclipse/tests/example.spec.ts | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/apps/eclipse/tests/example.spec.ts b/apps/eclipse/tests/example.spec.ts index 644252c81c..30d69e665b 100644 --- a/apps/eclipse/tests/example.spec.ts +++ b/apps/eclipse/tests/example.spec.ts @@ -35,6 +35,8 @@ const pages = [ const ignoreElements: String[] = []; +const MAX_PAGE_HEIGHT = 30000; // Set below the 32767px limit + const disableComp = async (page: Page) => { if (ignoreElements.length) { for (const iEl of ignoreElements) { @@ -60,6 +62,10 @@ const disableComp = async (page: Page) => { await page.waitForTimeout(500); // Optional: allow animations to settle }; +const getPageHeight = async (page: Page): Promise => { + return await page.evaluate(() => document.body.scrollHeight); +}; + for (const { name, path } of pages) { test(`run Argos on ${name} (${path})`, async ({ page }) => { await page.goto(path, { @@ -68,15 +74,24 @@ for (const { name, path } of pages) { }); await disableComp(page); - try { - // Try full page screenshot - await argosScreenshot(page, name, { fullPage: true }); - } catch (err) { + const pageHeight = await getPageHeight(page); + + if (pageHeight > MAX_PAGE_HEIGHT) { console.warn( - `Full page screenshot failed for ${name}, falling back to viewport only. Error:`, - err, + `Page ${name} is too tall (${pageHeight}px), taking viewport screenshot only`, ); await argosScreenshot(page, name, { fullPage: false }); + } else { + try { + // Try full page screenshot + await argosScreenshot(page, name, { fullPage: true }); + } catch (err) { + console.warn( + `Full page screenshot failed for ${name}, falling back to viewport only. Error:`, + err, + ); + await argosScreenshot(page, name, { fullPage: false }); + } } }); }