Single-page web applications
A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current page instead of loading entire new pages from a server. This approach makes the single page application behave more like a desktop application.
In a single page application, the SPA retrieves all of the necessary code — HTML, JavaScript, and CSS — with a single page load or else dynamically loads necessary resources and adds them to the page as needed. The page does not reload, nor does control transfer to another page. You can, however, use the location hash or the HTML5 History API to provide the perception of separate logical pages in the application. Interaction with the single page application often involves dynamic communication with the web server behind the scenes.
With a single-page application, all elements of the DOM (Document Object Model) exist in one page. This creates an environment that differs from a traditional web application in that the SPA page reloads differently and all objects in the application can exist in the DOM simultaneously. These differences can lead to performance issues and complicated match rules to uniquely identify controls.
Pega Robot Studio includes the ability to define a logical hierarchical structure for these applications that reduces matching time and simplifies the match rules to make it easier to develop automations.
To add single-page web application support, Robotic Automation Studio 8.0.1081 includes changes in the following areas:
- The Select Element mode of interrogation
- The context menu that appears when you right-click in the Palette
- The Interrogation Form that appears during page rematching
How does it work?
When interrogating single-page applications, you are responsible for defining the controls to use as container controls. Container controls are parents of the other controls. Any control can be a container control.
By adding container controls to define different views within the application, Robot Studio shows a logical, hierarchical view that reflects how the webpage end user perceives the application. In addition, you also get the following benefits:
- Finding unique match rules is easier. In the first screen shot, the deptList is matched when you are on the Work groups view. The match rules defined for the deptList are not unique enough to prevent the deptList from matching something on the Work groups view. Once the deptList is properly parented, as shown in the second screen shot, the deptList is no longer matched because its parent, deptContainer, is not matched.
- Since the main form has fewer children in the second screen shot (3 versus 10), the system can match the controls more quickly. This is not noticeable with a small number of controls, as in this example, but in an actual production application, the number of interrogated controls could easily be in the hundreds.
- When automating applications, you often need to know if a page is created before you can automate the controls on that page. Typically, you include a WaitForCreate method on the parent of the page to determine if all of its children are created before you automate those child controls. In the first screen shot, there is no parent page. So, you would have to call each control’s WaitForCreate method to determine if it was time to begin the automation. With a properly parented application, you can call the WaitForCreate method on the parent container.
Creating a container
When interrogating a single-page application, define controls to be container controls to create a logical view of the web application.
Pega Robot Studio maps application controls to containers. Because these child controls are located in a container, you can control the hierarchy you want the user to see. Using containers speeds up the matching process, because only controls within containers are matched.
To create a container during the interrogation, use the Select Element mode. You can also create a container from the Palette after interrogating and matching the control.
The Select Element Interrogation method
The Select Element interrogation mode provides additional information about the DOM during interrogation.
To interrogate a web application using Select Element mode, click the Mode dropdown menu and select Select Element.
Select the controls that should be containers in the Select Element dialog:
You can also create a container from the Palette after interrogating and matching the control. After the control has been interrogated, right-click the control in the Palette and choose either Make Container or Make Non-container. These options are only available during interrogation and after the control is matched.
The system automatically re-parents controls in these situations:
- If you change a control to be a container control, the system automatically re-parents the interrogated and matched items that comprise that control’s children.
- If you change a container control to be a non-container control, the system re-parents any of its children and makes them siblings of the control.
If a control is orphaned, right-click it and choose Fix Parent or Fix Children to compare all matched controls to the DOM and re-parent as appropriate. Orphaned controls can occur if a container control is created while the controls that should be children of the container are unmatched.
Previous topic Interrogation errors