annotate-react-dom

Annotates DOM nodes with their React component name to make them targetable by CSS selector, e.x. document.querySelector("[react=MyComponent]").

Useful for Selenium testing, etc. Not recommended for use in production. Currently known to work with React 15.

Install with yarn or npm:

yarn add --dev annotate-react-dom

npm install -D annotate-react-dom

Usage

Annotate an entire tree of DOM nodes:

 
// defaults the root node to `document`
annotateReactNode();
 
// you can provide another node
annotateReactNode(document.getElementById("foo"));
 
// can also provide an options object with an `attribute` name (default is `react`)
annotateReactNode(document, { attribute: "_react_" });

Annotate a single node (typically you'd use one of the other higher-level functions instead)

annotateReactNode(document.body.firstChild);

Annotate a tree of nodes, and keep updated when new nodes are added. Uses MutationObserver and operates asynchronously.

installAsynchronousAnnotator(); 

Annotate a tree of nodes, and keep updated when new nodes are added. Uses (deprecated) mutation events and operates synchronously.

This is also demonstrating you can pass a root node, as well as an options object containing an attribute name.

installSynchronousAnnotator();

Example

require("annotate-react-dom").installSynchronousAnnotator();
 
const Hello = () =>
  <div>hello</div>
 
ReactDOM.render(<Hello />, document.body.firstChild);
 
alert(document.querySelector("[react=MyComponent]").textContent);

Notes

The [react=ComponentName] syntax is a valid standard CSS selector, but you may want to add nicer syntax such as a psuedo-class :react(ComponentName).

You can do this with a CSS parser or simple regular expression:

selector.replace(/:react\((\w+)\)/, "[react=$1]")