Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#43,701 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@lazerg がすでに取り組んでいます。

2026年10月28日 から。

  • #43705 @lazerg による — オープン

評価

難易度
4/5
見積もり時間
1〜2日
初心者へのやさしさ
54/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
playwright, typescript
領域
frontend, testing-qa

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
TypeScript
スター
98.5k
フォーク
6.7k
平均マージ
16時間 10分
マージ済み PR（30日）
305

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

microsoft/playwright のほかの issue

microsoft/playwright の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。