@letsrunit/playwright 0.18.1 → 0.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@letsrunit/playwright",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "description": "Playwright extensions and utilities for letsrunit",
   "keywords": [
     "testing",
@@ -42,8 +42,8 @@
   },
   "packageManager": "yarn@4.10.3",
   "dependencies": {
-    "@letsrunit/utils": "0.18.1",
-    "@playwright/test": "^1.57.0",
+    "@letsrunit/utils": "0.18.3",
+    "@playwright/test": "1.58.2",
     "case": "^1.6.3",
     "diff": "^8.0.3",
     "fast-json-stable-stringify": "^2.1.0",

package/src/browser.ts

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

package/src/field/aria-select.ts

@@ -1,32 +1,136 @@
 import type { Loc, SetOptions, Value } from './types';
 
+function cssAttrEquals(name: string, value: string): string {
+  return `[${name}=${JSON.stringify(value)}]`;
+}
+
+function caseInsensitiveExact(value: string): RegExp {
+  const escaped = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return new RegExp(`^${escaped}$`, 'i');
+}
+
+async function getComboboxRoot(el: Loc['el'], options?: SetOptions) {
+  const role = await el.getAttribute('role', options).catch(
+    /* v8 ignore next — attribute might be missing or element might have detached during the check */
+    () => null,
+  );
+  if (role === 'combobox') return el;
+
+  const byRole = el.locator('[role="combobox"]').first();
+  if ((await byRole.count()) > 0) return byRole;
+
+  const popupInput = el
+    .locator('input[aria-controls], input[aria-owns], input[aria-haspopup], textarea[aria-controls], textarea[aria-owns], textarea[aria-haspopup]')
+    .first();
+  if ((await popupInput.count()) > 0) return popupInput;
+
+  return null;
+}
+
+async function getControlledListbox(el: Loc['el'], options?: SetOptions) {
+  const ids: string[] = [];
+  for (const attr of ['aria-controls', 'aria-owns']) {
+    const raw = await el.getAttribute(attr, options).catch(
+      /* v8 ignore next — attribute might be missing or element might have detached during the check */
+      () => null,
+    );
+    if (!raw) continue;
+    ids.push(...raw.split(/\s+/).filter(Boolean));
+  }
+
+  for (const id of ids) {
+    const listbox = el.page().locator(`[role="listbox"]${cssAttrEquals('id', id)}`).first();
+    if ((await listbox.count()) > 0) return listbox;
+  }
+
+  return null;
+}
+
+async function getVisibleListbox(el: Loc['el'], options?: SetOptions) {
+  const listboxes = el.page().locator('[role="listbox"]:visible');
+  await listboxes.first().waitFor({ state: 'visible', timeout: options?.timeout }).catch(() => null);
+  if ((await listboxes.count()) > 0) return listboxes.first();
+  return null;
+}
+
+async function didSelectionApply(
+  root: Loc['el'],
+  option: Loc['el'],
+  before: string | null,
+  options?: SetOptions,
+): Promise<boolean> {
+  const ariaSelected = await option.getAttribute('aria-selected', options).catch(() => null);
+  if (ariaSelected === 'true') return true;
+
+  const optionId = await option.getAttribute('id', options).catch(() => null);
+  const activeDescendant = await root.getAttribute('aria-activedescendant', options).catch(() => null);
+  if (optionId && activeDescendant === optionId) return true;
+
+  const after = await root
+    .evaluate((node) => {
+      if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
+        return node.value;
+      }
+      return node.textContent?.trim() ?? '';
+    }, options)
+    .catch(() => null);
+
+  if (before !== null && after !== null && after !== before) return true;
+
+  const listbox = await getVisibleListbox(root, options);
+  if (!listbox) return true;
+
+  return false;
+}
+
 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(/* v8 ignore next */ () => null);
