@letsrunit/playwright 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@letsrunit/playwright",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Playwright extensions and utilities for letsrunit",
   "keywords": [
     "testing",
@@ -38,13 +38,11 @@
   ],
   "scripts": {
     "build": "../../node_modules/.bin/tsup",
-    "test": "vitest run",
-    "test:cov": "vitest run --coverage",
     "typecheck": "tsc --noEmit"
   },
   "packageManager": "yarn@4.10.3",
   "dependencies": {
-    "@letsrunit/utils": "0.7.0",
+    "@letsrunit/utils": "0.8.0",
     "@playwright/test": "^1.57.0",
     "case": "^1.6.3",
     "diff": "^8.0.3",
@@ -62,8 +60,7 @@
     "unified": "^11.0.5"
   },
   "devDependencies": {
-    "@types/jsdom": "^27.0.0",
-    "vitest": "^4.0.17"
+    "@types/jsdom": "^27.0.0"
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/browser.ts

@@ -11,7 +11,8 @@ export async function browse(browser: Browser, options: BrowserContextOptions =
   });
 
   // Safety net against bundler-injected helpers inside page.evaluate
-  await context.addInitScript(() => {
+  // v8 ignore next — callback runs in browser context, not Node
+  await context.addInitScript(/* v8 ignore next */ () => {
     // define __name as a no-op if present
     (window as any).__name = (window as any).__name || ((fn: any) => fn);
   });

package/src/field/aria-select.ts

@@ -3,13 +3,13 @@ import type { Loc, SetOptions, Value } from './types';
 export async function selectAria({ el }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
   if (typeof value !== 'string' && typeof value !== 'number') return false;
 
-  const role = await el.getAttribute('role', options).catch(() => null);
+  const role = await el.getAttribute('role', options).catch(/* v8 ignore next */ () => null);
   if (role !== 'combobox') return false;
 
-  const ariaControls = await el.getAttribute('aria-controls', options).catch(() => null);
+  const ariaControls = await el.getAttribute('aria-controls', options).catch(/* v8 ignore next */ () => null);
   if (!ariaControls) return false;
 
-  const ariaExpanded = await el.getAttribute('aria-expanded', options).catch(() => null);
+  const ariaExpanded = await el.getAttribute('aria-expanded', options).catch(/* v8 ignore next */ () => null);
   if (ariaExpanded !== 'true') await el.click(options);
 
   const stringValue = String(value);

package/src/field/calendar.ts

@@ -52,9 +52,11 @@ export async function getCalendar(
     (await root.locator(gridSelector).count()) > 0 ? root : await getDialog(root, options);
 
   // Fallback: Check if the root itself is a valid grid (e.g. inline MUI DateCalendar)
+  /* v8 ignore start */
   if (!container && (await isCalendarGrid(root))) {
     return { calendar: root, tables: [root] };
   }
+  /* v8 ignore stop */
   if (!container) return null;
 
   // 2. Find all valid calendar grids within the container
@@ -63,9 +65,8 @@ export async function getCalendar(
   const tables: Locator[] = [];
 
   // If the container itself matches the selector, check it first
-  if (await isCalendarGrid(container)) {
-    tables.push(container);
-  }
+  /* v8 ignore next */
+  if (await isCalendarGrid(container)) tables.push(container);
 
   for (const grid of found) {
     if (await isCalendarGrid(grid)) {
@@ -98,11 +99,7 @@ function inferYearForMonth(target: Date, month: number): number {
 }
 
 export async function getCurrentMonthsAndYears(root: Locator, target: Date): Promise<MonthYear[]> {
-  const lang = await root
-    .page()
-    .locator('html')
-    .getAttribute('lang')
-    .catch(() => undefined);
+  const lang = await root.page().locator('html').getAttribute('lang').catch(() => undefined);
   const locales = lang && !lang.startsWith('en') ? [lang, 'en-US'] : ['en-US'];
 
   const text = await root.innerText();
@@ -187,12 +184,14 @@ async function navigateToMonth(
   const afterMonths = await getCurrentMonthsAndYears(root, target);
   if (afterMonths.some((m) => m.year * 12 + m.month === targetTotal)) return true;
 
+  /* v8 ignore start */
   if ((options?.retry ?? 0) < 3) {
     const retry = (options?.retry ?? 0) + 1;
     return await navigateToMonth(root, target, { ...options, wait: 50 + 50 * retry, retry }); // Retry max 3x
   }
 
   return false;
+  /* v8 ignore stop */
 }
 
 async function setDayByAriaLabel(table: Locator, value: Date, options?: SetOptions): Promise<boolean> {
@@ -210,10 +209,12 @@ async function setDayByAriaLabel(table: Locator, value: Date, options?: SetOptio
 
   if (cells.length === 0) return false;
 
+  /* v8 ignore start */
   if (cells.length === 1) {
     await cells[0].click(options);
     return true;
   }
+  /* v8 ignore stop */
 
   // Disambiguate using day 22 in case of dd/mm/yyyy vs mm/dd/yyyy
   const probeDate = new Date(value.getFullYear(), value.getMonth(), 22);

package/src/field/date-group.ts

@@ -25,7 +25,7 @@ async function getCandidateLocs(el: Locator, options?: SetOptions): Promise<Cand
 
   return Promise.all(
     candidates.map(async (c) => {
-      const info = await c.evaluate((node) => {
+      const info = await c.evaluate(/* v8 ignore start */ (node) => {
         const e = node as HTMLInputElement | HTMLSelectElement;
         const attrs: Record<string, string> = {};
         for (const attr of e.attributes) {
@@ -52,7 +52,7 @@ async function getCandidateLocs(el: Locator, options?: SetOptions): Promise<Cand
           inputMode: e.getAttribute('inputmode'),
           attrs,
           options,
-        };
+        }; /* v8 ignore stop */
       }, options);
       return { el: c, ...info };
     }),
@@ -100,53 +100,53 @@ async function behavioralProbe(candidateLocs: CandidateInfo[], scores: Score[],
     for (let i = 0; i < candidateLocs.length; i++) {
       const loc = candidateLocs[i];
       if (loc.tag === 'input') {
-        const can_be_day = await loc.el.evaluate((node) => {
+        const can_be_day = await loc.el.evaluate(/* v8 ignore start */ (node) => {
           const e = node as HTMLInputElement;
           const old = e.value;
           e.value = '31';
           const valid = e.checkValidity();
           e.value = old;
-          return valid;
+          return valid; /* v8 ignore stop */
         }, options);
         if (can_be_day) scores[i].day += 1;
 
-        const cannot_be_day = await loc.el.evaluate((node) => {
+        const cannot_be_day = await loc.el.evaluate(/* v8 ignore start */ (node) => {
           const e = node as HTMLInputElement;
           const old = e.value;
           e.value = '32';
           const valid = !e.checkValidity();
           e.value = old;
-          return valid;
+          return valid; /* v8 ignore stop */
         }, options);
         if (cannot_be_day) scores[i].day += 1;
 
-        const can_be_month = await loc.el.evaluate((node) => {
+        const can_be_month = await loc.el.evaluate(/* v8 ignore start */ (node) => {
           const e = node as HTMLInputElement;
           const old = e.value;
           e.value = '12';
           const valid = e.checkValidity();
           e.value = old;
-          return valid;
+          return valid; /* v8 ignore stop */
         }, options);
         if (can_be_month) scores[i].month += 1;
 
-        const cannot_be_month = await loc.el.evaluate((node) => {
+        const cannot_be_month = await loc.el.evaluate(/* v8 ignore start */ (node) => {
           const e = node as HTMLInputElement;
           const old = e.value;
           e.value = '13';
           const valid = !e.checkValidity();
           e.value = old;
-          return valid;
+          return valid; /* v8 ignore stop */
         }, options);
         if (cannot_be_month) scores[i].month += 1;
 
-        const can_be_year = await loc.el.evaluate((node) => {
+        const can_be_year = await loc.el.evaluate(/* v8 ignore start */ (node) => {
           const e = node as HTMLInputElement;
           const old = e.value;
           e.value = '2024';
           const valid = e.checkValidity();
           e.value = old;
-          return valid;
+          return valid; /* v8 ignore stop */
         }, options);
         if (can_be_year) scores[i].year += 1;
       }

package/src/field/date-text-input.ts

@@ -24,13 +24,13 @@ function buildDateString(date: Date, order: DateOrder, sep: string, pad: boolean
 
 function parseDateString(value: string, order: DateOrder, sep: string): Date | null {
   const raw = value.trim();
-  if (!raw) return null;
+  /* v8 ignore next */ if (!raw) return null;
 
   const tokens = raw.split(sep);
-  if (tokens.length !== 3) return null;
+  /* v8 ignore next */ if (tokens.length !== 3) return null;
 
   const nums = tokens.map((t) => Number(t));
-  if (nums.some((n) => !Number.isFinite(n))) return null;
+  /* v8 ignore next */ if (nums.some((n) => !Number.isFinite(n))) return null;
 
   const map: Record<'day' | 'month' | 'year', number> = { day: 0, month: 0, year: 0 };
   for (let i = 0; i < 3; i++) map[order[i]] = nums[i];
@@ -39,11 +39,11 @@ function parseDateString(value: string, order: DateOrder, sep: string): Date | n
   const month = map.month;
   const day = map.day;
 
-  if (month < 1 || month > 12) return null;
-  if (day < 1 || day > 31) return null;
+  /* v8 ignore next */ if (month < 1 || month > 12) return null;
+  /* v8 ignore next */ if (day < 1 || day > 31) return null;
 
   const dt = new Date(year, month - 1, day);
-  if (dt.getFullYear() !== year || dt.getMonth() !== month - 1 || dt.getDate() !== day) return null;
+  /* v8 ignore next */ if (dt.getFullYear() !== year || dt.getMonth() !== month - 1 || dt.getDate() !== day) return null;
 
   return dt;
 }
@@ -53,7 +53,7 @@ async function inferLocaleAndPattern(el: Locator, options?: SetOptions): Promise
   order: DateOrder;
   sep: string;
 }> {
-  return el.evaluate(() => {
+  return el.evaluate(/* v8 ignore start */ () => {
     const lang = document.documentElement.getAttribute('lang') || navigator.language || 'en-US';
     const dtf = new Intl.DateTimeFormat(lang, { year: 'numeric', month: '2-digit', day: '2-digit' });
 
@@ -72,7 +72,7 @@ async function inferLocaleAndPattern(el: Locator, options?: SetOptions): Promise
     // Fallback if Intl returns something odd
     const finalOrder = order.length === 3 ? order : (['day', 'month', 'year'] as const);
 
-    return { locale: lang, order: finalOrder as any, sep };
+    return { locale: lang, order: finalOrder as any, sep }; /* v8 ignore stop */
   }, options);
 }
 
@@ -83,11 +83,11 @@ async function fillAndReadBack(el: Locator, s: string, options?: SetOptions, nex
   if (nextInput) {
     await nextInput.focus(options);
   } else {
-    await el.evaluate((el) => el.blur(), options);
+    await el.evaluate(/* v8 ignore next */ (el) => el.blur(), options);
   }
 
   // Some frameworks need a tiny tick.
-  await el.evaluate(() => new Promise(requestAnimationFrame));
+  await el.evaluate(/* v8 ignore next */ () => new Promise(requestAnimationFrame));
 
   return await el.inputValue(options);
 }
@@ -199,8 +199,10 @@ async function setInputValue(
   value2?: Date,
   options?: SetOptions,
 ): Promise<boolean> {
+  /* v8 ignore start */
   if (await el.evaluate((el) => (el as HTMLInputElement).readOnly, options)) return false;
   if (el2 && (await el2.evaluate((el) => (el as HTMLInputElement).readOnly, options))) return false;
+  /* v8 ignore stop */
 
   const { combinations, localeSep } = await formatCombinations(el, options);
   let fallbackMatch: [DateOrder, string, boolean] | null = null;
@@ -234,10 +236,12 @@ async function setInputValue(
   if (fallbackMatch) {
     const [order, sep, pad] = fallbackMatch;
     const success = await setDateValue(el, value, order, sep, pad, options, el2);
+    /* v8 ignore start */
     if (el2 && value2) {
       const success2 = await setDateValue(el2, value2, order, sep, pad, options);
       return success && success2;
     }
+    /* v8 ignore stop */
     return success;
   }
 

package/src/field/index.ts

@@ -46,15 +46,17 @@ export async function setFieldValue(el: Locator, value: Value, options?: SetOpti
     setFallback,
   );
 
+  /* v8 ignore start */
   if ((await el.count()) > 1) {
     el = await pickFieldElement(el);
   }
+  /* v8 ignore stop */
 
   const tag = await el.evaluate((e) => e.tagName.toLowerCase(), options);
   const type = await el
     .getAttribute('type', options)
     .then((s) => s && s.toLowerCase())
-    .catch(() => null);
+    .catch(/* v8 ignore next */ () => null);
   const loc = { el, tag, type };
 
   await setValue(loc, value, options);

package/src/field/native-date.ts

@@ -11,7 +11,7 @@ async function setSingleDate({ el, tag, type }: Loc, value: Date, options?: SetO
       'input[type=date], input[type=datetime-local], input[type=month], input[type=week], input[type=time]',
     );
     if ((await inputs.count()) === 1) {
-      const isVisible = await inputs.evaluate((e) => {
+      const isVisible = await inputs.evaluate(/* v8 ignore next */ (e) => {
         const style = window.getComputedStyle(e);
         return style.display !== 'none' && style.visibility !== 'hidden' && e.getAttribute('type') !== 'hidden';
       });

package/src/field/radio-group.ts

@@ -28,7 +28,7 @@ export async function setRadioGroup(
   const ariaRadio = el.locator(`[role="radio"][value="${stringValue}"]`);
   if ((await ariaRadio.count()) >= 1) {
     const item = ariaRadio.first();
-    const ariaChecked = await item.getAttribute('aria-checked', options).catch(() => null);
+    const ariaChecked = await item.getAttribute('aria-checked', options).catch(/* v8 ignore next */ () => null);
     if (ariaChecked !== 'true') await item.click(options);
     return true;
   }
@@ -37,7 +37,7 @@ export async function setRadioGroup(
   const ariaRadioByLabel = el.getByLabel(stringValue, { exact: true }).locator('[role="radio"]');
   if ((await ariaRadioByLabel.count()) >= 1) {
     const item = ariaRadioByLabel.first();
-    const ariaChecked = await item.getAttribute('aria-checked', options).catch(() => null);
+    const ariaChecked = await item.getAttribute('aria-checked', options).catch(/* v8 ignore next */ () => null);
     if (ariaChecked !== 'true') await item.click(options);
     return true;
   }

package/src/field/toggle.ts

@@ -3,10 +3,10 @@ import type { Loc, SetOptions, Value } from './types';
 export async function setToggle({ el }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
   if (typeof value !== 'boolean' && value !== null) return false;
 
-  const role = await el.getAttribute('role', options).catch(() => null);
+  const role = await el.getAttribute('role', options).catch(/* v8 ignore next */ () => null);
   if (role !== 'checkbox' && role !== 'switch') return false;
 
-  const ariaChecked = await el.getAttribute('aria-checked', options).catch(() => null);
+  const ariaChecked = await el.getAttribute('aria-checked', options).catch(/* v8 ignore next */ () => null);
   const isChecked = ariaChecked === 'true';
 
   if (Boolean(value) !== isChecked) await el.click(options);

package/src/fuzzy-locator.ts

@@ -1,31 +1,26 @@
 import { Locator, Page } from '@playwright/test';
 
-type LocatorOptions = Parameters<Page['locator']>[1];
-
 /**
- * Locates an element using Playwright selectors, with fallbacks.
+ * Locates an element using Playwright selectors, with lazy fallbacks.
  */
 export async function fuzzyLocator(page: Page, selector: string): Promise<Locator> {
-  const primary = page.locator(selector).first();
-  if (await primary.count()) return primary;
+  const primary = page.locator(selector);
+  const candidates = [
+    tryRelaxNameToHasText(page, selector),
+    tryTagInsteadOfRole(page, selector),
+    tryRoleNameProximity(page, selector),
+    tryFieldAlternative(page, selector),
+    tryAsField(page, selector),
+  ];
 
-  return (
-    (await tryRelaxNameToHasText(page, selector)) ||
-    (await tryTagInsteadOfRole(page, selector)) ||
-    (await tryRoleNameProximity(page, selector)) ||
-    (await tryFieldAlternative(page, selector)) ||
-    (await tryAsField(page, selector)) ||
-    primary
-  ); // Nothing found, return the original locator (so caller can still wait/assert)
-}
+  let combined = primary;
 
-async function firstMatch(page: Page, sel: string | string[], opts: LocatorOptions = {}): Promise<Locator | null> {
-  for (const selector of Array.isArray(sel) ? sel : [sel]) {
-    const loc = page.locator(selector, opts).first();
-    if (await loc.count()) return loc;
+  for (const candidate of candidates) {
+    if (!candidate) continue;
+    combined = combined.or(candidate);
   }
 
-  return null;
+  return combined.first();
 }
 
 // Preserve the selector but relax [name="..."] to [has-text="..."]
@@ -34,51 +29,51 @@ async function firstMatch(page: Page, sel: string | string[], opts: LocatorOptio
 //  - role=link[name="Foo"]            → role=link:has-text="Foo"
 //  - css=button[name="Save"i]:visible → css=button:visible:has-text="Save"
 //  - [name="Hello"]                   → :has-text="Hello"
-async function tryRelaxNameToHasText(page: Page, selector: string): Promise<Locator | null> {
+function tryRelaxNameToHasText(page: Page, selector: string): Locator | null {
   const matchAnyNameFull = selector.match(/^(role=.*)\[name="([^"]+)"i?](.*)$/i);
   if (!matchAnyNameFull) return null;
   const [, pre, nameText, post] = matchAnyNameFull;
   const containsSelector = `${pre}${post}`;
-  return firstMatch(page, containsSelector, { hasText: nameText });
+  return page.locator(containsSelector, { hasText: nameText });
 }
 
 // Try using the tag name for `link`, `button` and `option` instead fo the aria role.
 // This keeps all other parts of the selector intact (prefix/suffix, additional filters).
 // Examples:
 //  - role=button[name="Foo"] → css=button:has-text="Save"
-async function tryTagInsteadOfRole(page: Page, selector: string): Promise<Locator | null> {
+function tryTagInsteadOfRole(page: Page, selector: string): Locator | null {
   const matchAnyNameFull = selector.match(/^role=(link|button|option)\s*\[name="([^"]+)"i?](.*)$/i);
   if (!matchAnyNameFull) return null;
   const [, role, nameText, post] = matchAnyNameFull;
   const tag = role === 'link' ? 'a' : role;
   const containsSelector = `css=${tag}${post}`;
-  return firstMatch(page, containsSelector, { hasText: nameText });
+  return page.locator(containsSelector, { hasText: nameText });
 }
 
 // If a role selector with a name filter fails, try proximity-based fallback while
 // preserving the role and any remainder of the selector.
 // Example: role=switch[name="Adres tonen"i] → text=Adres tonen >> .. >> role=switch
-async function tryRoleNameProximity(page: Page, selector: string): Promise<Locator | null> {
+function tryRoleNameProximity(page: Page, selector: string): Locator | null {
   const matchRole = selector.match(/^role=(\w+)\s*\[name="([^"]+)"i?](.*)$/i);
   if (!matchRole) return null;
   const [, role, name, rest] = matchRole;
   const proximitySelector = `text=${name} >> .. >> role=${role}${rest}`;
-  return firstMatch(page, proximitySelector);
+  return page.locator(proximitySelector);
 }
 
 // Try alternatives if field is not found
 // field="foo" → #foo > input  (only when name is a valid CSS identifier)
-async function tryFieldAlternative(page: Page, selector: string): Promise<Locator | null> {
+function tryFieldAlternative(page: Page, selector: string): Locator | null {
   const matchField = selector.match(/^field="([^"]+)"i?$/i);
   if (!matchField) return null;
   const [, field] = matchField;
   // Skip if the name contains characters invalid in a CSS ID selector
   if (!/^[a-zA-Z0-9_-]+$/.test(field)) return null;
-  return firstMatch(page, `#${field} > input`);
+  return page.locator(`#${field} > input`);
 }
 
 // Try matching using the field selector in case of role mismatch
-async function tryAsField(page: Page, selector: string): Promise<Locator | null> {
+function tryAsField(page: Page, selector: string): Locator | null {
   const matchRole = selector.match(/^role=(\w+)\s*\[name="([^"]+)"i?](.*)$/i);
   if (!matchRole) return null;
 
@@ -102,5 +97,5 @@ async function tryAsField(page: Page, selector: string): Promise<Locator | null>
 
   if (!fieldRoles.has(role.toLowerCase())) return null;
 
-  return firstMatch(page, `field=${name}${rest}`);
+  return page.locator(`field=${name}${rest}`);
 }

package/src/index.ts

@@ -11,3 +11,4 @@ export * from './types';
 export * from './utils/date';
 export * from './wait';
 export * from './scrub-html';
+export * from './unified-html-diff';

package/src/scrub-html.ts

@@ -31,6 +31,9 @@ export type ScrubHtmlOptions = {
   replaceBrInHeadings?: boolean;
   /** Limit lists to max items: -1 mean no limit. Default: -1 */
   limitLists?: number;
+  /** Strip utility-framework classes (Tailwind, Bootstrap, UnoCSS, Windi) from class
+   *  attributes. Removes the attribute entirely when all classes are stripped. Default: false */
+  dropUtilityClasses?: boolean;
 };
 
 const HTML_MIN_ATTR_THRESHOLD = 250_000;    // ~70k tokens
@@ -48,6 +51,7 @@ function getDefaults(contentLength: number): Required<ScrubHtmlOptions> {
     dropComments: true,
     replaceBrInHeadings: true,
     limitLists: contentLength >= HTML_LIMIT_LISTS_THRESHOLD ? 20 : -1,
+    dropUtilityClasses: false,
   };
 }
 
@@ -183,6 +187,7 @@ export async function realScrubHtml(
   if (o.dropComments) dropHtmlComments(doc);
   if (o.replaceBrInHeadings) replaceBrsInHeadings(doc);
   if (o.limitLists >= 0) limitListsAndRows(doc, o.limitLists);
+  if (o.dropUtilityClasses) stripUtilityClasses(doc);
   if (o.normalizeWhitespace) normalizeWhitespace(doc.body);
 
   return doc.body.innerHTML;
@@ -193,11 +198,8 @@ export async function realScrubHtml(
 function hasHiddenAncestor(el: Element): boolean {
   let p: Element | null = el.parentElement;
   while (p) {
-    if (
-      p.hasAttribute('hidden') ||
-      p.hasAttribute('inert') ||
-      p.getAttribute('aria-hidden') === 'true'
-    ) return true;
+    /* v8 ignore next */
+    if (p.hasAttribute('hidden') || p.hasAttribute('inert') || p.getAttribute('aria-hidden') === 'true') return true;
 
     const style = p.getAttribute('style') || '';
     if (/\bdisplay\s*:\s*none\b/i.test(style)) return true;
@@ -317,6 +319,41 @@ function replaceBrsInHeadings(doc: Document) {
   });
 }
 
+// ---- Utility class detection ----
+
+// Any class containing ':' is a Tailwind/Windi/UnoCSS variant prefix (hover:, sm:, dark:focus:, …)
+const UTILITY_VARIANT_RE = /:/;
+
+// Prefix-based utility patterns (Tailwind + Bootstrap)
+const UTILITY_PREFIX_RE = /^-?(?:p[xytblrse]?|m[xytblrse]?|gap|space-[xy]|w|h|min-w|min-h|max-w|max-h|size|basis|inset|top|right|bottom|left|start|end|z|text|bg|border|ring|shadow|outline|fill|stroke|divide|accent|caret|from|via|to|decoration|font|leading|tracking|indent|line-clamp|columns|aspect|object|opacity|rotate|scale|translate|skew|transition|duration|ease|delay|animate|rounded|overflow|overscroll|scroll|snap|touch|cursor|pointer-events|select|resize|flex|grid|col|row|order|auto-cols|auto-rows|items|justify|content|self|place|float|clear|list|whitespace|break|hyphens|mix-blend|bg-blend|backdrop|d|g|fs|fw|lh|align|position)-/i;
+
+// Standalone keywords that are utilities on their own (no suffix)
+const UTILITY_STANDALONE = new Set([
+  'flex', 'grid', 'block', 'hidden', 'inline', 'inline-block', 'inline-flex', 'inline-grid',
+  'contents', 'flow-root', 'list-item', 'table', 'container', 'truncate',
+  'grow', 'shrink', 'static', 'relative', 'absolute', 'fixed', 'sticky',
+  'visible', 'invisible', 'collapse', 'isolate',
+  'underline', 'overline', 'line-through', 'no-underline',
+  'uppercase', 'lowercase', 'capitalize', 'normal-case',
+  'italic', 'not-italic', 'antialiased', 'subpixel-antialiased',
+  'sr-only', 'not-sr-only', 'clearfix', 'row', 'col',
+]);
+
+function isUtilityClass(token: string): boolean {
+  if (UTILITY_VARIANT_RE.test(token)) return true;
+  const base = token.startsWith('-') ? token.slice(1) : token;
+  if (UTILITY_STANDALONE.has(base)) return true;
+  return UTILITY_PREFIX_RE.test(token);
+}
+
+function stripUtilityClasses(doc: Document) {
+  for (const el of doc.body.querySelectorAll<HTMLElement>('[class]')) {
+    const kept = el.className.split(/\s+/).filter((t) => t && !isUtilityClass(t));
+    if (kept.length === 0) el.removeAttribute('class');
+    else el.className = kept.join(' ');
+  }
+}
+
 function limitListsAndRows(doc: Document, limit: number) {
   // lists
   doc.querySelectorAll('ul, ol').forEach((list) => {

package/src/snapshot.ts

@@ -1,16 +1,30 @@
 import { sleep } from '@letsrunit/utils';
 import type { Page } from '@playwright/test';
 import { screenshot } from './screenshot';
+import { realScrubHtml } from './scrub-html';
 import type { Snapshot } from './types';
 import { waitForDomIdle } from './wait';
 
-export async function snapshot(page: Page): Promise<Snapshot> {
+export type SnapshotOptions = {
+  /** Strip utility-framework classes (Tailwind, Bootstrap, UnoCSS, Windi) from the captured HTML. */
+  dropUtilityClasses?: boolean;
+};
+
+export async function snapshot(page: Page, opts: SnapshotOptions = {}): Promise<Snapshot> {
   await sleep(500);
   await waitForDomIdle(page);
 
   const [url, html, file] = await Promise.all([page.url(), getContentWithMarkedHidden(page), screenshot(page)]);
 
-  return { url, html, screenshot: file };
+  const finalHtml = opts.dropUtilityClasses
+    ? await realScrubHtml({ html, url }, {
+        dropHidden: false, dropHead: false, dropSvg: false, pickMain: false,
+        stripAttributes: 0, normalizeWhitespace: false, dropComments: false,
+        replaceBrInHeadings: false, limitLists: -1, dropUtilityClasses: true,
+      })
+    : html;
+
+  return { url, html: finalHtml, screenshot: file };
 }
 
 async function getContentWithMarkedHidden(page: Page): Promise<string> {