A Simple Method for Retaining your UiPath Automation after an Application Redesign
I’ve been meaning to write this article for a while now, but something I saw on the Blue Prism website kicked me into gear:
I have many problems with these points, and in my opinion, they are just there to cheekily trash talk a feature that Blue Prism doesn't have and won’t/can’t implement. Rant aside, In this article, I want to address the second point alone. It essentially states that when you use Recorded Desktop Automation, as in when you use the UiPath record function to build your process, you risk having your robot fail when a UI change occurs on the system you are automating. This can be the case, but I’m going to show you how you can mitigate this risk if you have control over the UI of the system.
(Please read about UiPath’s recording function here: https://www.uipath.com/kb-articles/using-macro-recorder)
Many companies undergoing a redesign may be concerned about how the new design will impact their current or future Robotic Process Automation projects. The risk of this happening can be mitigated by using the framework I propose below, which can help future proof UI changes using hidden tags in the HTML of your UI.
My Code Before Applying the Method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XenoVis - Test Form</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,300" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
font-family: "Nunito", sans-serif;
color: #384047;
background-color: #b7fdfe;
}form {
max-width: 465px;
margin: 10px auto;
padding: 10px 20px;
background: #f4f7f8;
border-radius: 8px;
}h1 {
margin: 0 0 30px 0;
text-align: center;
}
textarea,
select {
background: rgba(255, 255, 255, 0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 30px;
}
textarea:focus,
select:focus {
box-shadow: 0 0 5px rgba(75, 201, 112, 1) inset;
border: 1px solid rgba(75, 201, 112, 1);
}input[type="radio"],
input[type="checkbox"] {
margin: 0 4px 8px 0;
}button {
padding: 7px 39px 7px 39px;
color: #fff;
background-color: #4bc970;
font-size: 18px;
letter-spacing: 0.07em;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 100%;
border: 1px solid #3ac162;
border-width: 1px 1px 3px;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
margin-bottom: 10px;
cursor: pointer;
}button:hover {
border: 2px solid #548687;
border-width: 1px 1px 3px;
}input{
margin-bottom: 10px;
}fieldset {
margin-bottom: 30px;
border: none;
}label {
display: block;
margin-bottom: 8px;
}label.light {
display: inline;
}img {
position: relative;
height: 100px;
width: auto;
float: right;
width: 130px;
}.logo > h1 {
position: relative;
float: left;
top:53.5px;
left: 25px;
} #postButton{
cursor: pointer;
}
#username, #emailaddress{
background: white;
padding: 5px;
margin-bottom:5px;
} </style>
</head>
<body>
<form action="index.html" method="post">
<h1>Sign In</h1>
<div class="logo">
<img src="https://img1.wsimg.com/isteam/ip/cac0ec07-7ad5-4412-b239-7fdffe8fea98/logo/c3193722-aaab-4b4f-92df-5843ba0c3870.png/:/rs=h:350/qt=q:95" alt="XenoVis AI">
</div>
<fieldset>
<input type="text" id="name" name="user_name" placeholder="Name">
<input type="email" id="email" name="user_name" placeholder="Email">
<input type="password" id="password" name="user_password" placeholder="Password">
<br>
<input type="checkbox" id="robot_logs" value="robot_logs" name="robot_logs">
<label for="robot_logs" class="light">Navigate to Robot Analyitcs</label>
</fieldset>
<button id="sendButton" type="submit0">Submit</button>
</form>
</body>
</html>
The RPA UI Retention Method
Step 1
Take the current UI and examine it for common functions that will not change.
This will generally be buttons or inputs that may change style or position but are unlikely to be changed otherwise.
Step 2
Come up with your own unique tags for the robot to look for.
I like to use the tag “robot-hook”:
<button id="sendButton" type="submit0" robot-hook="submitbutton">Submit</button>I use a camel case descriptor to outline what the element is. This tag will remain no matter what happens to the design of the front end.
Step 3
Apply the new tags to the items you identified in Step 1.
My Code After Applying the Method — Below I took the fields that the robot would be interacting with and added my new tags to them. For ease of reading, I have only included the body element below…
<body>
<form action="index.html" method="post">
<h1>Sign In</h1>
<div class="logo">
<img src="https://img1.wsimg.com/isteam/ip/cac0ec07-7ad5-4412-b239-7fdffe8fea98/logo/c3193722-aaab-4b4f-92df-5843ba0c3870.png/:/rs=h:350/qt=q:95" alt="XenoVis AI">
</div>
<fieldset>
<input type="text" id="name" name="user_name" placeholder="Name" robot-hook="nameInput">
<input type="email" id="email" name="user_name" placeholder="Email" robot-hook="emailInput">
<input type="password" id="password" name="user_password" placeholder="Password" robot-hook="passwordInput">
<br>
<input type="checkbox" id="robot_logs" name="robot_logs" robot-hook="navigateToAnalyticsCheckbox">
<label for="robot_logs" class="light">Navigate to Robot Analyitcs</label>
</fieldset>
<button id="sendButton" type="submit0" robot-hook="submitbutton">Submit</button>
</form>
</body>Step 4
Change your robots selectors to use the new tags instead of other elements and class attributes that may change during a redesign.
Testing
With the new tags as selectors:
With the new tags as selectors and elements changed:
Changed body code:
<body>
<form action="index.html" method="post">
<h1>Log In</h1>
<div class="logo">
<img src="https://img1.wsimg.com/isteam/ip/cac0ec07-7ad5-4412-b239-7fdffe8fea98/logo/c3193722-aaab-4b4f-92df-5843ba0c3870.png/:/rs=h:350/qt=q:95" alt="XenoVis AI">
</div>
<fieldset>
<div contenteditable="true" id="username" robot-hook="nameInput">Username...</div>
<div contenteditable="true" id="emailaddress" robot-hook="emailInput">Email...</div>
<input type="password" id="password" name="user_password" placeholder="Password" robot-hook="passwordInput">
<br>
<label for="robot_log" class="heavy">See Robot Logs First</label>
<input type="checkbox" id="robot_log" name="robot_log" robot-hook="navigateToAnalyticsCheckbox">
</fieldset>
<div id="postButton" type="post" robot-hook="submitbutton">Submit</div>
</form>
</body>Result:
Using ARIA Attributes
The benefit of using ARIA is that you are implementing best practices for accessibility, as well as getting a reliable way to hook into UI elements on the screen. That said, please read: “No ARIA is better than Bad ARIA”. If you can’t/won’t do it right, then it would be better to invent your own attributes to use for the robot to find.
Research Aria tags as suggested by WCAG guidelines.
Please read the introduction of the Wikipedia article below for more information about WCAG:
The WCAG site gives some insight into ARIA tags:
- Go here: https://www.w3.org/WAI/standards-guidelines/wcag/.
- Click on “How to Meet WCAG 2 (Quick Reference)”.
- Expand Guideline 1.1.1 “Non-text Content — Level A”.
- Click “ARIA6: Using aria-label to provide labels for objects”
You can use the specification found here: https://www.w3.org/TR/wai-aria-practices-1.1. This link has information for each HTML element and its associated HTML tags.
Change your robots selectors to use the ARIA tags and ID’s instead of elements and class attributes that may change during a redesign.
Conclusion
As always, be sure to test any changes you make to the front end with your robot. Hopefully, this method makes that process smoother.
Please feel free to let me know how you go if you choose to use this technique!