-  if (role !== 'combobox') return false;
+  const root = await getComboboxRoot(el, options);
+  if (!root) return false;
+
+  let listbox = await getControlledListbox(root, options);
 
-  const ariaControls = await el.getAttribute('aria-controls', options).catch(/* v8 ignore next */ () => null);
-  if (!ariaControls) return false;
+  const ariaExpanded = await root.getAttribute('aria-expanded', options).catch(
+    /* v8 ignore next — attribute might be missing or element might have detached during the check */
+    () => null,
+  );
+  if (ariaExpanded !== 'true') {
+    await root.click(options);
+    listbox = listbox ?? (await getControlledListbox(root, options));
+  }
 
-  const ariaExpanded = await el.getAttribute('aria-expanded', options).catch(/* v8 ignore next */ () => null);
-  if (ariaExpanded !== 'true') await el.click(options);
+  listbox = listbox ?? (await getVisibleListbox(root, options));
+  if (!listbox) return false;
 
   const stringValue = String(value);
-  const listbox = el.page().locator(`#${ariaControls}`);
+  const before = await root
+    .evaluate((node) => {
+      if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
+        return node.value;
+      }
+      return node.textContent?.trim() ?? '';
+    }, options)
+    .catch(() => null);
 
   // 1. By value attribute
-  const byValue = listbox.locator(`[role="option"][value="${stringValue}"]`);
+  const byValue = listbox.locator(
+    `[role="option"]${cssAttrEquals('value', stringValue)}, ` +
+      `[role="option"]${cssAttrEquals('data-value', stringValue)}, ` +
+      `[role="option"]${cssAttrEquals('ng-reflect-value', stringValue)}`,
+  );
   if ((await byValue.count()) >= 1) {
-    await byValue.first().click(options);
-    return true;
+    const option = byValue.first();
+    await option.click(options);
+    return await didSelectionApply(root, option, before, options);
   }
 
   // 2. By accessible name (case-insensitive)
-  const byName = listbox.getByRole('option', { name: stringValue });
+  const byName = listbox.getByRole('option', { name: caseInsensitiveExact(stringValue) });
   if ((await byName.count()) >= 1) {
-    await byName.first().click(options);
-    return true;
+    const option = byName.first();
+    await option.click(options);
+    return await didSelectionApply(root, option, before, options);
   }
 
   return false;

package/src/field/calendar.ts

@@ -41,6 +41,32 @@ async function isCalendarGrid(grid: Locator): Promise<boolean> {
   return last >= 28;
 }
 
