[Bug]: Strict mode violation fails with `TypeError: Cannot read properties of undefined (reading 'includes')` for an element inside a slotted web component

Chiusa
  • Qualcosa non va?
#43,701 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Una pull request collegata è già stata integrata.

  • #43705 di @lazerg — integrata
  • #43776 di @microsoft-playwright-automation — chiusa senza merge

Valutazione

Difficoltà
4/5
Tempo stimato
1-2 giorni
Idoneità per principianti
54/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
playwright, typescript
Ambito
frontend, testing-qa

Direzione di ricerca

Start in Playwright’s selector generation code around generateSelector, cssFallback, and makeStrict, identified by the stack trace; inspect the CSS selector engine behavior for shadow root and slotted elements. Reproduce with the linked minimal repository and run its npm test case. Done when the click reports a strict mode violation listing both matching elements instead of throwing a TypeError.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

needs-triage
Version

1.64.1

Steps to reproduce
  1. Clone https://github.com/triglian/playwright-strict-mode-slot-repro
  2. npm install
  3. npx playwright install chromium
  4. npm test
  5. The test bug: the strict mode violation fails with a TypeError fails. The click's error is TypeError: Cannot read properties of undefined (reading 'includes') instead of a strict mode violation. The two control: tests pass. Each control removes one condition the bug needs.
Expected behavior

The click fails with a strict mode violation that lists both matching elements, as it does in the two control tests.

Actual behavior

The click fails with a TypeError. The error does not say that the locator matched more than one element.

Error: locator.click: TypeError: Cannot read properties of undefined (reading 'includes')
    at parseSelectorString (<anonymous>:2004:17)
    at parseSelector (<anonymous>:1884:25)
    at InjectedScript.parseSelector (<anonymous>:7104:20)
    at makeStrict (<anonymous>:6312:43)
    at cssFallback (<anonymous>:6356:10)
    at generateSelectorFor (<anonymous>:6160:121)
    at generateSelector (<anonymous>:6092:22)
    at InjectedScript.generateSelectorSimple (<anonymous>:7115:12)
Additional context

The page structure is in the repository's README.

Found with a design system whose dropdown item renders its own list item in its shadow root and also slots in the list item the app passes. Both have the same classes and inner markup.

The strict mode violation message needs a selector for the parent of the second match (div.k). Its tag-name candidate is rejected (more than five divs before it), so cssFallback runs. cssFallback tells siblings apart with parentNode.children and querySelectorAll, which see only the light DOM children of x-host. The CSS engine's > also matches children of x-host's shadow root. So every path it tries finds the div.k in x-host's own x-item first, and the last line, return makeStrict(uniqueCSSSelector()!), calls parseSelector(undefined).

The same line threw this error in #13652 and #33922, from other causes. #34030 fixed the iframe case only.

Environment
System:
    OS: macOS 26.3
    CPU: (10) arm64 Apple M1 Max
    Memory: 7.38 GB / 64.00 GB
  Binaries:
    Node: 22.16.0 - ~/.local/share/mise/shims/node
    Yarn: 3.5.1 - ~/.local/share/mise/shims/yarn
    npm: 10.9.2 - ~/.local/share/mise/shims/npm
    pnpm: 8.10.0 - ~/.local/share/mise/shims/pnpm
  IDEs:
    VSCode: 1.143.1 - /usr/local/bin/code
    Cursor: 2.0.34 - /usr/local/bin/cursor
    Claude Code: 2.1.312 - ~/.local/bin/claude
  Languages:
    Bash: 5.2.37 - /opt/homebrew/bin/bash
  npmPackages:
    @playwright/test: 1.64.1 => 1.64.1
Lingua principale
TypeScript
Stelle
99.1k
Fork
6.8k
Merge medio
15h 58m
PR unite (30g)
302

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/playwright

Tutte le issue di microsoft/playwright

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.