@pencil-agent/nano-pencil 2.0.0-beta.8 → 2.0.0

package/dist/extensions/builtin/browser/agent-workspace/domain-skills/expedia/automation.md

@@ -1,168 +1,168 @@
-# Expedia — Browser Automation
-
-Field-tested against expedia.co.in on 2026-04-27 using `browser-harness` CDP
-helpers (`goto`, `js`, `click`, `type_text`, `screenshot`).
-
----
-
-## TL;DR
-
-**Build your search via URL parameters, not the UI.** The date picker, destination
-autocomplete, and traveller widgets are fragile—coordinate clicks frequently
-dismiss them or mis-target. Encode everything you can into a `goto()` URL, then
-use JS clicks only for what the URL can't express (child ages, price filters).
-
----
-
-## Hotel Search URL Template
-
-```
-https://www.expedia.co.in/Hotel-Search?destination={DEST}&startDate={YYYY-MM-DD}&endDate={YYYY-MM-DD}&rooms={N}&adults={N}&children={N}&childrenAges={age1,age2,...}
-```
-
-Example — 2 adults, 2 children (ages 5 and 7), Tokyo, June 2026:
-
-```python
-goto("https://www.expedia.co.in/Hotel-Search?"
-     "destination=Central+Tokyo,+Tokyo+Prefecture&"
-     "startDate=2026-06-01&endDate=2026-06-07&"
-     "rooms=1&adults=2&children=2&childrenAges=5,7")
-```
-
-**Note:** `childrenAges` in the URL may not always populate the age dropdowns on
-the results page. Verify with a screenshot and set them via JS if needed.
-
----
-
-## Date Picker — DO NOT USE
-
-The calendar widget is extremely unreliable with coordinate-based clicks:
-
-- Clicking a date cell frequently **closes the entire picker** instead of
-  selecting the date.
-- The picker has month-navigation arrows that are tiny targets.
-- "Flexible dates" mode has a different DOM structure with pill-shaped month
-  selectors that also mis-fire.
-- Dozens of retry attempts across multiple strategies all failed.
-
-**Workaround:** Always pass dates via URL parameters (`startDate`, `endDate`).
-
----
-
-## Travellers Widget
-
-The travellers stepper panel works with JS `.click()` on the increment/decrement
-buttons.
-
-### Opening the panel
-
-```python
-js("""
-(()=>{
-  let btn = document.querySelector('button[data-testid="travelers-field-trigger"]')
-           || [...document.querySelectorAll('button')].find(b => b.textContent.includes('traveller'));
-  if(btn){ btn.click(); return 'opened'; }
-  return 'not found';
-})()
-""")
-```
-
-### Incrementing children count
-
-```python
-js("""
-(()=>{
-  let span = [...document.querySelectorAll('span')].find(s => s.textContent.trim() === 'Children');
-  if(!span) return 'no Children label';
-  let container = span.closest('div').parentElement;
-  let buttons = container.querySelectorAll('button');
-  let plus = buttons[buttons.length - 1];  // last button is "+"
-  plus.click();
-  return 'incremented';
-})()
-""")
-```
-
-### Setting child ages
-
-Child age dropdowns are `<select>` elements with `aria-label` like
-"Child 1 age", "Child 2 age", etc.
-
-```python
-js("""
-(()=>{
-  let selects = document.querySelectorAll('select');
-  // selects[0] = Child 1 age, selects[1] = Child 2 age, etc.
-  let setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
-  selects[0].value = '5';
-  selects[0].dispatchEvent(new Event('change', {bubbles:true}));
-  selects[1].value = '7';
-  selects[1].dispatchEvent(new Event('change', {bubbles:true}));
-  return 'ages set';
-})()
-""")
-```
-
-### Closing the panel
-
-```python
-js("""
-(()=>{
-  let btn = [...document.querySelectorAll('button')].find(b => b.textContent.trim() === 'Done');
-  if(btn){ btn.click(); return 'done'; }
-  return 'no Done button';
-})()
-""")
-```
-
----
-
-## Price Filter
-
-On the results page, the nightly-price filter has two text inputs and two range
-sliders.
-
-| Element | Selector |
-|---------|----------|
-| Min text input | `#price-min` |
-| Max text input | `#price-max` |
-| Min range slider | `input[type="range"][aria-label*="Minimum"]` |
-| Max range slider | `input[type="range"][aria-label*="Maximum"]` |
-
-### Setting max price
-
-The most reliable method is to click the input, select all, type the value, and
-press Enter:
-
-```python
-click(x, y)  # coordinates of #price-max
-js("document.getElementById('price-max').select()")
-type_text("20000")
-press_key("Enter")
-```
-
-Setting the value purely via JS (`dispatchEvent`) does trigger a re-search but
-coordinate-click + type is more reliable for actually applying the filter.
-
----
-
-## Key Lessons
-
-1. **URL-first strategy** — Encode destination, dates, room count, adults,
-   children, and child ages in the URL. Only use UI interaction for things the
-   URL cannot express.
-
-2. **JS `.click()` over coordinate clicks** — For buttons inside panels
-   (traveller stepper, Done), find elements by text/attribute and call `.click()`
-   in JS. Coordinate clicks on overlay panels are unreliable.
-
-3. **`dispatchEvent` with `{bubbles: true}`** — Required for React-controlled
-   inputs (selects, text fields). Without bubbling, React state won't update.
-
-4. **Wait after navigation** — After `goto()` or pressing Search, call
-   `wait_for_load()` + `time.sleep(3)` before interacting. Expedia loads
-   results asynchronously.
-
-5. **Indian locale** — `expedia.co.in` shows prices in ₹ (INR). The price
-   filter values include the ₹ symbol and commas in the text input but the
-   underlying range slider uses plain integers.
+# Expedia — Browser Automation
+
+Field-tested against expedia.co.in on 2026-04-27 using `browser-harness` CDP
+helpers (`goto`, `js`, `click`, `type_text`, `screenshot`).
+
+---
+
+## TL;DR
+
+**Build your search via URL parameters, not the UI.** The date picker, destination
+autocomplete, and traveller widgets are fragile—coordinate clicks frequently
+dismiss them or mis-target. Encode everything you can into a `goto()` URL, then
+use JS clicks only for what the URL can't express (child ages, price filters).
+
+---
+
+## Hotel Search URL Template
+
+```
+https://www.expedia.co.in/Hotel-Search?destination={DEST}&startDate={YYYY-MM-DD}&endDate={YYYY-MM-DD}&rooms={N}&adults={N}&children={N}&childrenAges={age1,age2,...}
+```
+
+Example — 2 adults, 2 children (ages 5 and 7), Tokyo, June 2026:
+
+```python
+goto("https://www.expedia.co.in/Hotel-Search?"
+     "destination=Central+Tokyo,+Tokyo+Prefecture&"
+     "startDate=2026-06-01&endDate=2026-06-07&"
+     "rooms=1&adults=2&children=2&childrenAges=5,7")
+```
+
+**Note:** `childrenAges` in the URL may not always populate the age dropdowns on
+the results page. Verify with a screenshot and set them via JS if needed.
+
+---
+
+## Date Picker — DO NOT USE
+
+The calendar widget is extremely unreliable with coordinate-based clicks:
+
+- Clicking a date cell frequently **closes the entire picker** instead of
+  selecting the date.
+- The picker has month-navigation arrows that are tiny targets.
+- "Flexible dates" mode has a different DOM structure with pill-shaped month
+  selectors that also mis-fire.
+- Dozens of retry attempts across multiple strategies all failed.
+
+**Workaround:** Always pass dates via URL parameters (`startDate`, `endDate`).
+
+---
+
+## Travellers Widget
+
+The travellers stepper panel works with JS `.click()` on the increment/decrement
+buttons.
+
+### Opening the panel
+
+```python
+js("""
+(()=>{
+  let btn = document.querySelector('button[data-testid="travelers-field-trigger"]')
+           || [...document.querySelectorAll('button')].find(b => b.textContent.includes('traveller'));
+  if(btn){ btn.click(); return 'opened'; }
+  return 'not found';
+})()
+""")
+```
+
+### Incrementing children count
+
+```python
+js("""
+(()=>{
+  let span = [...document.querySelectorAll('span')].find(s => s.textContent.trim() === 'Children');
+  if(!span) return 'no Children label';
+  let container = span.closest('div').parentElement;
+  let buttons = container.querySelectorAll('button');
+  let plus = buttons[buttons.length - 1];  // last button is "+"
+  plus.click();
+  return 'incremented';
+})()
+""")
+```
+
+### Setting child ages
+
+Child age dropdowns are `<select>` elements with `aria-label` like
+"Child 1 age", "Child 2 age", etc.
+
+```python
+js("""
+(()=>{
+  let selects = document.querySelectorAll('select');
+  // selects[0] = Child 1 age, selects[1] = Child 2 age, etc.
+  let setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
+  selects[0].value = '5';
+  selects[0].dispatchEvent(new Event('change', {bubbles:true}));
+  selects[1].value = '7';
+  selects[1].dispatchEvent(new Event('change', {bubbles:true}));
+  return 'ages set';
+})()
+""")
+```
+
+### Closing the panel
+
+```python
+js("""
+(()=>{
+  let btn = [...document.querySelectorAll('button')].find(b => b.textContent.trim() === 'Done');
+  if(btn){ btn.click(); return 'done'; }
+  return 'no Done button';
+})()
+""")
+```
+
+---
+
+## Price Filter
+
+On the results page, the nightly-price filter has two text inputs and two range
+sliders.
+
+| Element | Selector |
+|---------|----------|
+| Min text input | `#price-min` |
+| Max text input | `#price-max` |
+| Min range slider | `input[type="range"][aria-label*="Minimum"]` |
+| Max range slider | `input[type="range"][aria-label*="Maximum"]` |
+
+### Setting max price
+
+The most reliable method is to click the input, select all, type the value, and
+press Enter:
+
+```python
+click(x, y)  # coordinates of #price-max
+js("document.getElementById('price-max').select()")
+type_text("20000")
+press_key("Enter")
+```
+
+Setting the value purely via JS (`dispatchEvent`) does trigger a re-search but
+coordinate-click + type is more reliable for actually applying the filter.
+
+---
+
+## Key Lessons
+
+1. **URL-first strategy** — Encode destination, dates, room count, adults,
+   children, and child ages in the URL. Only use UI interaction for things the
+   URL cannot express.
+
+2. **JS `.click()` over coordinate clicks** — For buttons inside panels
+   (traveller stepper, Done), find elements by text/attribute and call `.click()`
+   in JS. Coordinate clicks on overlay panels are unreliable.
+
+3. **`dispatchEvent` with `{bubbles: true}`** — Required for React-controlled
+   inputs (selects, text fields). Without bubbling, React state won't update.
+
+4. **Wait after navigation** — After `goto()` or pressing Search, call
+   `wait_for_load()` + `time.sleep(3)` before interacting. Expedia loads
+   results asynchronously.
+
+5. **Indian locale** — `expedia.co.in` shows prices in ₹ (INR). The price
+   filter values include the ₹ symbol and commas in the text input but the
+   underlying range slider uses plain integers.