+function isDayToken(text: string): boolean {
+  const day = Number(text.trim());
+  return Number.isInteger(day) && day >= 1 && day <= 31;
+}
+
+async function isStructuralCalendar(root: Locator): Promise<boolean> {
+  const candidates = root.locator('button, [role="button"], [tabindex], div, span').filter({ visible: true });
+  const count = await candidates.count();
+  if (count < 28) return false;
+
+  const tokens = (await candidates.allInnerTexts()).map((text) => text.trim()).filter(isDayToken);
+  if (tokens.length < 28 || tokens.length > 120) return false;
+
+  const daySet = new Set(tokens.map(Number));
+  const hasStart = [1, 2, 3, 4, 5, 6, 7].some((day) => daySet.has(day));
+  const hasMiddle = [22, 23, 24, 25, 26, 27, 28].some((day) => daySet.has(day));
+
+  return daySet.size >= 28 && hasStart && hasMiddle;
+}
+
+function dayCellSelector(hasGridCells: boolean): string {
+  return hasGridCells
+    ? 'td, [role="gridcell"]'
+    : 'button, [role="button"], [tabindex], div, span';
+}
+
 export async function getCalendar(
   root: Locator,
   options?: SetOptions,
@@ -57,6 +83,9 @@ export async function getCalendar(
     return { calendar: root, tables: [root] };
   }
   /* v8 ignore stop */
+  if (!container && (await isStructuralCalendar(root))) {
+    return { calendar: root, tables: [root] };
+  }
   if (!container) return null;
 
   // 2. Find all valid calendar grids within the container
@@ -77,7 +106,15 @@ export async function getCalendar(
   // 3. Deduplicate (prevents issues if container == grid)
   const uniqueTables = tables.filter((t, i, self) => self.indexOf(t) === i);
 
-  return uniqueTables.length > 0 ? { calendar: container, tables: uniqueTables } : null;
+  if (uniqueTables.length > 0) {
+    return { calendar: container, tables: uniqueTables };
+  }
+
+  if (await isStructuralCalendar(container)) {
+    return { calendar: container, tables: [container] };
+  }
+
+  return null;
 }
 
 function uniqueMonthYearPairs(pairs: MonthYear[]): MonthYear[] {
@@ -167,10 +204,29 @@ async function navigateToMonth(
   const firstMonthTotal = currentMonths[0].year * 12 + currentMonths[0].month;
   const diff = targetTotal - firstMonthTotal;
 
-  const btn =
-    diff < 0
-      ? root.locator('button[aria-label*="prev"], button[class*="prev"]').filter({ visible: true }).first()
-      : root.locator('button[aria-label*="next"], button[class*="next"]').filter({ visible: true }).first();
+  const prevSelector = [
+    '[aria-label*="prev"]',
+    '[aria-label*="Prev"]',
+    '[aria-label*="previous"]',
+    '[aria-label*="Previous"]',
+    '[class*="prev"]',
+    '[class*="Prev"]',
+    '[title*="prev"]',
+    '[title*="Prev"]',
+    'button:has-text("Previous")',
+    'button:has-text("Prev")',
+  ].join(', ');
+  const nextSelector = [
+    '[aria-label*="next"]',
+    '[aria-label*="Next"]',
+    '[class*="next"]',
+    '[class*="Next"]',
+    '[title*="next"]',
+    '[title*="Next"]',
+    'button:has-text("Next")',
+  ].join(', ');
+
+  const btn = diff < 0 ? root.locator(prevSelector).filter({ visible: true }).first() : root.locator(nextSelector).filter({ visible: true }).first();
 
   if (!(await btn.count())) return false;
 
@@ -184,14 +240,12 @@ 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> {
@@ -239,17 +293,29 @@ async function setDayByAriaLabel(table: Locator, value: Date, options?: SetOptio
 
 async function setDayByByCellText(table: Locator, value: Date, options?: SetOptions): Promise<boolean> {
   const day = value.getDate();
-  const cells = table.locator('td, [role="gridcell"]').filter({ visible: true });
+  const gridCells = table.locator('td, [role="gridcell"]').filter({ visible: true });
+  const hasGridCells = (await gridCells.count()) > 0;
+  const cells = table.locator(dayCellSelector(hasGridCells)).filter({ visible: true });
 
   const allTexts = await cells.allInnerTexts();
   const foundIndices = allTexts.map((text, i) => (text.trim() === String(day) ? i : -1)).filter((i) => i !== -1);
 
   if (foundIndices.length === 0) return false;
 
-  const index = foundIndices.length === 1 || day < 15 ? foundIndices[0] : foundIndices[foundIndices.length - 1];
-  await cells.nth(index).click(options);
+  const ordered =
+    foundIndices.length === 1 || day < 15 ? foundIndices : [...foundIndices].reverse();
 
-  return true;
+  for (const index of ordered) {
+    const cell = cells.nth(index);
+    try {
+      await cell.click(options);
+      return true;
+    } catch {
+      // If this candidate is not interactable, continue to the next matching day node.
+    }
+  }
+
+  return false;
 }
 
 async function setDates(calendar: Locator, tables: Locator[], dates: Date[], options?: SetOptions): Promise<void> {

package/src/field/composite-date.ts

@@ -0,0 +1,121 @@
+import { isArray, isDate, isRange } from '@letsrunit/utils';
+import type { Range } from '@letsrunit/utils';
+import type { Locator } from '@playwright/test';
+import { setCalendarDate } from './calendar';
+import type { Loc, SetOptions, Value } from './types';
+
+function toDates(value: Date | Date[] | Range<Date>): Date[] {
+  if (isRange(value)) return [value.from, value.to];
+  if (isArray(value, isDate)) return value;
+  return [value];
+}
+
+function formatDate(date: Date, pattern: 'iso' | 'dmy' | 'mdy' | 'ymd'): string {
+  const y = date.getFullYear();
+  const m = date.getMonth() + 1;
+  const d = date.getDate();
+
+  const mm = String(m).padStart(2, '0');
+  const dd = String(d).padStart(2, '0');
+
+  if (pattern === 'iso' || pattern === 'ymd') return `${y}-${mm}-${dd}`;
+  if (pattern === 'dmy') return `${dd}/${mm}/${y}`;
+  return `${mm}/${dd}/${y}`;
+}
+
+function digits(value: string): number[] {
+  return (value.match(/\d+/g) ?? []).map((v) => Number.parseInt(v, 10));
+}
+
+function matchesDateLoosely(value: string, target: Date): boolean {
+  const nums = digits(value);
+  if (nums.length < 3) return false;
+  return nums.includes(target.getFullYear()) && nums.includes(target.getMonth() + 1) && nums.includes(target.getDate());
+}
+
+async function commitInput(input: Locator, text: string, options?: SetOptions): Promise<string> {
+  await input.click(options);
+  await input.clear(options);
+  await input.fill(text, options);
+  await input.press('Enter', options).catch(() => null);
+  await input.evaluate((node) => (node as HTMLInputElement).blur(), options).catch(() => null);
+  await input.evaluate(() => new Promise(requestAnimationFrame)).catch(() => null);
+  return input.inputValue(options).catch(() => '');
+}
+
+async function setSingleInputDate(input: Locator, value: Date, options?: SetOptions): Promise<boolean> {
+  const patterns: Array<'iso' | 'dmy' | 'mdy' | 'ymd'> = ['iso', 'dmy', 'mdy', 'ymd'];
+
+  for (const pattern of patterns) {
+    const readBack = await commitInput(input, formatDate(value, pattern), options);
+    if (matchesDateLoosely(readBack, value)) return true;
+  }
+
+  return false;
+}
+
+async function getDateInputs(el: Locator, options?: SetOptions): Promise<Locator[]> {
+  const rootTag = await el.evaluate((node) => node.tagName.toLowerCase(), options);
+  if (rootTag === 'input') return [el];
+
+  const inputs = el.locator('input[type="text"], input:not([type]), input');
+  const count = await inputs.count();
+  if (count === 0) return [];
+
+  const result: Locator[] = [];
+  for (let i = 0; i < count; i++) {
+    const candidate = inputs.nth(i);
+    const visible = await candidate.isVisible(options).catch(() => false);
+    if (!visible) continue;
+    result.push(candidate);
+  }
+  return result;
+}
+
+async function asLoc(el: Locator, options?: SetOptions): Promise<Loc> {
+  const tag = await el.evaluate((node) => node.tagName.toLowerCase(), options);
+  const type = await el
+    .getAttribute('type', options)
+    .then((s) => s && s.toLowerCase())
+    .catch(() => null);
+  return { el, tag, type };
+}
+
+async function getPickerRootFromInput(input: Locator): Promise<Locator | null> {
+  const picker = input
+    .locator('xpath=ancestor::*[.//input and .//*[@aria-label="calendar"]][1]')
+    .first();
+  if ((await picker.count()) > 0) return picker;
+  return null;
+}
+
+async function setByCalendar(input: Locator, date: Date, options?: SetOptions): Promise<boolean> {
+  const picker = await getPickerRootFromInput(input);
+  if (!picker) return false;
+  const pickerLoc = await asLoc(picker, options);
+  return setCalendarDate(pickerLoc, date, options);
+}
+
+export async function setCompositeDate({ el }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
+  if (!(value instanceof Date) && !isArray(value, isDate) && !isRange(value, isDate)) return false;
+
+  const dates = toDates(value as Date | Date[] | Range<Date>);
+  const inputs = await getDateInputs(el, options);
+  if (inputs.length === 0) return false;
+
+  if (dates.length === 1) {
+    const singleInput = await setSingleInputDate(inputs[0], dates[0], options);
+    if (singleInput) return true;
+    return setByCalendar(inputs[0], dates[0], options);
+  }
+
+  if (inputs.length < 2) return false;
+
+  const first = await setSingleInputDate(inputs[0], dates[0], options);
+  const second = await setSingleInputDate(inputs[1], dates[1], options);
+  if (first && second) return true;
+
+  const firstCal = await setByCalendar(inputs[0], dates[0], options);
+  const secondCal = await setByCalendar(inputs[1], dates[1], options);
+  return firstCal && secondCal;
+}

package/src/field/composite-select.ts

@@ -0,0 +1,182 @@
+import type { Locator } from '@playwright/test';
+import type { Loc, SetOptions, Value } from './types';
+
+function caseInsensitiveExact(value: string): RegExp {
+  const escaped = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return new RegExp(`^${escaped}$`, 'i');
+}
+
+async function openControl(el: Locator, options?: SetOptions): Promise<void> {
+  const activator = el
+    .locator('button[aria-haspopup], [role="button"][aria-haspopup], input[readonly]')
+    .first();
+  if ((await activator.count()) > 0) {
+    await activator.click(options);
+    return;
+  }
+  await el.click(options);
+}
+
+function getPopupCandidates(page: any): Locator {
+  return page.locator(
+    [
+      '[role="listbox"]:visible',
+      '[role="menu"]:visible',
+      '[role="dialog"]:visible',
+      '[role="presentation"]:visible',
+      '.cdk-overlay-pane:visible',
+    ].join(', '),
+  );
+}
+
+async function looksLikeCompositeSelect(el: Locator, options?: SetOptions): Promise<boolean> {
+  const role = await el.getAttribute('role', options).catch(() => null);
+  if (role === 'combobox' || role === 'listbox') return false;
+
+  if ((await el.locator('input[type="radio"], input[type="checkbox"]').count()) > 0) return false;
+  if ((await el.locator('[role="slider"], [aria-valuenow]').count()) > 0) return false;
+
+  const cues = el.locator(
+    [
+      '[aria-haspopup]',
+      '[aria-controls]',
+      '[aria-owns]',
+      'input[readonly]',
+      'button[aria-haspopup]',
+    ].join(', '),
+  );
+  return (await cues.count()) > 0;
+}
+
+async function getOptionFromPopup(popup: Locator, value: string, options?: SetOptions): Promise<Locator | null> {
+  const byValue = popup.locator(
+    `[value=${JSON.stringify(value)}], [data-value=${JSON.stringify(value)}], [aria-label=${JSON.stringify(value)}]`,
+  );
+  if ((await byValue.count()) > 0) return byValue.first();
+
+  const byRole = popup.getByRole('option', { name: caseInsensitiveExact(value) });
+  if ((await byRole.count()) > 0) return byRole.first();
+
+  const byText = popup.getByText(caseInsensitiveExact(value), { exact: true });
+  if ((await byText.count()) > 0) return byText.first();
+
+  return null;
+}
+
+async function getPopupOptions(popup: Locator): Promise<Locator> {
+  return popup.locator(
+    [
+      '[role="option"]',
+      '[title]',
+    ].join(', '),
+  );
+}
+
+function toNumber(value: string | null): number | null {
+  if (!value) return null;
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : null;
+}
+
+async function getContextNumericValue(el: Locator, options?: SetOptions): Promise<number | null> {
+  const labelled = el.page().getByLabel('result').first();
+  if ((await labelled.count()) > 0) {
+    const text = await labelled.textContent(options).catch(() => null);
+    const parsed = toNumber(text);
+    if (parsed !== null) return parsed;
+  }
+  return null;
+}
+
+async function getRootText(el: Locator, options?: SetOptions): Promise<string> {
+  return (
+    (await el
+      .evaluate((node) => (node.textContent ?? '').replace(/\s+/g, ' ').trim(), options)
+      .catch(() => '')) || ''
+  );
+}
+
+export async function setCompositeSelect({ el }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
+  if (typeof value !== 'string' && typeof value !== 'number') return false;
+  if (!(await looksLikeCompositeSelect(el, options))) return false;
+
+  const stringValue = String(value);
+  const before = await getRootText(el, options);
+  const popupsBefore = await getPopupCandidates(el.page()).count();
+
+  await openControl(el, options);
+
+  const popups = await getPopupCandidates(el.page());
+  await popups.first().waitFor({ state: 'visible', timeout: options?.timeout }).catch(() => null);
+  const count = await popups.count();
+  if (count === 0) return false;
+
+  const popup = popups.nth(Math.max(0, count - 1));
+  const option = await getOptionFromPopup(popup, stringValue, options);
+  if (option) {
+    await option.click({ ...options, force: true });
+  }
+
+  const after = await getRootText(el, options);
+  if (after && before && after !== before) return true;
+
+  const popupsAfter = await getPopupCandidates(el.page()).count();
+  if (option && (popupsAfter < popupsBefore || popupsAfter < count)) return true;
+
+  const targetNum = toNumber(stringValue);
+  if (targetNum === null) return false;
+
+  const optionsLoc = await getPopupOptions(popup);
+  const totalOptions = await optionsLoc.count();
+  if (totalOptions === 0) return false;
+
+  const labels: string[] = [];
+  for (let i = 0; i < totalOptions; i++) {
+    const candidate = optionsLoc.nth(i);
+    const label =
+      (await candidate.getAttribute('title', options).catch(() => null)) ||
+      (await candidate.textContent(options).catch(() => '')) ||
+      '';
+    const normalized = label.replace(/\s+/g, ' ').trim();
+    if (!normalized) continue;
+    if (!labels.includes(normalized)) labels.push(normalized);
+  }
+
+  for (const label of labels) {
+    await openControl(el, options);
+    const activePopups = getPopupCandidates(el.page());
+    const activePopupCount = await activePopups.count();
+    if (activePopupCount === 0) continue;
+    const activePopup = activePopups.nth(Math.max(0, activePopupCount - 1));
+
+    let candidate = activePopup.locator(`[title=${JSON.stringify(label)}]`).first();
+    if ((await candidate.count()) === 0) {
+      candidate = activePopup.getByText(caseInsensitiveExact(label), { exact: true }).first();
+    }
+    if ((await candidate.count()) === 0) continue;
+
+    await candidate.click({ ...options, force: true });
+
+    const numeric = await getContextNumericValue(el, options);
+    if (numeric !== null && Math.abs(numeric - targetNum) < 0.001) return true;
+  }
+
+  const current = await getContextNumericValue(el, options);
+  if (current === null) return false;
+
+  await openControl(el, options);
+  await el.focus(options).catch(() => null);
+  const page = el.page();
+  const key = targetNum > current ? 'ArrowDown' : 'ArrowUp';
+
+  for (let i = 0; i < 20; i++) {
+    await page.keyboard.press(key);
+    await page.keyboard.press('Enter');
+    const numeric = await getContextNumericValue(el, options);
+    if (numeric !== null && Math.abs(numeric - targetNum) < 0.001) return true;
+    await openControl(el, options);
+    await el.focus(options).catch(() => null);
+  }
+
+  return false;
+}