Web-component / shadow-DOM form gotchas hit on aa.com (Angular Material + adc-* design system)

[Turetsky]

Logging issues hit while automating a 9-passenger form on aa.com (Angular Material mat-dialog + a custom adc-* web-component design system). Filed at the user's request for FastLink improvement.

1. Native <select> options can't be picked by fast_click_xy / fast_do

Chrome renders an open <select>'s option list as an OS-native popup outside the page coordinate space, so CDP synthetic clicks land on the page beneath the popup and just dismiss it. fast_do correctly typed text inputs but reported every option target as "not visible on screen" and skipped them.

• Workaround that works: fast_select_option (kind: native-select) ✅, or fast_evaluate setting .value + dispatching events.
• Suggestion: have fast_do's planner route <select> targets through fast_select_option semantics instead of click-the-option.

2. fast_evaluate can't see elements in CLOSED shadow roots

The adc-input name fields and the dialog Save button live in closed shadow roots. A manual document.querySelectorAll + recursive el.shadowRoot walk returns nothing for them (closed roots aren't traversable), while fast_snapshot / fast_select_option / fast_fill (stable-id / a11y layer) DO reach them. Net effect: JS could set the light-DOM <select>s but names had to go via fast_do / coordinate typing.

• Worth documenting which tools pierce closed shadow vs not.

3. Biggest one: programmatic select changes don't satisfy validators across a shadow boundary unless events are composed: true

Setting .value + dispatchEvent(new Event('change', {bubbles:true})) updated single selects (gender, country, state) fine, but did NOT update a composite date-of-birth control (3 month/day/year selects feeding one Angular validator). The validator's (change) listener sits outside the selects' shadow root, and a non-composed event does not cross the shadow boundary, so the control stayed Please enter a valid date no matter the value.

• Fix: dispatch new Event('change', {bubbles:true, composed:true}) (and same for input) — instantly validated.
• Suggestion: fast_select_option / any JS-injection fill helper should dispatch composed:true events by default, so it works on web-component design systems with composite controls.

4. Minor

• fast_locate (vision) returns found:false when the target is scrolled out of the viewport — expected, but required scroll-then-relocate loops.
• devicePixelRatio scaling: screenshots are at DPR (1.25 here), so reading pixel coords off a screenshot for fast_click_xy needs /dpr. Common foot-gun; maybe note it or expose a screenshot-px→CSS helper.

Environment: Windows, Chrome via FastLink extension, aa.com passenger-details page.

[Turetsky]

Follow-up: hit a hard Gemini 429 "quota exceeded" on fast_scout / fast_locate mid-task (rate-limit / billing quota on the GEMINI_API_KEY). When this happens the vision tier is unusable and you must fall back to fast_screenshot + manual reading, which is much slower. Suggestions: (1) surface the 429 as a clear 'vision temporarily unavailable, falling back to DOM' signal rather than a raw error, (2) consider a backoff/retry or a secondary key, (3) document expected quota limits so long multi-step form sessions don't exhaust it.

[Turetsky]

Two more from the same session (aa.com contact/trip-info section):

4. fast_screenshot returned a STALE/cached frame repeatedly. After filling fields the tool kept returning byte-identical images (PNG 93662 bytes ×4, JPEG 136941 ×2) even though the DOM had changed and the page had scrolled. Made visual verification impossible — had to verify everything via fast_evaluate reading values + Angular ng-* classes. Suspect the capture is being cached or the CDP screenshot is silently failing and returning the last frame. Repro: rapid successive screenshots on a busy SPA after JS-driven DOM changes.

5. Web-component text inputs (<adc-text-input> wrapping an inner <input>) need focused trusted typing + blur to register in the Angular model — JS .value setter and even mis-targeted coordinate typing produce a 'phantom' value. Setting the inner input's .value (even with composed input/change events) populated input.value but left the host adc-text-input control ng-untouched ng-pristine (i.e. the form model stayed empty / field rendered blank). What worked: fast_click_xy on the field center to focus (focus chain = ADC-TEXT-INPUT#email > INPUT), then Ctrl+A, Delete, fast_type, then Tab to blur → host went ng-touched ng-dirty ng-valid. Suggestion: fast_fill should (a) match these by the host element's id/label (it couldn't find them by visible label OR by inner input name), and (b) drive value via focus+trusted-keystrokes+blur rather than .value, so web-component CVAs register.