@letsrunit/playwright 0.1.0

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

@@ -0,0 +1,270 @@
+import { cartesian, isArray, isDate, isRange, type Range } from '@letsrunit/utils';
+import type { Locator } from '@playwright/test';
+import type { Loc, SetOptions, Value } from './types';
+
+type DateOrder = Array<'day' | 'month' | 'year'>;
+
+function pad2(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+function buildDateString(date: Date, order: DateOrder, sep: string, pad: boolean): string {
+  const d = date.getDate();
+  const m = date.getMonth() + 1;
+  const y = date.getFullYear();
+
+  const parts: Record<'day' | 'month' | 'year', string> = {
+    day: pad ? pad2(d) : String(d),
+    month: pad ? pad2(m) : String(m),
+    year: String(y),
+  };
+
+  return order.map((p) => parts[p]).join(sep);
+}
+
+function parseDateString(value: string, order: DateOrder, sep: string): Date | null {
+  const raw = value.trim();
+  if (!raw) return null;
+
+  const tokens = raw.split(sep);
+  if (tokens.length !== 3) return null;
+
+  const nums = tokens.map((t) => Number(t));
+  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];
+
+  const year = map.year;
+  const month = map.month;
+  const day = map.day;
+
+  if (month < 1 || month > 12) return null;
+  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;
+
+  return dt;
+}
+
+async function inferLocaleAndPattern(el: Locator, options?: SetOptions): Promise<{
+  locale: string;
+  order: DateOrder;
+  sep: string;
+}> {
+  return el.evaluate(() => {
+    const lang = document.documentElement.getAttribute('lang') || navigator.language || 'en-US';
+    const dtf = new Intl.DateTimeFormat(lang, { year: 'numeric', month: '2-digit', day: '2-digit' });
+
+    const parts = dtf.formatToParts(new Date(2033, 10, 22)); // 22 Nov 2033, disambiguates day vs month
+    const order: Array<'day' | 'month' | 'year'> = [];
+    let sep = '/';
+
+    for (const p of parts) {
+      if (p.type === 'day' || p.type === 'month' || p.type === 'year') order.push(p.type);
+      if (p.type === 'literal') {
+        const lit = p.value.trim();
+        if (lit) sep = lit;
+      }
+    }
+
+    // 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 };
+  }, options);
+}
+
+async function fillAndReadBack(el: Locator, s: string, options?: SetOptions, nextInput?: Locator): Promise<string> {
+  await el.clear(options);
+  await el.fill(s, options);
+
+  if (nextInput) {
+    await nextInput.focus(options);
+  } else {
+    await el.evaluate((el) => el.blur(), options);
+  }
+
+  // Some frameworks need a tiny tick.
+  await el.evaluate(() => new Promise(requestAnimationFrame));
+
+  return await el.inputValue(options);
+}
+
+function isAmbiguous(value: Date | Date[] | Range<Date>, value2?: Date): boolean {
+  if (value2 && value instanceof Date) value = [value, value2];
+  return toDateArray(value).every((date) => date.getDate() <= 12);
+}
+
+function toDateArray(value: Date | Date[] | Range<Date>): Date[] {
+  return isRange(value) ? [value.from, value.to] : isArray(value) ? value : [value];
+}
+
+async function setDateValue(
+  el: Locator,
+  value: Date | Date[] | Range<Date>,
+  order: DateOrder,
+  sep: string,
+  pad: boolean,
+  options?: SetOptions,
+  nextInput?: Locator,
+): Promise<boolean> {
+  const dates = toDateArray(value);
+  const glue = isRange(value) ? ' - ' : ',';
+
+  const s = dates.map((d) => buildDateString(d, order, sep, pad)).join(glue);
+  const back = await fillAndReadBack(el, s, options, nextInput);
+  if (!back) return false;
+
+  const backParts = back.split(glue);
+  const failed =
+    backParts.length !== dates.length ||
+    dates.some((date, i) => {
+      const part = backParts[i]?.trim();
+      const parsed = parseDateString(part, order, sep);
+      return !parsed || !sameYMD(parsed, date);
+    });
+
+  return !failed;
+}
+
+async function tryProbe(
+  el: Locator,
+  value: Date | Date[] | Range<Date>,
+  order: DateOrder,
+  sep: string,
+  pad: boolean,
+  options?: SetOptions,
+  nextInput?: Locator,
+): Promise<boolean | null> {
+  const baseDate = isRange(value) ? value.from : isArray(value) ? value[0] : value;
+  const y = baseDate.getFullYear();
+  const m = baseDate.getMonth();
+  const probeMonths = [m, m - 1, m + 1];
+
+  for (const month of probeMonths) {
+    const probeValue = isRange(value)
+      ? { from: new Date(y, month, 22), to: new Date(y, month, 23) }
+      : new Date(y, month, 22);
+
+    const success = await setDateValue(el, probeValue, order, sep, pad, options, nextInput);
+    if (success) return true;
+  }
+
+  return null;
+}
+
+function sameYMD(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+async function formatCombinations(el: Locator, options?: SetOptions) {
+  const { order: localeOrder, sep: localeSep } = await inferLocaleAndPattern(el, options);
+
+  const orders: DateOrder[] = [
+    localeOrder,
+    ['year', 'month', 'day'], // ISO order
+    ['day', 'month', 'year'],
+    ['month', 'day', 'year'],
+  ];
+
+  const seenOrders = new Set<string>();
+  const uniqueOrders: DateOrder[] = [];
+  for (const o of orders) {
+    const key = o.join(',');
+    if (!seenOrders.has(key)) {
+      seenOrders.add(key);
+      uniqueOrders.push(o);
+    }
+  }
+
+  const seps = Array.from(new Set([localeSep, '-', '/', '.']));
+  const pads = [true, false];
+
+  const combinations = cartesian(uniqueOrders, seps, pads);
+
+  // Re-order combinations to ensure that locale and iso is second
+  const score = ([o, s]: (typeof combinations)[number]) =>
+    o.join(s) === localeOrder.join(localeSep) ? 0 : o.join(s) === 'year-month-day'? 1 : 2;
+  combinations.sort((a, b) => score(a) - score(b));
+
+  return { combinations, localeSep };
+}
+
+async function setInputValue(
+  el: Locator,
+  value: Date | Date[] | Range<Date>,
+  el2?: Locator,
+  value2?: Date,
+  options?: SetOptions,
+): Promise<boolean> {
+  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;
+
+  const { combinations, localeSep } = await formatCombinations(el, options);
+  let fallbackMatch: [DateOrder, string, boolean] | null = null;
+
+  for (const [order, sep, pad] of combinations) {
+    // Optimization: for non-locale separators, only try padded
+    if (sep !== localeSep && !pad) continue;
+
+    const success = await setDateValue(el, value, order, sep, pad, options, el2);
+    if (!success) continue;
+
+    if (el2 && value2) {
+      const success2 = await setDateValue(el2, value2, order, sep, pad, options);
+      if (!success2) continue;
+    }
+
+    if (!isAmbiguous(value, value2)) return true; // Done
+
+    const probeResult = await tryProbe(el, value, order, sep, pad, options, el2);
+
+    if (probeResult === true) {
+      await setDateValue(el, value, order, sep, pad, options, el2);
+      if (el2 && value2) await setDateValue(el2, value2, order, sep, pad, options);
+      return true; // Done
+    }
+
+    // Maybe out of range? Keep as fallback
+    if (probeResult === null && !fallbackMatch) fallbackMatch = [order, sep, pad];
+  }
+
+  if (fallbackMatch) {
+    const [order, sep, pad] = fallbackMatch;
+    const success = await setDateValue(el, value, order, sep, pad, options, el2);
+    if (el2 && value2) {
+      const success2 = await setDateValue(el2, value2, order, sep, pad, options);
+      return success && success2;
+    }
+    return success;
+  }
+
+  return false;
+}
+
+export async function setDateTextInput({ el, tag, type }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
+  if (!(value instanceof Date) && !isArray(value, isDate) && !isRange(value, isDate)) return false;
+
+  if (tag === 'textarea' || tag === 'select') return false;
+
+  if (tag !== 'input' && isRange(value, isDate)) {
+    const inputs = el.locator('input[type=text], input:not([type])');
+    if ((await inputs.count()) === 2) {
+      return await setInputValue(inputs.nth(0), value.from, inputs.nth(1), value.to, options);
+    }
+  }
+
+  if (tag === 'input' && type && type !== 'text') return false;
+
+  let input = el;
+
+  if (tag !== 'input') {
+    const inputs = el.locator('input[type=text], input:not([type])');
+    if ((await inputs.count()) !== 1)  return false;
+    input = inputs.nth(0);
+  }
+
+  return await setInputValue(input, value, undefined, undefined, options);
+}

package/src/field/index.ts

@@ -0,0 +1,57 @@
+import { chain, isArray, isRange } from '@letsrunit/utils';
+import type { Locator } from '@playwright/test';
+import { pickFieldElement } from '../utils/pick-field-element';
+import { setCalendarDate } from './calendar';
+import { setDateGroup } from './date-group';
+import { setDateTextInput } from './date-text-input';
+import { setNativeCheckbox } from './native-checkbox';
+import { setNativeDate } from './native-date';
+import { setNativeInput } from './native-input';
+import { selectNative } from './native-select';
+import { setOtpValue } from './otp';
+import { setRadioGroup } from './radio-group';
+import { setSliderValue } from './slider';
+import type { Loc, SetOptions, Value } from './types';
+
+function toString(value: Value): string {
+  if (isRange(value)) return `${String(value.from)} - ${String(value.to)}`;
+  if (isArray(value)) return value.map((v) => String(v)).join('\n');
+  return String(value);
+}
+
+async function setFallback({ el }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
+  await el.fill(toString(value), options); // Will likely fail, but will have a good error.
+  return true;
+}
+
+export async function setFieldValue(el: Locator, value: Value, options?: SetOptions): Promise<void> {
+  const setValue = chain(
+    // native
+    selectNative,
+    setNativeCheckbox,
+    setRadioGroup,
+    setNativeDate,
+    setNativeInput,
+    // aria / components
+    setDateTextInput,
+    setDateGroup,
+    setCalendarDate,
+    setOtpValue,
+    setSliderValue,
+    // fallback (eg contenteditable or will fail)
+    setFallback,
+  );
+
+  if ((await el.count()) > 1) {
+    el = await pickFieldElement(el);
+  }
+
+  const tag = await el.evaluate((e) => e.tagName.toLowerCase(), options);
+  const type = await el
+    .getAttribute('type', options)
+    .then((s) => s && s.toLowerCase())
+    .catch(() => null);
+  const loc = { el, tag, type };
+
+  await setValue(loc, value, options);
+}

package/src/field/native-checkbox.ts

@@ -0,0 +1,21 @@
+import type { Loc, SetOptions, Value } from './types';
+
+export async function setNativeCheckbox({ el, tag, type }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
+  if (typeof value !== 'boolean' && value !== null) return false;
+  if (tag === 'select' || tag === 'textarea' || tag === 'button') return false;
+
+  let target = el;
+
+  if (tag !== 'input' || (type !== 'checkbox' && type !== 'radio')) {
+    target = el.locator('input[type=checkbox], input[type=radio]');
+    if ((await target.count()) !== 1) return false;
+  }
+
+  if (value) {
+    await target.check(options);
+  } else {
+    await target.uncheck(options);
+  }
+
+  return true;
+}

package/src/field/native-date.ts

@@ -0,0 +1,62 @@
+import { isDate, isRange, type Range } from '@letsrunit/utils';
+import { formatDateForInput } from '../utils/date';
+import type { Loc, SetOptions, Value } from './types';
+
+async function setSingleDate({ el, tag, type }: Loc, value: Date, options?: SetOptions): Promise<boolean> {
+  let target = el;
+  let targetType = type;
+
+  if (tag !== 'input' || !type || !['date', 'datetime-local', 'month', 'week', 'time'].includes(type)) {
+    const inputs = el.locator(
+      '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 style = window.getComputedStyle(e);
+        return style.display !== 'none' && style.visibility !== 'hidden' && e.getAttribute('type') !== 'hidden';
+      });
+      if (isVisible) {
+        target = inputs;
+        targetType = (await target.getAttribute('type', options)) || null;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  if (!targetType) return false;
+
+  const val = formatDateForInput(value, targetType);
+  await target.fill(val, options);
+
+  return true;
+}
+
+async function setDateRange({ el, tag }: Loc, value: Range<Date>, options?: SetOptions): Promise<boolean> {
+  if (tag === 'input' || tag === 'select' || tag === 'textarea' || tag === 'button') return false;
+
+  const inputs = el.locator('input[type=date]');
+  if ((await inputs.count()) !== 2) return false;
+
+  const from = formatDateForInput(value.from, 'date');
+  const to = formatDateForInput(value.to, 'date');
+
+  await inputs.nth(0).fill(from, options);
+  await inputs.nth(1).fill(to, options);
+
+  return true;
+}
+
+export async function setNativeDate(loc: Loc, value: Value, options?: SetOptions): Promise<boolean> {
+  if (value instanceof Date) {
+    return await setSingleDate(loc, value, options);
+  }
+
+  if (isRange(value, isDate)) {
+    return await setDateRange(loc, value, options);
+  }
+
+  return false;
+}

package/src/field/native-input.ts

@@ -0,0 +1,17 @@
+import type { Loc, SetOptions, Value } from './types';
+
+export async function setNativeInput({ el, tag }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
+  if (tag !== 'input' && tag !== 'textarea') return false;
+
+  if (value === null) {
+    await el.clear(options);
+    return true;
+  }
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    await el.fill(String(value), options);
+    return true;
+  }
+
+  return false;
+}

package/src/field/native-select.ts

@@ -0,0 +1,75 @@
+import { isRange, type Scalar } from '@letsrunit/utils';
+import { diffArray } from '@letsrunit/utils/src/array';
+import type { Locator } from '@playwright/test';
+import type { Loc, SetOptions, Value } from './types';
+
+export async function clearSelect(el: Locator, opts?: SetOptions) {
+  const isMultiple = await el.evaluate((e) => (e as HTMLSelectElement).multiple, opts);
+  const options = await el.evaluate(
+    (e) =>
+      Array.from((e as HTMLSelectElement).options).map((o) => ({
+        value: o.value,
+        disabled: o.disabled,
+      })),
+    opts,
+  );
+
+  if (isMultiple) {
+    await el.selectOption([], opts);
+    return;
+  }
+
+  const empty = options.find((o) => o.value === '' && !o.disabled);
+  if (empty) {
+    await el.selectOption({ value: '' }, opts);
+    return;
+  }
+
+  const firstEnabled = options.find((o) => !o.disabled);
+  if (firstEnabled) {
+    await el.selectOption({ value: firstEnabled.value }, opts);
+  }
+}
+
+async function multiSelect(el: Locator, value: Scalar[], opts?: SetOptions) {
+  const isMultiple = await el.evaluate((e) => (e as HTMLSelectElement).multiple, opts);
+  if (!isMultiple) throw new Error('Select is not multiple');
+
+  const requested = value.map((v) => String(v));
+  const selected = await el.selectOption(requested, opts);
+
+  const missing = diffArray(selected, requested);
+  if (missing.length > 0) {
+    throw new Error(`Options not found in select: ${missing.join(', ')}`);
+  }
+}
+
+async function singleSelect(el: Locator, value: string, opts?: SetOptions) {
+  const result = await el.selectOption(value, opts);
+
+  if (result.length === 0) {
+    throw new Error(`Option "${value}" not found in select`);
+  }
+}
+
+export async function selectNative({ el, tag }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
+  if (tag !== 'select') return false;
+
+  if (value instanceof Date || isRange(value)) {
+    return false;
+  }
+
+  if (value === null) {
+    await clearSelect(el, options);
+    return true;
+  }
+
+  if (Array.isArray(value)) {
+    if (value.some((v) => v instanceof Date)) return false;
+    await multiSelect(el, value, options);
+    return true;
+  }
+
+  await singleSelect(el, String(value), options);
+  return true;
+}

package/src/field/otp.ts

@@ -0,0 +1,22 @@
+import type { Loc, SetOptions, Value } from './types';
+
+export async function setOtpValue({ el, tag }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
+  if (typeof value !== 'string') return false;
+  if (tag === 'input' || tag === 'select' || tag === 'button' || tag === 'textarea') return false;
+
+  const chars = value.replace(/\W/g, '').split('');
+  if (chars.length < 3 || chars.length > 8) return false;
+
+  // Find all text inputs as child of el
+  const inputs = await el.locator('input[type="text"], input:not([type])').all();
+
+  // Check if the number of input matches the number of characters. If not, return false.
+  if (inputs.length !== chars.length) return false;
+
+  // Fill out each input with one character.
+  for (let i = 0; i < chars.length; i++) {
+    await inputs[i].fill(chars[i], options);
+  }
+
+  return true;
+}

package/src/field/radio-group.ts

@@ -0,0 +1,27 @@
+import type { Loc, SetOptions, Value } from './types';
+
+export async function setRadioGroup(
+  { el }: Loc,
+  value: Value,
+  options?: SetOptions,
+): Promise<boolean> {
+  if (typeof value !== 'string' && typeof value !== 'number') return false;
+
+  const stringValue = String(value);
+  if (stringValue.includes('\n') || stringValue.includes('"')) return false;
+
+  const radio = el.locator(`input[type=radio][value="${stringValue}"]`);
+  if ((await radio.count()) === 1) {
+    await radio.check(options);
+    return true;
+  }
+
+  // Also try searching by label text if value doesn't match
+  const radioByLabel = el.getByLabel(String(value), { exact: true }).locator('input[type=radio]');
+  if ((await radioByLabel.count()) === 1) {
+    await radioByLabel.check(options);
+    return true;
+  }
+
+  return false;
+}

package/src/field/slider.ts

@@ -0,0 +1,132 @@
+import type { Locator } from '@playwright/test';
+import type { Loc, SetOptions, Value } from './types';
+
+export async function setSliderValue({ el, tag }: Loc, value: Value, options?: SetOptions): Promise<boolean> {
+  if (typeof value !== 'number') return false;
+  if (['input', 'select', 'button', 'textarea'].includes(tag)) return false;
+
+  const slider = await getSliderElement(el, options);
+  if (!slider) return false;
+
+  const { min, max, orientation, valuenow: initialValue } = await getSliderAttributes(slider, options);
+  if (value < min || value > max) {
+    throw new Error(`Value ${value} is out of range [${min}, ${max}]`);
+  }
+  if (initialValue === null) return false;
+  if (initialValue === value) return true;
+
+  const { centerX, centerY } = await prepareMouse(slider, options);
+  const page = slider.page();
+
+  try {
+    const ratio = await calculateRatio(slider, initialValue, value, centerX, centerY, orientation, options);
+    await seekValue(slider, initialValue, value, centerX, centerY, orientation, ratio, options);
+  } finally {
+    await page.mouse.up();
+  }
+
+  return true;
+}
+
+async function prepareMouse(slider: Locator, options?: SetOptions) {
+  await slider.scrollIntoViewIfNeeded(options);
+
+  const box = await slider.boundingBox(options);
+  if (!box) throw new Error('Slider has no bounding box');
+
+  // If height/width is 0, we use a small offset to ensure we hit the element's area
+  const centerX = box.x + (box.width || 10) / 2;
+  const centerY = box.y + (box.height || 10) / 2;
+  const page = slider.page();
+
+  await page.mouse.move(centerX, centerY);
+  await page.mouse.down();
+
+  return { centerX, centerY };
+}
+
+async function seekValue(
+  slider: Locator,
+  initialValue: number,
+  targetValue: number,
+  centerX: number,
+  centerY: number,
+  orientation: string,
+  ratio: number,
+  options?: SetOptions,
+) {
+  const page = slider.page();
+
+  for (let i = 0; i < 4; i++) {
+    const distance = (targetValue - initialValue) / ratio;
+    await moveMouse(page, centerX, centerY, orientation, distance);
+
+    const currentValAttr = await slider.getAttribute('aria-valuenow', options);
+    const currentVal = parseFloat(currentValAttr || '0');
+    if (currentVal === targetValue) break;
+
+    if (distance !== 0) {
+      const newRatio = (currentVal - initialValue) / distance;
+      if (newRatio !== 0) ratio = newRatio;
+    }
+  }
+}
+
+async function calculateRatio(
+  slider: Locator,
+  initialValue: number,
+  targetValue: number,
+  centerX: number,
+  centerY: number,
+  orientation: string,
+  options?: SetOptions,
+): Promise<number> {
+  const page = slider.page();
+  const testMove = targetValue > initialValue ? 20 : -20;
+  await moveMouse(page, centerX, centerY, orientation, testMove);
+
+  const valAfterMoveAttr = await slider.getAttribute('aria-valuenow', options);
+  const valAfterMove = parseFloat(valAfterMoveAttr || '0');
+  const diff = valAfterMove - initialValue;
+
+  if (diff === 0) {
+    throw new Error('Slider appears to be disabled or unresponsive');
+  }
+
+  return diff / testMove;
+}
+
+async function getSliderElement(el: Locator, options?: SetOptions): Promise<Locator | null> {
+  const role = await el.getAttribute('role', options).catch(() => null);
+  if (role === 'slider') return el;
+
+  const slider = el.getByRole('slider');
+  if ((await slider.count()) > 0) {
+    return slider.first();
+  }
+  return null;
+}
+
+async function getSliderAttributes(slider: Locator, options?: SetOptions) {
+  const [minStr, maxStr, orient, nowStr] = await Promise.all([
+    slider.getAttribute('aria-valuemin', options),
+    slider.getAttribute('aria-valuemax', options),
+    slider.getAttribute('aria-orientation', options),
+    slider.getAttribute('aria-valuenow', options),
+  ]);
+
+  return {
+    min: parseFloat(minStr || '0'),
+    max: parseFloat(maxStr || '100'),
+    orientation: orient || 'horizontal',
+    valuenow: nowStr !== null ? parseFloat(nowStr) : null,
+  };
+}
+
+async function moveMouse(page: any, centerX: number, centerY: number, orientation: string, distance: number) {
+  if (orientation === 'vertical') {
+    await page.mouse.move(centerX, centerY - distance);
+  } else {
+    await page.mouse.move(centerX + distance, centerY);
+  }
+}