Best approach for React JS Application

11 posts, 0 answers
  1. Leon
    Leon avatar
    6 posts
    Member since:
    Jan 2016

    Posted 03 Mar Link to this post

    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

  2. Ivaylo
    Admin
    Ivaylo avatar
    750 posts

    Posted 07 Mar Link to this post

    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!
  3. Leon
    Leon avatar
    6 posts
    Member since:
    Jan 2016

    Posted 08 Mar in reply to Ivaylo Link to this post

    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!

  4. Ivaylo
    Admin
    Ivaylo avatar
    750 posts

    Posted 09 Mar Link to this post

    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!
  5. Leon
    Leon avatar
    6 posts
    Member since:
    Jan 2016

    Posted 09 Mar in reply to Ivaylo Link to this post

    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

  6. Ivaylo
    Admin
    Ivaylo avatar
    750 posts

    Posted 12 Mar Link to this post

    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!
  7. Leon
    Leon avatar
    6 posts
    Member since:
    Jan 2016

    Posted 22 Mar in reply to Ivaylo Link to this post

    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.  
  8. Leon
    Leon avatar
    6 posts
    Member since:
    Jan 2016

    Posted 22 Mar in reply to Leon Link to this post

    ^^^ 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

  9. Ivaylo
    Admin
    Ivaylo avatar
    750 posts

    Posted 24 Mar Link to this post

    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!
  10. Andy
    Andy avatar
    7 posts
    Member since:
    Mar 2012

    Posted 29 Mar in reply to Leon Link to this post

    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.

  11. Leon
    Leon avatar
    6 posts
    Member since:
    Jan 2016

    Posted 05 Apr in reply to Andy Link to this post

    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

Back to Top