Can we use react-devtools on headless browsers ?

[AdrienLemaire]

Use-case:
Running BackstopJS (a CSS regression test framework) from Docker to take screenshots of a dynamic React application from Puppeteer (Chrome headless node api).
We would like to take the screenshot of a modal window raised by the application after a user register using a facebook account that has no email associated (the modal window asks for the user password).

Since Facebook throws a new browser page to ask the user to authenticate, and it doesn't seem possible to access that page and auto-fill it from the test's onReadyScript, we thought about using the react devtools.

Manually, after opening the chrome plugin's javascript debugger window tab, we search for our component (not sure how to script this part), then going back to the console tab, we could simply execute:

$r.setState({promptEmail: true})

That would update our component to display the related modal window.

The problem is that the headless browser run by Backstopjs doesn't have the react-devtools plugin setup. Would it be possible to run the standalone react-devtools application from a docker image and fully script the whole operation so that we can modify components' state or props as needed before taking screenshots ?

[bvaughn]

I don't think this type of use case is something we have the bandwidth to support.

In general though, using DevTools to modify your components at runtime for testing purposes seems kind of flaky. I think it would be safer to use one of the existing integration testing frameworks to programmatically interact with your app's UI (rather than directly modifying the component props).