-
Notifications
You must be signed in to change notification settings - Fork 46.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use ReactDOM Test Selector API in DevTools e2e tests #22978
Conversation
@@ -132,9 +132,10 @@ export default function Element({data, index, style}: Props) { | |||
className={className} | |||
onMouseEnter={handleMouseEnter} | |||
onMouseLeave={handleMouseLeave} | |||
onMouseDown={handleMouseDown} | |||
onClick={handleClick} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This change made it so e2e tests could select a row (element) and then click on it to inspect props.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can e2e tests not simulate mouse down?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can simulate a click by calling element.click()
but to simulate a mouse-down I'd have to make a fake event and dispatch it etc. Seems dirtier :D
packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
Outdated
Show resolved
Hide resolved
Note that some things are more awkward than I wish they were. For example, the test selector API lets us get a handle on the Components search input, but programmatically setting its
This seems like a pretty rough edge though. |
I tried playwright experimental react selectors to achieve filling and clicking options on react components. React selectors just need component name. But unfortunately this feature of playwright didn't work on apps with iframes. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
great
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like I have to read the whole gist properly to understand how it works. I have left some questions and thoughts for you to answer😄
packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
Outdated
Show resolved
Hide resolved
packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
Outdated
Show resolved
Hide resolved
packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
Outdated
Show resolved
Hide resolved
packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
Outdated
Show resolved
Hide resolved
5ffeb8d
to
2970efc
Compare
Builds on top of the existing Playwright tests to plug in the test selector API. 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 types like named hooks, component search, and profiler– just to play around with the Playwright API.
2970efc
to
809aeba
Compare
* @flow | ||
*/ | ||
|
||
import * as React from 'react'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No new JSX transform? 🥺
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should update the shell for this! Wanna do it in a follow up PR?
@@ -132,9 +132,10 @@ export default function Element({data, index, style}: Props) { | |||
className={className} | |||
onMouseEnter={handleMouseEnter} | |||
onMouseLeave={handleMouseLeave} | |||
onMouseDown={handleMouseDown} | |||
onClick={handleClick} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can e2e tests not simulate mouse down?
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 facebook#22646
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 facebook#22646
Builds on top of the existing Playwright tests to plug in the test selector API.
My goals in doing this are to...
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 #22646
The thing I'm least happy with about this PR is that the selectors lean pretty heavily on
data-testname
andinnerText
attributes (which is something we could do with other testing frameworks). ThecreateComponentSelector
selector would be particularly interesting to use, but how do we access the (same) function component type rendered by React? Probably worth refactoring and exploring this further with a future PR, but at least this one gives us some starting point?