Hello,
Does katalon studio support react.js web applications?
Using selenium web driver we are finding it challenging to identify unique locators. Our application is built on react.js and was wondering if katalon studio supports react.js applications.
Thanks in advance
4 Likes
Will you be adding any new convenient keywords for working with React-based web apps?
I also would like to know if you support ReactJS applications. I’m having trouble getting my initial tests to work.
Ravindranath Manthena said:
Hello,
Does katalon studio support react.js web applications?
Using selenium web driver we are finding it challenging to identify unique locators. Our application is built on react.js and was wondering if katalon studio supports react.js applications.
Thanks in advance
Hello Dave,
Do you find any solution to identify table values which built on react.js? As I also have the same trouble. If you have good solution, appreciate that you can share here. Thanks a lot!
Currently our organization is also having the requirement of testing react.js web applications. Please let us know if you can support this. Thanks
I was interested in this question, though I do not have a React.js application to test myself.
I have made a demo project which tests a React.js-powered application using Katalon Studio. The project is published on GitHub:
I could develop a test for React.js-base application with Katalon Studio.
However I think it is NOT appropriate to say that Katalon Studio supports react.js web application. Katalon Studio looks at the Document Object Model of a target web page, that’s all. Any DOM can be tested by Katalon. Katalon Studio is not concerned about how DOM is constructed by which JavaScript frameworks such as jQuery, Angular, React or Adobe Experience Manager.
I have found that testing a react.js appliation is a difficult task. I think that React.js-powered application’s DOM is complexed and opinionated (it rarely use id attributes with static values). Developing a test for it requires enough knowledge about HTML DOM, Browser’s DevTool, XPath, CSS Selectors. I think Katalon’s Recorder and Spy does not help much.
4 Likes
I agree. I’m currently trying to test a table with Katalon that was built with react. Only hurdle I’m really running into is that the @id of the table changes every new time I load the page. React Developer Tool (google chrome extension) is pretty handy to get a better idea of how the page is built, but still doesn’t help my issue.
Perhaps I can make the program can read and set new id every time, and then use x-path as usual to execute. Not sure the smoothest path here. Any insight is appreciated.
Everything you guys need to test your react-based application(s) is contained in Kazurayam’s last paragraph:
Developing a test for it requires enough knowledge about HTML DOM,
Browser’s DevTool, XPath, CSS Selectors. I think Katalon’s Recorder and
Spy does not help much.
I would add this: The Spy tool/Recorder is not your friend (most certainly not with a react-type page). Learn some CSS or learn some XPATH and build your own Test Object(s) to keep a clean and manageable Object Repository.
If the IDs are moving targets, simply don’t use them. Target something else using CSS/Xpath and the “fixed” structure of the DOM.
1 Like
I found a presentation slide titled “Happly Life with React.js and Selenium” (it is not in English, sorry). It told me that:
- Selenium is all about real DOM of HTML
- React.js promotes its concept called VirtualDOM while hiding the real DOM behind.
There is a conceptual gap between React.js and Selenium.
I could easily see in the React.js Tutorial that id attribute is NOT promoted to be used in React.js. Therefore the DOM of a page generated by React.js looks like a climbing wall without holds for Selenium.
If we want to test React.js-powered pages using Selenium-based tools, including Katalon Studio, the web page developers and testers should compromise in order to fill the conceptual gap. Testers should call for a meeting with developers. Testers should ask developers to put some holds (id, class, data-xxx attributes with static value) on react-based HTMLs. This is what the above slide told me.
Some people are doing this compromization. For example, see the following code snippet from a StackOverflow page.
import Dropdown from 'components/Dropdown';
class Anish extends React.Component {
render() {
return (
<div>
<div>Value Selected: {this.props.selectedDropdownValue}</div>
<label htmlFor={'dropdownId1'}>Sort by: </label>
<Dropdown id="dropdownId1"
options={[
{ key: '', display: 'Please select a value' },
{ key: 'NJ', display: 'New Jersey' },
{ key: 'NY', display: 'New York' },
]}
onChange={this.props.onSetDropdownValue}
/>
</div>
);
}
}
Anish.propTypes = {
selectedDropdownValue: PropTypes.string,
onSetDropdownValue: PropTypes.func.isRequired,
};
Anish.defaultProps = {
selectedDropdownValue: '',
};
export default Anish;
You can see
id="dropdownId1"
there. This seems to be, though I am not very sure, an artificial climbing hold made by developer on the wall (DOM of HTML) to make the page testable with Selenium.
2 Likes
kazurayam said:
If we want to test React.js-powered pages using Selenium-based tools, including Katalon Studio, the web page developers and testers should compromise in order to fill the conceptual gap. Ask developers to put holds (id attributes with static value) on react-based HTMLs. This is what the above slide told me.
@4280-kazurayam
Thank you for the responses,
Totally agree with you on getting the developers involved and compromise. I am coming into a newer company with a product that;'s far along in development - so at this point in the game it’s really tough to say the best route here. Have looked into unit testing based React tools, but ultimately Selenium does most of what I need with a few exceptions. Would be great to find a clever way to handle this, or find a way that I can read that newly generated @id and store it as a string.
@Russ Thomas
Thanks and yes indeed understood about the Spy not being my friend in this situation - the usual approach is not valid here. Below is the element in question.
- table in the DOM
//*[@id=“dc3eccf0-9129-11e8-98b1-054ff9892961”] — Xpath (this id is newly generated everytime)
#dc3eccf0-9129-11e8-98b1-054ff9892961 - CSS selector
If I go element layer before which still contains the table this is the Xpath:
//[@id=“SCHEMA_VERSION_container”]/div/div/div/div/div/div[2]/div
if I do a getText I can System println and see all the values of the cells in the console, but soon as I want to read a specific cell and go deeper, the Xpath is back to //[@id=“dc3eccf0-9129-11e8-98b1-054ff9892961”] with added td and tr and test will fail.
Best,
Mike
I found a very interesting read about Selenium testing of react apps:
Hi Kazurayam, could you pls give me your opinion, how to identify Extjs objects with Kataloon studio, they object are very dynamic, and our appl. is very large and lot of work. We dont have the chance change the code anymore, because it is already done. If we get a lot problem with selenium, are there some dif.possibility, to have a stabil automation? To use Katalon “Smart adapter ?” could we have a stable automation ?
Thx a lot
Concerning Ext.js and Katalon Studio there was one productive discussion here
Google search by “Selenium testing ext js app” showed me the following read. This article would be useful for you and your Ext.js app developers.
I found the following link is most interesting.
----------------
lena,
We dont have the chance change the code anymore, because it is already done.
You should be brave to change the web app code yourself! Don’t give up. It’s you who can solve your problem.
The DOM generated by Ext.js so dynamic that it would require higher level of abstraction of describing Web Page layout.
Drunda Nibel suggested to me an alternative testing framework: Galen Framework.
I am interested in it. I am going to look into using Galen Framework in combination with Katalon Studio.
I have a query - does React-created content display differently in the webdriver compared to the real browser or have any inconsistencies please?
I’ve asked here in the past about pages that do not display content due to unsupported frameworks (a red flag in the dev tools - culprit seems to be JQuery). No answer was given.
One application was impossible to test because content would just not load in the webdriver (IE or Chrome), despite happily working in the real browser.
One application was impossible to test because content would just not load in the webdriver (IE or Chrome), despite happily working in the real browser.
I am confused with your wording. IE and Chrome — both of them are real browsers, aren’t they? What do you mean by saying “content would not load in the webdriver”?
Hi, apologies for the wording! So what I observed was that that when using Recorder or Object Spy, with IE or Chrome, elements would not load on page. One application would not load login page and a different application refused to load anything other than navigation bars - missing main content.
Using browsers in the normal way did not cause any issues.
Both used older JS frameworks so I wondered whether newer frameworks would have even more risks. I will read the reference you posted slightly further up as well, thanks
Dan,
I never use IE so I have no idea about IE.
I use Chrome frequently so I have some idea about it. I guess you possibly have 2 Chrome browser binaries installed in your machine and they are different version. Recorder and Object Spy invoke a Chrome binary (chrome.exe) which is installed in the default path. I suppose this version of Chrome is of old version and not fully functional. The Chrome which you can manually activate is installed somewhere other than the default path, it is of the latest version, automatically upgraded, and is fully functional. I have ever experienced such situation on my PC. See the following post where you can read my previous experience.
You can check the path of the Chrome binary which is invoked by Recorder and Object Spy by looking at chromedriver.log file. Please read the following post of mine.
1 Like
Hello
It is Mid of September 2020. Does something changed in terms of supporting js based languages testing in Katalon Studio? I mean especially in terms of react js web app.
Or it is still bottleneck for it??in July 2019 I tried to use KS for angular based web app and it worked quite decent
1 Like