diff --git a/apps/eclipse/playwright.config.ts b/apps/eclipse/playwright.config.ts index ead78040d0..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 ? [ @@ -44,9 +46,18 @@ export default defineConfig({ }, /* Configure projects for major browsers */ + projects: [ { - name: "chromium", + name: "safari - mobile", + use: { ...devices["iPhone 15"] }, + }, + { + name: "safari - desktop", + use: { ...devices["Desktop Safari"] }, + }, + { + name: "chrome - desktop", use: { ...devices["Desktop Chrome"] }, }, ], @@ -56,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 d44097d6b2..30d69e665b 100644 --- a/apps/eclipse/tests/example.spec.ts +++ b/apps/eclipse/tests/example.spec.ts @@ -1,7 +1,97 @@ -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 MAX_PAGE_HEIGHT = 30000; // Set below the 32767px limit + +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 +}; + +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, { + waitUntil: "networkidle", + timeout: 60000, + }); + await disableComp(page); + + const pageHeight = await getPageHeight(page); + + if (pageHeight > MAX_PAGE_HEIGHT) { + console.warn( + `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 }); + } + } + }); +}