Simple way to find html-element which has been rendered by React

Question

For fast searching elements by Selenium, I think it must be a simple way to set some attributes to html-elements, for example: transform React Component Key to data-attribute (if it is possible).

Of course I can writing id or data-attributes to my span, div and whatever in my components, but I can't do it with components of 3d-party libraries - this components may haven't props like "id", and I will have to wrap this components and then find they by tag or class...

Or maybe is plugin for webpack to set data-attributes to elements with component's names.

However, how you find elements in your react app render?

I think it's not a good idea find elements by class or tags

key transform like this:

    <MyComponent key="SuperComponent" />
    ...
    <div data-attr="SuperComponent">...</div>

or autoset attributes of component name like this:

    <MySuperComponent />
    ...
    <div data-attr="MySuperComponent">...</div>

If data-attr="SuperComponent" is unique to that element on the page, it's as good as an ID. — JeffC
– JeffC, Commented Jan 16, 2019 at 19:36
@JeffC of course unique element must have ID instead some data-attr, but question is not about it — frontEndNoob
– frontEndNoob, Commented Jan 16, 2019 at 21:39
No, you don't have to have an ID to uniquely locate an element on a page. My question was if the attribute/value data-attr="SuperComponent" was unique on the page. If so, you can use that instead of putting IDs on everything. For example, run $$("div[data-attr='SuperComponent']") in the dev console and see if it returns only 1 element. If it does, then you have a unique locator. — JeffC
– JeffC, Commented Jan 16, 2019 at 21:42

undetected Selenium · Accepted Answer · 2019-01-16 20:09:50Z

-1

From "Test Automation through Selenium" perspective it hardly matters if the HTML consists of id or data-attributes. While working with Selenium tests are written with the help of any effective <tag> and the associated attributes. However there is a preferred list of Locator Strategies as follows:

Locator Strategies

How to find elements in react app render?

The AUT (Application Under Test) being ReactJS based of-coarse the element will be having dynamic attributes. Locator Strategies can also be dynamic. You can find an example usage of Dynamic Locator Strategies in the discussion How to locate a button with a dynamicID

Finally, while Test Automation the fast moving WebDriver instance will be needed to be synchronized with the lagging browser. You can find a relevant discussion in Do we have any generic funtion to check if page has completely loaded in Selenium

answered Jan 16, 2019 at 20:09

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

frontEndNoob Over a year ago

okay, I can use id for every tested element, but how to set id's (handle writing it's not a solution, we need automate everything :) )

frontEndNoob Over a year ago

really, I don't believe that in react world isn't a simple way for convert Component name or Componeny Key to element ID

Collectives™ on Stack Overflow

Simple way to find html-element which has been rendered by React

1 Answer 1

How to find elements in react app render?

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

How to find elements in react app render?

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related