Best approach for React JS Application

Hi Ivaylo,

We do not have an external option for the application we are building right now.  I worked with one of the developers here and we should be able to add in some data ID's to use as automated hooks.  I was just curious if anyone else had dealt with React JS at all.  I was told Facebook is built in this and played around with some recording and object identification there.  Its not very automation friendly either way.

I'll work with the new ID's here and see what I can get working.

Thanks!

Hello Ivaylo,

Ok I hit my first technical issue with the React JS drop down.  I have a few instances of this in my application.  One example is selecting a persons suffix (I,II,II, Esq.... etc.) which I think I have a solution for but i don't think it will work for all instances.  I was able to find an input div for the control in the DOM.  I enter the text I want and it narrows down the list.  However, when I have more than two items left in the list I need to select the element I want.  This is really difficult as I cannot see the elements presented in the dropdown list.  Can you take a look at the example in the link below and see what options I might have for a reliable solution for dropdown selection?

https://jedwatson.github.io/react-select/

You can use the first example on States.  Its same control we are using in our app.  Let me know what you think.

Thanks,

Leon

Ivaylo,

Bit of a late reply here but I was able to work with one of the Dev's here to add in an automation ID for the element group as a whole.  This allowed me to create a parent \ child based identification logic for an element in the object repository.  React is very dynamic and does not have and easy DOM to work with.  However I was able to create a solution.  If you go back to the link I posted you can give this a try...

1. Using Chrome hit F12 to bring up the developer tools
2. Use the highlighting tool and select the 'States' dropdown
3. You should see this highlighted in the Elements window
   • <div class="Select-value State-NSW" data-reactid=".0.0.1.1.0"><span class="Select-value-label" data-reactid=".0.0.1.1.0.1">New South Wales</span></div>
4. Move two levels up to this element:
5.  

^^^ Continued...

Move to this element an

1. Click the '...' on the left
2. On the bottom select Break On --> Subtree Modifications
3. Click the drop down again and the page processing will stop and allow the elements to be visible in the DOM

4. I then created an element in my elements repository with a TagName = div and InnerText = $(State)  (data driven for specific selection)

In the end I'm just clicking on the drop down element to get it to expand.  This exposes the selection items in the DOM.  Then, just create a generic div element that's data driven based on what selection you would like from the drop down.  Maybe this could help someone else working with React JS too.

Thanks,

Leon

Hi Leon, 

I tried your site with basic recording/playback in Chrome, just a codeless test of Test Studio using the following as my project find logic settings:

automationid

uid

TextContent

InnerText

name

id

...

After inspecting a few elements it looks like most are being recognized with the tagname and TextContent combination.

This should be nice and cross-browser compatible and can easily be data-driven to run the same test in multiple languages, codelessly.

During execution of the test the first try gave me many false positives and the test failed on step 12, but when I set Simulate Real Typing and Simulate Real Clicking on for each step it executed very well, and failed on 28 out of 29.  You can set Simulate Real actions at the project level, but keep in mind that it does not affect tests that were previously recorded, so you will need to re-record or just turn it on at the step property level.

I appreciate your sample site.  I have tested others, but this is much more complete than other samples.  Please let us know if we can use this for some examples within the QADK (SDK for QA's)

I'm attaching the test I created for you.

Hi Andy,

Thanks for the reply!  Feel free to use the site if you like.  We do not own it but rather have just used that implementation of the control in our application.

Thanks again,

Leon

Thanks for the queries

[quote]Leon said:

Hello,

Has anyone attempted any automation against a React JS based application?  Right now I do not have any ideal element identification.  I think the only thing that might work for now would be XPath although not ideal.  This seems to be a difficult scenario for the Selenium arena as well.  If you have any suggestions or ideas that would be great.

Thank you,

Leon

Hi 

I am working on automating web application built on React.js. There is a dropdown and i am unable to locate the drop down values as all the drop down values are not available directly under select in HTML page. Only the selected drop down value is displayed in the HTML page. Please refer the attached html snippet for clear understanding. Can anybody please help me.

Hello,
Has anyone attempted any automation against a React JS based application?  Right now I do not have any ideal element identification.( Buttons , Text fields, drop downs,etc)   I think the only thing that might work for now would be XPath although not ideal.  This seems to be a difficult scenario for the Selenium arena as well.  If you have any suggestions or ideas that would be great

Please help me.
Thank you,

Venkatesh

Hello Venkatesh,

Test Studio uses an intelligent scheme of element identification, which combines find expressions (using any of the attributes of the element on page) and image - you can read further details on the topic here. 

Moreover, you can adjust the attributes to be used in the elements recording process, and add your custom tags, so that you do not need to additionally modify the recorded elements find expressions. 

The images recorded for an element can also be used in various ways to enhance the test execution stability. You can even set the project to search the elements by image first, or only certain steps to use the image first. 

Test Studio offers a free 30 days trial which can be downloaded here. The free trial includes submitting support queries direct to the Support team of the tool. 

I hope this can be helpful for you.

Regards,
Elena
Progress Telerik