@letsrunit/playwright 0.4.2 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@letsrunit/playwright",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "description": "Playwright extensions and utilities for letsrunit",
   "keywords": [
     "testing",
@@ -44,7 +44,7 @@
   },
   "packageManager": "yarn@4.10.3",
   "dependencies": {
-    "@letsrunit/utils": "0.4.2",
+    "@letsrunit/utils": "0.5.1",
     "@playwright/test": "^1.57.0",
     "case": "^1.6.3",
     "diff": "^8.0.3",

package/src/field/aria-select.ts

@@ -0,0 +1,33 @@
+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);
+  if (role !== 'combobox') return false;
+
+  const ariaControls = await el.getAttribute('aria-controls', options).catch(() => null);
+  if (!ariaControls) return false;
+
+  const ariaExpanded = await el.getAttribute('aria-expanded', options).catch(() => null);
+  if (ariaExpanded !== 'true') await el.click(options);
+
+  const stringValue = String(value);
+  const listbox = el.page().locator(`#${ariaControls}`);
+
+  // 1. By value attribute
+  const byValue = listbox.locator(`[role="option"][value="${stringValue}"]`);
+  if ((await byValue.count()) >= 1) {
+    await byValue.first().click(options);
+    return true;
+  }
+
+  // 2. By accessible name (case-insensitive)
+  const byName = listbox.getByRole('option', { name: stringValue });
+  if ((await byName.count()) >= 1) {
+    await byName.first().click(options);
+    return true;
+  }
+
+  return false;
+}

package/src/field/calendar.ts

@@ -8,8 +8,9 @@ type MonthYear = { month: number; year: number };
 
 async function getDialog(root: Locator, options?: SetOptions) {
   const role = await root.getAttribute('role', options).catch(() => null);
+  const hasPopup = await root.getAttribute('aria-haspopup', options).catch(() => null);
 
-  if (role !== 'combobox') return null;
+  if (role !== 'combobox' && !hasPopup) return null;
 
   const ariaControls = await root.getAttribute('aria-controls', options).catch(() => null);
   if (!ariaControls) return null;

package/src/field/index.ts

@@ -7,10 +7,12 @@ import { setDateTextInput } from './date-text-input';
 import { setNativeCheckbox } from './native-checkbox';
 import { setNativeDate } from './native-date';
 import { setNativeInput } from './native-input';
+import { selectAria } from './aria-select';
 import { selectNative } from './native-select';
 import { setOtpValue } from './otp';
 import { setRadioGroup } from './radio-group';
 import { setSliderValue } from './slider';
+import { setToggle } from './toggle';
 import type { Loc, SetOptions, Value } from './types';
 
 function toString(value: Value): string {
@@ -28,11 +30,13 @@ export async function setFieldValue(el: Locator, value: Value, options?: SetOpti
   const setValue = chain(
     // native
     selectNative,
+    selectAria,
     setNativeCheckbox,
     setRadioGroup,
     setNativeDate,
     setNativeInput,
     // aria / components
+    setToggle,
     setDateTextInput,
     setDateGroup,
     setCalendarDate,

package/src/field/radio-group.ts

@@ -10,18 +10,37 @@ export async function setRadioGroup(
   const stringValue = String(value);
   if (stringValue.includes('\n') || stringValue.includes('"')) return false;
 
+  // 1. Native: exact value attribute
   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]');
+  // 2. Native: by label text
+  const radioByLabel = el.getByLabel(stringValue, { exact: true }).locator('input[type=radio]');
   if ((await radioByLabel.count()) === 1) {
     await radioByLabel.check(options);
     return true;
   }
 
+  // 3. ARIA: exact value attribute
+  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);
+    if (ariaChecked !== 'true') await item.click(options);
+    return true;
+  }
+
+  // 4. ARIA: by label text
+  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);
+    if (ariaChecked !== 'true') await item.click(options);
+    return true;
+  }
+
   return false;
 }

package/src/field/slider.ts

@@ -18,13 +18,24 @@ export async function setSliderValue({ el, tag }: Loc, value: Value, options?: S
   const { centerX, centerY } = await prepareMouse(slider, options);
   const page = slider.page();
 
+  let unresponsive = false;
   try {
     const ratio = await calculateRatio(slider, initialValue, value, centerX, centerY, orientation, options);
     await seekValue(slider, initialValue, value, centerX, centerY, orientation, ratio, options);
+  } catch (e) {
+    if (e instanceof Error && e.message === 'Slider appears to be disabled or unresponsive') {
+      unresponsive = true;
+    } else {
+      throw e;
+    }
   } finally {
     await page.mouse.up();
   }
 
+  if (unresponsive) {
+    return setSliderByKeyboard(slider, initialValue, value, options);
+  }
+
   return true;
 }
 
@@ -130,3 +141,25 @@ async function moveMouse(page: any, centerX: number, centerY: number, orientatio
     await page.mouse.move(centerX + distance, centerY);
   }
 }
+
+async function setSliderByKeyboard(
+  slider: Locator,
+  initialValue: number,
+  targetValue: number,
+  options?: SetOptions,
+): Promise<boolean> {
+  const stepStr = await slider.getAttribute('aria-valuestep', options).catch(() => null);
+  const step = stepStr ? parseFloat(stepStr) : 1;
+  const presses = Math.round(Math.abs(targetValue - initialValue) / step);
+  const key = targetValue > initialValue ? 'ArrowRight' : 'ArrowLeft';
+
+  await slider.focus(options);
+  const page = slider.page();
+  for (let i = 0; i < presses; i++) {
+    await page.keyboard.press(key);
+  }
+
+  const nowStr = await slider.getAttribute('aria-valuenow', options).catch(() => null);
+  const reached = nowStr !== null && Math.abs(parseFloat(nowStr) - targetValue) < 0.001;
+  return reached;
+}

package/src/field/toggle.ts

@@ -0,0 +1,15 @@
+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);
+  if (role !== 'checkbox' && role !== 'switch') return false;
+
+  const ariaChecked = await el.getAttribute('aria-checked', options).catch(() => null);
+  const isChecked = ariaChecked === 'true';
+
+  if (Boolean(value) !== isChecked) await el.click(options);
+
+  return true;
+}