Does TestComplete work correctly with React javascript v0.13

Question

After entering some text in the popup window, TestComplete does not seem to distinguish which of&nbsp;the three availale&nbsp; buttons (Cancel, Delete, Update) has been selected. It is always defaults to the first one - the Cancel button.

alexkaras · Answer

Hi Tim,
&nbsp;
Well...
In an old good times when the trees were taller and the grass was greener ;), when you clicked a link or a button on a web page, your browser sent request to the server and waited until a) the server responds and b) the complete page was received. Then the page was rendered and displayed but that did not take a lot of time.
Page.Wait handles exactly this situation - it waits until the browser signals that complete page is received from the server.
There are two&nbsp;cases here with the modern applications:
a) The majority of modern applications do not request a new page from the server when some link or button is clicked on the page. Instead, some request is sent to the server and when the server responds with the requested data, these data (via some java script from the page) are injected in the proper place *on the same* page and the browser is commanded to refresh the view. Technically this means that the browser does not wait for the new page, reports the displayed one as completely loaded (which is correct) and thus Page.Wait returns immediately;
b) Additional data obtained either with the page itself or as a result of the additional request described above, might be additionally processed by some page script code before been injected and displayed. Obviously, this processing may be long and also several more additional requests may be sent during this processing.
&nbsp;
Two cases from above mean that the object that you need to use in your test code may appear not immediately after the click, but after some period of time. And this period of time may exceed the default wait timeout which will result in the 'Object not found' error in the test log.
&nbsp;
To overcome this, I would recommend this approach:
-- Perform the click;
-- Call Page.Wait to be on the safe side in case the click triggers page reload. If not, I think that time penalty will be minimal;
-- Search for or get direct reference to some parent object that for sure must exist on the page;
-- Use the found object as a root (performance considerations) and search/wait until the sought for target object appears (within some timeout);
-- Use the found object or report a problem.
&nbsp;
For example, assume that a data table must appear somewhere&nbsp;on a panel&nbsp;after some button is clicked and you need to do something with one of the cells of this table.
VBScript&nbsp;pseudocode for this may look like this (untested, of top of my head):
Call button.click
Call Aliases.page.wait
Set panel = Aliases.page.PanelWithTable
Set table = panel.FindChildEx(Array("ObjectType", "ObjectIdentifier"), Array("Table", "dataTable"), 10, True, 30000) ' wait 30 secs for the table to appear
If (Not table.Exists) Then
&nbsp; ' table was not found -- fail gracefully
End If
' Depending on your application, it might take some time for the table to be populated with data, so wait for this using some criterion/criteria. For example, wait for 30 secs for the number of table records is stable assuming that a record is added in less than&nbsp;one second
iRecCount = table.rows
startTime = Win32API.TickCount
Do
&nbsp; If ((iRecCount &lt;&gt; table.rows) And (Win32API.TickCount &lt; startTime + 30000)) Then
&nbsp;&nbsp;&nbsp; iRecCount = table.rows
&nbsp;&nbsp;&nbsp; Call aqUtils.Delay(1000)
&nbsp; Else
&nbsp;&nbsp;&nbsp; Exit Loop
&nbsp; End If
Loop
If (Win32API.TickCount&nbsp;&gt; startTime + 30000) Then
&nbsp; ' Table was not populated with data within 30 secs -- fail gracefully
End If
' Search for a cell
Set cell = table.FindChild(Array("ObjectType", "contentText"), Array("Cell", "someTextInCell"), 5)
If (Not cell.Exists) Then
&nbsp; ' Cell was not found -- fail gracefully
End If
' Continue with the found cell
...
&nbsp;
Hope this will help...

twhitehouse · Answer

I would like to know the same thing.&nbsp; We are moving to a new project and will start using React.&nbsp; Does Test Complete handle React web pages correctly?

twhitehouse · Answer

I was actually able to create a quick script that navigates to this web page with example React code on it, clicks the "Result" link under #2 on this page and finally checks the text on the "Home" button. Everything worked as expected. Sometimes in the past, with dynamic pages, Test Complete could not find the item on the page. But, this script below seemed to cause no issues on this React web page.

sub test1

Sys.Browser("iexplore").ToUrl("http://tutorialzine.com/2014/07/5-practical-examples-for-learning-facebooks-react-framework/")

aqUtils.Delay 5000

Call Aliases.browser.page5PracticalExamplesForLearnin.sectionContent.articlePost.frameHttpJsfiddleNetDannymarkovV.panelWrapper.header.linkResult.Click()

aqUtils.Delay 5000

Call aqObject.CheckProperty(Aliases.browser.page5PracticalExamplesForLearnin.sectionContent.articlePost.frameHttpJsfiddleNetDannymarkovV.frameFiddleJshellNetDannymarkovV.panel.textnodeHome, "contentText", cmpContains, "Home", False)

end sub

twhitehouse · Answer

That being said, does anyone have more information or samples within Test Complete for how it handles React web sites?&nbsp; Any help would be appreciated.

alexkaras · Answer

Hi,
&nbsp;
I did not work with React personally, but considering that this is just another javascript library I would like to reference a brilliant reply from Lino Tadros: https://community.smartbear.com/t5/Functional-Web-Testing/TestComplete-9-3-Does-it-support-kendoUI/m-p/81168#M17730 and till the end of the thread.
The approach should be the same as for other dynamic web pages:
-- Perform some action (click a link or a button, etc.);
-- Wait until the page is loaded;
-- Because of the fact that dynamic pages not necessarily reload the page: wait until either the target object or one of its parents appears;
-- If you was waiting for some parent object, search for the target object using (dynamic) set of unique properties;
-- Do whatever required with the found target object.

Forum Discussion

Does TestComplete work correctly with React javascript v0.13

6 Replies

Related Content

How to convert vbscript code to javascript in testcomplete

QTP to Testcomplete JavaScript migration

TestComplete not Name Mapping correctly on playback

Calling JavaScript routines in TestComplete

How to Generate Data correctly using datasource in readyAPI

Recent Discussions

TestComplete15.63 is unable to recognize a range of standard html controls in Object Browser

How to always click on the record on the top of a table

Delay after pressing specific Key

End of Life for Support & Maintenance for perpetual licenses.

Log.SaveResultsAs() Unable to export the summary