Devtools make Playwright testing more difficult

TanStack Devtools version

0.9.2

Framework/Library version

React v19.2

Describe the bug and the steps to reproduce it

We just recently upgraded from using @tanstack/react-query-devtools and @tanstack/react-router-devtools to integrating them into the new @tanstack/react-devtools. However, this upgrade started to fail our Playwright E2E tests that did selections for IDs of items since they also show up in the query devtools when using defaultOpen: true. This lead us on a bit of a goose chase before realizing it was the devtools getting selected. This is obviously only a problem when doing tests locally with the devtools enables, but it is something we do quite often. For now setting defaultOpen: false on all plugins work, but it feels like a sad workaround. display: none on the #tanstack_devtools also work, but that breaks opening it without even more nasty hacks.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

N/A

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Yes, I think I know how to fix it and will discuss it in the comments of this issue

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

まず、TanStack Devtools 0.9.2、React 19.2、Playwright、および defaultOpen: true に設定した query devtools で問題を再現します。devtools を有効にした場合と非表示にした場合で Playwright の選択結果を比較します。アプリケーション ID 用のセレクターが devtools のコンテンツを選択しなくなり、devtools が引き続き使用可能であれば完了です。