Interactor inspector

[wKich]

Here are useful links:

• Playground https://codesandbox.io/s/hps8y. To open the inspector, execute __BIGTEST_TOGGLE_INSPECTOR__ global function
• Repo https://github.com/wKich/interactors-inspector

I want to discuss what I've made for the first try of Interactor Inspector and our next steps.

To clarify, Interactor Inspector is a part of Playground that allows user to inspect DOM elements, their properties, write simple action scripts, or experiment with writing custom interactions. It should give the user a brief look at how interactors work and their pros/cons. It also could be helpful to play around with new test scenarios.

I created a little app. You can inject a bundle of that app to your page application and see all elements that built-in interactors have matched. You can see where the target element is located, its props, and run some actions against them.

The current status still lacks an actions editor and the ability to write custom interactors. I'm going to finish that part this week and share the repo for review.

So I think that the matched interactors list with the actions editor is the core part of the inspector. It seems pretty useful, and it works. The main question what our next steps. And where/how we'd like to integrate it.

I suggest we reuse the Inspector's code in the Storybook integration. We could create a browser extension that allows users to inspect any website (I don't know how it should work for mobile). It could be a part of the BigTest package as a pre-built entry point for webpack/rollup.

We can create a playground on the docs page, but I don't think that it will be helpful. We can't simply load external URLs in an iframe and inject inspector because of CORS and CSP. The only way to do it is how QA Wolf works. They run headless chrome as a backend service and forward rendered imaged and user actions to/from a client's browser.

[wKich]

In the future, we would like to extend inspector to lint interactable elements if some of them are unreachable.

[taras]

@wKich what do think is the smallest usable integration with Storybook that we could do?

[wKich]

I think it could be just the inspector.

[taras]

Can you describe basic set of features that the inspector allows?

For example,

• Show all interactors on the page
• Hover over element and show which interactor it matches

...

Something like that would be helpful to define the scope for "just the inspector"

[wKich]

Oh, you mean that.

In this case, the core functionality is the only show the list of matched interactors.

Later we can add:

• highlighting the currently selected element
• addon's option to describe custom interactors
• actions editor

Btw, should we discuss storybook integration here?

[wKich]

Highlighting should be easy to implement, so that might be part of the minimal set.

[wKich]

Here is a little demo with the actions editor

Creevey.-.Google.Chrome.2021-02-23.23-47-36.mp4

[wKich]

Created repo with source code of inspector PoC https://github.com/wKich/interactors-inspector

[wKich]

Added playground link https://codesandbox.io/s/hps8y
Execute __BIGTEST_TOGGLE_INSPECTOR__ global function to show the inspector