0

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>
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
frontEndNoob
  • 117
  • 1
  • 9
  • If data-attr="SuperComponent" is unique to that element on the page, it's as good as an ID. – JeffC Jan 16 '19 at 19:36
  • @JeffC of course unique element must have ID instead some data-attr, but question is not about it – frontEndNoob Jan 16 '19 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 Jan 16 '19 at 21:42

1 Answers1

-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

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
  • 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 Jan 16 '19 at 21:34
  • really, I don't believe that in react world isn't a simple way for convert Component name or Componeny Key to element ID – frontEndNoob Jan 16 '19 at 21:35