TestComplete and ReactJS
Does TestComplete support ReactJS?
Forum Discussion
Hi,
Yes, TestComplete supports ReactJS as any other jscript library.
The problem with ReactJS (and Angular, for example) is that they generate html markup without any usable identifiers. So you will have fun trying to identify this or that element on the page. But this is irrelevant to TestComplete because you will have exactly the same fun with Selenium, Appium, etc.
There's no specific support documented for ReactJS... however, it is a JavaScript control library and, as far as I know, most such libraries work very well with TC. You may need to do a little bit more work to interact with specific control types (working through native methods, properties and such), but, for the most part, most web controls are easily accessible in the TC object browser.
Hi Alex-FCAL,
Did you finally use TestComplete for your React Apps?
I'm currently evaluating TC as a possible automation tool for our react apps, and I'd be interested to hear your experience.
One thing I see already during my evaluation is that any graphs, charts etc in the app (and our apps have lots of these) are not recognised as any special type of object in TC. Only a node with ObjectType SVG for the image.
I mean, its not like there is some sort of e.g. bar chart object like I see for button or text box controls.
I'm guessing this is due to how React works rather than a deficiency in TC (would be nice to have this confirmed).
I guess this means the only way to verify these components is by image checkpoints, which makes me somewhat nervous regarding long-term maintainability of test suites.
Regards,
Paul
Hi Paul,
Yes, TestComplete supports ReactJS like any other library that produces html page. Great description of this: https://community.smartbear.com/t5/TestComplete-Functional-Web/TestComplete-9-3-Does-it-support-kendoUI/m-p/81168#M17730
The problem with web pages created using React and/or Angular libraries is that in 99% of cases developers do not provide unique and stable identifiers for web elements. This is the actual problem that significantly complicates automated interaction with such web pages regardless of the test automation tool been used.
TestComplete 12.60 and higher provides improved support for this problem via the Custom Attributes functionality (https://support.smartbear.com/testcomplete/docs/app-testing/web/general/object-identification/using-custom-attributes.html), but the best solution to this problem is to make an agreement with Development so that they provide unique and stable identifiers (IDs, not custom attributes) for all web elements that your tests interact with.
Your problem with SVG is not related to React, but to the fact that anything displayed on SVG's canvas is generated as pure graphics primitives via script code on the page, but not as some graphic objects. Again, this problem is not TestComplete's specific and exists for any test tool and any web browser.
There are two ways to proceed with SVG web elements:
a) You may consider image comparison if the only thing that you need is to verify that the generated graphics matches expected master one; (Image comparison will require proper actions in test and may appear to be not as reliable as you would like it to be, but might work.)
b) Talk to your developers and ask them to let you know what data structures and script functions on the page you may use in your test code in order to verify, for example, that correct data were used to build SVG image.
Thanks Alex, very helpful reply :smileyhappy:
