This is a migrated thread and some comments may be shown as answers.

Best approach for React JS Application

15 Answers 292 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Leon
Top achievements
Rank 1
Leon asked on 03 Mar 2016, 07:56 PM

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

15 Answers, 1 is accepted

Sort by
0
Ivaylo
Telerik team
answered on 07 Mar 2016, 09:20 AM
Hello Leon,

We have not tried automating an ReactJS application, if you can provide us with access to a public demo application we will be happy to take a look and see what can be done and what might be the bottlenecks.

Regards,
Ivaylo
Telerik
 
The New Release of Telerik Test Studio Is Here! Download, install,
and send us your feedback!
0
Leon
Top achievements
Rank 1
answered on 08 Mar 2016, 03:58 PM

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!

0
Ivaylo
Telerik team
answered on 09 Mar 2016, 07:23 AM
Hello Leon,

Sure, take your time playing around with the application. If you have the option to use ID's and they are unique for every element this makes the automation task much easier for you.

If you face a specific issue that we can take a look please provide more information and we will be happy to assist.

Regards,
Ivaylo
Telerik
 
The New Release of Telerik Test Studio Is Here! Download, install,
and send us your feedback!
1
Leon
Top achievements
Rank 1
answered on 09 Mar 2016, 03:37 PM

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

0
Ivaylo
Telerik team
answered on 12 Mar 2016, 07:29 AM
Hеllo Leon,

I was expecting the application and especially the dropdown list. Automating this combo will be tremendous task, and this is not for Test Studio only, but for any automation tool. In order to automate this a coded approach should be used. However I am even not able to inspect an item from the dropdown using a browser. This way I cannot get any of the elements from the dropdown so I can build a coded step. I cannot predict how this will behave even if I am able to do the code.

Thank you for your understanding.

Regards,
Ivaylo
Telerik
 
The New Release of Telerik Test Studio Is Here! Download, install,
and send us your feedback!
0
Leon
Top achievements
Rank 1
answered on 22 Mar 2016, 02:42 PM

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.  
0
Leon
Top achievements
Rank 1
answered on 22 Mar 2016, 03:00 PM

^^^ Continued...

Move to this element an

<div class="Select is-searchable has-value" data-reactid=".0.0.1">

  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

<div class="Select-menu-outer" data-reactid=".0.0.1.2"><span style="line-height: 1.5;"><div class="Select-menu" data-reactid=".0.0.1.2.0"></span><span style="line-height: 1.5;"><div class="Select-option State-ACT" data-reactid=".0.0.1.2.0.$option-0-australian-capital-territory">Australian Capital Territory</div><div class="Select-option is-selected is-focused State-NSW" data-reactid=".0.0.1.2.0.$option-1-new-south-wales">New South Wales</div><div class="Select-option State-Vic" data-reactid=".0.0.1.2.0.$option-2-victoria">Victoria</div><div class="Select-option State-Qld" data-reactid=".0.0.1.2.0.$option-3-queensland">Queensland</div><div class="Select-option State-WA" data-reactid=".0.0.1.2.0.$option-4-western-australia">Western Australia</div><div class="Select-option State-SA" data-reactid=".0.0.1.2.0.$option-5-south-australia">South Australia</div><div class="Select-option State-Tas" data-reactid=".0.0.1.2.0.$option-6-tasmania">Tasmania</div><div class="Select-option State-NT" data-reactid=".0.0.1.2.0.$option-7-northern-territory">Northern Territory</div></div></div></span>

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

0
Ivaylo
Telerik team
answered on 24 Mar 2016, 11:21 AM
Hеllo Leon,

Thank you for sharing this in a public forum.
Yes I have investigated a bit the React JS application just out for curiosity since I am sure you will not be the first customer asking for support of React JS. What I meant by not able to inspect an element is that it cannot be done so easy as in a standard html application, which is hard to work with Test Studio.

Regards,
Ivaylo
Telerik
 
The New Release of Telerik Test Studio Is Here! Download, install,
and send us your feedback!
0
Andy
Top achievements
Rank 1
answered on 29 Mar 2016, 10:18 PM

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.

0
Leon
Top achievements
Rank 1
answered on 05 Apr 2016, 08:05 PM

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

0
reactjs
Top achievements
Rank 1
answered on 07 Jun 2018, 01:26 PM

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

[/quote]
0
Harish
Top achievements
Rank 1
answered on 29 Nov 2018, 01:11 PM

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.

0
Elena
Telerik team
answered on 04 Dec 2018, 11:11 AM
Hello Harish,

One reason for the this behavior could be if the dropdown values appear dynamically in the DOM tree once the dropdown is opened. If so, you will need to trigger the appearance of the dropdown and then locate the option you need to select. Basically the test should look similar to this: 
1. Click on the dropdown (meaning the element which opens the dropdown). 
2. Wait for the option to select to exist in the DOM tree.
3. Click on the desired option. 

Based on the DOM tree snippet I suspect you are automating an input with multi-select dropdown so you need to perform the above steps few times until all desired values are selected. 

Additionally, another approach could be possible depending on what is nested under the div element with class="Select-input". If the listed select options are available under that div, then these are available in the DOM tree and you should be able to locate them using chained find expression

I hope the above helps. If you will need further assistance however, please consider providing a sample web application with the same control implemented, to demonstrate what the exact scenario is. This will help me investigate for concrete solutions on our side.

Regards,
Elena Tsvetkova
Progress Telerik
 
The New Release of Telerik Test Studio Is Here! Download, install,
and send us your feedback!
0
venkatesh
Top achievements
Rank 1
answered on 21 Jul 2020, 05:46 PM

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

0
Elena
Telerik team
answered on 23 Jul 2020, 08:56 AM

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

Tags
General Discussions
Asked by
Leon
Top achievements
Rank 1
Answers by
Ivaylo
Telerik team
Leon
Top achievements
Rank 1
Andy
Top achievements
Rank 1
reactjs
Top achievements
Rank 1
Harish
Top achievements
Rank 1
Elena
Telerik team
venkatesh
Top achievements
Rank 1
Share this question
or