dillon1000/react

Commit

Use ReactDOM Test Selector API in DevTools e2e tests (#22978)

Builds on top of the existing Playwright tests to plug in the test selector API: https://gist.github.com/bvaughn/d3c8b8842faf2ac2439bb11773a19cec

My goals in doing this are to...
1. Experiment with the new API to see what works and what doesn't.
2. Add some test selector attributes (and remove DOM-structure based selectors).
3. Focus the tests on DevTools itself (rather than the test app).

I also took this opportunity to add a few new test cases– like named hooks, editable props, component search, and profiling- just to play around more with the Playwright API.

Relates to issue #22646
Browse files
Changed paths24 files
First-parent comparison
A packages/react-devtools-inline/__tests__/__e2e__/components.test.js AddedA packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js AddedD packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js DeletedA packages/react-devtools-inline/__tests__/__e2e__/list-app-utils.js AddedA packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js AddedM packages/react-devtools-inline/playwright.config.js ModifiedM packages/react-devtools-shared/src/devtools/views/Button.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/EditableName.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/Element.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js ModifiedM packages/react-devtools-shared/src/devtools/views/SearchInput.js ModifiedM packages/react-devtools-shared/src/devtools/views/TabBar.js ModifiedM packages/react-devtools-shared/src/devtools/views/Toggle.js ModifiedM packages/react-devtools-shell/src/e2e/app.js ModifiedA packages/react-devtools-shell/src/e2e/apps/ListApp.js AddedM packages/react-devtools-shell/src/e2e/devtools.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…