Use ReactDOM Test Selector API in DevTools e2e tests #22978

bvaughn · 2021-12-16T20:56:55Z

Builds on top of the existing Playwright tests to plug in the test selector API.

My goals in doing this are to...

Experiment with the new API to see what works and what doesn't.
Add some test selector attributes (and remove DOM-structure based selectors).
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 #22646

The thing I'm least happy with about this PR is that the selectors lean pretty heavily on data-testname and innerText attributes (which is something we could do with other testing frameworks). The createComponentSelector 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?

bvaughn · 2021-12-16T21:00:22Z

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -132,9 +132,10 @@ export default function Element({data, index, style}: Props) {
      className={className}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
-      onMouseDown={handleMouseDown}
+      onClick={handleClick}


This change made it so e2e tests could select a row (element) and then click on it to inspect props.

Can e2e tests not simulate mouse down?

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

bvaughn · 2021-12-16T21:04:36Z

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 value doesn't cause a change event to fire, and Playwright/Puppeteer don't provide any helper methods for typing that are element-based. (They're all selector based.) So the only way (I can think of) to make the two play together would be to do something hacky like:

Select the element using ReactDOM
Add a unique ID
Pass that ID to Playwright's fill method to type into the field

This seems like a pretty rough edge though.

akgupta0777 · 2021-12-17T02:35:57Z

I tried playwright experimental react selectors to achieve filling and clicking options on react components. React selectors just need component name.
Example if app contains input component.
Then you can do page.fill('_react=input',SOME_VALUE)

But unfortunately this feature of playwright didn't work on apps with iframes.

packages/react-devtools-shell/src/e2e/apps/ListApp.js

packages/react-devtools-shell/src/e2e/app.js

Amir-Alipour

great

akgupta0777

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

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.

lunaruan · 2021-12-21T16:39:56Z

packages/react-devtools-shell/src/e2e/apps/ListApp.js

+ * @flow
+ */
+
+import * as React from 'react';


No new JSX transform? 🥺

We should update the shell for this! Wanna do it in a follow up PR?

lunaruan · 2021-12-21T16:45:39Z

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -132,9 +132,10 @@ export default function Element({data, index, style}: Props) {
      className={className}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
-      onMouseDown={handleMouseDown}
+      onClick={handleClick}


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

bvaughn requested review from jstejada and lunaruan December 16, 2021 20:56

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Dec 16, 2021

bvaughn commented Dec 16, 2021

View reviewed changes

bvaughn mentioned this pull request Dec 16, 2021

Added E2E test for ParseHookNames #22868

Closed

bvaughn commented Dec 16, 2021

View reviewed changes

packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js Outdated Show resolved Hide resolved

Amir-Alipour reviewed Dec 17, 2021

View reviewed changes

packages/react-devtools-shell/src/e2e/apps/ListApp.js Show resolved Hide resolved

Amir-Alipour reviewed Dec 17, 2021

View reviewed changes

packages/react-devtools-shell/src/e2e/app.js Show resolved Hide resolved

Amir-Alipour reviewed Dec 17, 2021

View reviewed changes

akgupta0777 reviewed Dec 17, 2021

View reviewed changes

bvaughn force-pushed the devtools-e2e-tests branch 5 times, most recently from 5ffeb8d to 2970efc Compare December 20, 2021 14:11

bvaughn force-pushed the devtools-e2e-tests branch from 2970efc to 809aeba Compare December 20, 2021 14:12

lunaruan approved these changes Dec 21, 2021

View reviewed changes

bvaughn merged commit a4ead70 into facebook:main Dec 21, 2021

bvaughn deleted the devtools-e2e-tests branch December 21, 2021 16:58

hoxyq mentioned this pull request Mar 7, 2024

fix[devtools/e2e]: fixed source inspection in e2e tests #28518

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use ReactDOM Test Selector API in DevTools e2e tests #22978

Use ReactDOM Test Selector API in DevTools e2e tests #22978

bvaughn commented Dec 16, 2021 •

edited

Loading

bvaughn Dec 16, 2021

lunaruan Dec 21, 2021

bvaughn Dec 21, 2021

bvaughn commented Dec 16, 2021

akgupta0777 commented Dec 17, 2021

Amir-Alipour left a comment

akgupta0777 left a comment •

edited

Loading

lunaruan Dec 21, 2021

bvaughn Dec 21, 2021

lunaruan Dec 21, 2021

Use ReactDOM Test Selector API in DevTools e2e tests #22978

Use ReactDOM Test Selector API in DevTools e2e tests #22978

Conversation

bvaughn commented Dec 16, 2021 • edited Loading

bvaughn Dec 16, 2021

Choose a reason for hiding this comment

lunaruan Dec 21, 2021

Choose a reason for hiding this comment

bvaughn Dec 21, 2021

Choose a reason for hiding this comment

bvaughn commented Dec 16, 2021

akgupta0777 commented Dec 17, 2021

Amir-Alipour left a comment

Choose a reason for hiding this comment

akgupta0777 left a comment • edited Loading

Choose a reason for hiding this comment

lunaruan Dec 21, 2021

Choose a reason for hiding this comment

bvaughn Dec 21, 2021

Choose a reason for hiding this comment

lunaruan Dec 21, 2021

Choose a reason for hiding this comment

bvaughn commented Dec 16, 2021 •

edited

Loading

akgupta0777 left a comment •

edited

Loading