A Sample RPA Process with Web Applications Operations
How to design a sample process that includes web applications with Robusta RPA tool step by step?
PROCESS SCENARIO
In this tutorial:
Do a price search from a flight ticket price comparison website that we have determined.
First ensure that the Booking.com website is opened, and a flight search will be made according to the criteria we have determined.
Find the best match from the incoming search results, assign the price information to a variable, and save the process as successful and end our process.
In cases where flight data or the best price match is not found, save the process result as failed and end our process.
STEP BY STEP PROCESS
-
Start the process with the Open activity under the Application section to open the Booking.com website. Just drag and drop the activities you want to use into the design area.
-
In the Name field, write the website name after the default Open to explain what is done in this step. When you type a value in the Name field for all the activities, it becomes easier to understand which operations are performed through the process flow.
-
Let’s enter a reference value without spaces in the Application name field. This reference will be available to select in the later activities to determine in which application the operation will be performed.
-
Since you will use Chrome as an application, let’s choose the Chrome option from the Type field.
Applications > Mouse actions
| Name | Open: Booking.com |
| *Application name | bookingDemo |
| *Type | CHROME |
| *Url | https://booking.kayak.com |
| Wait until load | True |
| Timeout (sec) | 120 |
| Maximize | True |
- Since the visible area for the flight departure airport on this site is not the same as the area where you will enter the data in, continue the process with the Mouse action activity, as you had to click on this area first to make visible to enter data.
Applications > Mouse actions
| Name | Mouse actions : From Airport |
| *Application name | ${bookingDemo} |
| Button | LEFT |
| *Field | //div[contains(@id,”originairport-display-inner”)] |
- You must enter the location information in the html structure of the field that we want to click on the page in the field. Use the Inspector feature of Robusta.
7.In this step, find the location information of the flight departure airport area. For this, click on the Field and then click the New button to add a new page. After choosing Chrome as the type of application, enter the link of the “https://booking.kayak.com/” website and click the Open button.
-
After waiting for the page to open, find the location information of the area you want, by selecting the application from the list and pressing the Inspect button. To do this, move the cursor over the relevant field after clicking the button. The area will be marked in yellow.
-
When you wait for 3 seconds on this area, the yellow marking disappears, and the location information is automatically displayed in the RelXPath area.
-
Then, by clicking the OK button, save the location information in the field. Since you have learned how to get Xpath selector data with using Inspector feature of Robusta, we will proceed just using correct Xpath without trying to find again in the next components in this tutorial.
-
Obtain the variables on the Data Object screen that are defined before. We can use these variables by expressing them in the ${} structure that allows us to use them in the process. To reach Data Object window just click white space of canvas and then click Data Objects area in parameters pane.
-
Now we can use Data Objects to place them in process easily.
-
With using Set methods activity we got interact with field that we need to type “${fromAirport} “ data object to part of web form. We had ensured that the flight departure airport (“Newyork NY, NYC”) that we want to search for is written in the relevant field with the Set methods activity.
Applications > Set methods
| Name | Set methods : From airport |
| *Application Name | ${bookingDemo} |
| *Field | //input[@name=”origin”] |
| Clear | True |
| *Type | text |
| *Text | ${fromAirport} |
| Wait until visible | True |
- In the next step, use the Mouse action activity, similar to the previous one.
Applications > Mouse actions
| Name | Mouse actions: Select From Airport |
| *Application name | ${bookingDemo} |
| Button | LEFT |
| *Field | //div[@class=”item-info”] |
| Wait until load | True |
| Wait until visible | True |
- Continue the process with another Mouse action activity, since we had to click on this area first to make visible to enter data.
Applications > Mouse actions
| Name | Mouse actions : From Airport |
| *Application name | ${bookingDemo} |
| Button | LEFT |
| *Field | /html/body/div[1]/div[1]/main/div[1]/div[1]/div/div[1]/div/div[2]/section[2] /div/div/div[2]/form[1]/div[1]/div/div[1]/div/div[3]/div/div/div |
-
Now again use Data Objects to place variable ( ${toAirport} ) to field of web form easily.
-
With using Set methods components we got interact with field that we need to type “ ${toAirport} “ data object to part of web form. We had ensure that the flight departure airport (“Chicago, IL (CHI)”) that we want to search for is written in the relevant field with the Set methods activity.
Applications > Set methods
| Name | Set methods : To airport |
| *Application Name | ${bookingDemo} |
| *Field | //input[@name=”destination”] |
| Clear | True |
| *Type | text |
| *Text | ${toAirport} |
| Wait until visible | True |
- Use another Mouse action activity similar to the previous one.
Applications > Mouse actions
| Name | Mouse actions: Select To Airport |
| *Application name | ${bookingDemo} |
| Button | LEFT |
| *Field | (//div[@class=”item-info”])[2] |
| Wait until load | True |
| Wait until visible | True |
- Continue the process with the Mouse action activity since you must click on this area first to enter data.
Applications > Mouse actions
| Name | Mouse actions: Departure Date |
| *Application name | ${bookingDemo} |
| Button | LEFT |
| *Field | //div[contains(@id,”dateRangeInputdisplay-start-inner”)] |
-
Now use the Data Object ‘s variable (${departureDate} ) to place them in process .
-
With using Set methods components we got interact with field that we need to type “ ${departureDate} “ data object to part of web form. We had ensure that the flight departure date that we want to search for is written in the relevant field with the Set methods activity.
Applications > Set methods
| Name | Set methods: Departure Date |
| *Application Name | ${bookingDemo} |
| *Field | //div[contains(@id,”departinput”)] |
| Clear | True |
| *Type | text |
| *Text | ${departureDate} |
| Wait until visible | True |
- Continue the process with the Mouse action activity since you must click on this area first to enter data.
Applications > Mouse actions
| Name | Mouse actions: Return Date |
| *Application name | ${bookingDemo} |
| Button | LEFT |
| *Field | //div[contains(@id,”dateRangeInputdisplay-end-inner”)] |
-
Now use the Data Object variable (${returnDate}) to place them in process .
-
With using Set methods activity we got interact with field that we need to type “ ${returnDate} “ data object to part of web form. We had ensure that the flight departure date that we want to search for is written in the relevant field with the Set methods activity.
Applications > Set methods
| Name | Set methods: Return Date |
| *Application Name | ${bookingDemo} |
| *Field | //div[contains(@id,”returninput”)] |
| Clear | True |
| *Type | text |
| *Text | ${returnDate} |
| Wait until visible | True |
- After entering all the criteria that we want, ensure that the search button was clicked. On the page that appears after clicking the Search button, we can monitor the loading process from the Loading field on the top left of the page. As you can see, when the page loads, this field is updated and its contents changes. We used this field to check if the search failed or not. For this, we used the Wait action(s) activity, where we can wait until the area we specified on the application is visible or active.
Applications > Mouse actions
| Name | Mouse actions: Click Search |
| *Application name | ${bookingDemo} |
| Button | LEFT |
| *Field | (//button[contains(@id,”submit”)])[1] |
- In Wait actions activity, choose the visible option in the Wait for field, as we want to wait until the location field we entered is visible. Return to the Open activity, the first activity of the process for how long we want to wait and enter it in the Timeout field as in seconds. Since we entered the value of 120 in this field, it will take time to load results on Booking.com. If it does not load within specified time, this step will end with an error.
Applications > Wait actions
| Name | Wait actions: Check if loaded |
| *Application name | ${bookingDemo} |
| *Field | // [@class=”col-advice”]// [@aria-busy=”false”] |
| *Wait for | visible |
- When this error is received, we will advance our process through a different flow. To achieve this, drag and drop and error boundary event into the Wait actions activity. When we drag the error boundary event activity, a green frame will be displayed around the activity. It means that we can drop the error boundary event and connect it with activity. Thanks to the error boundary event, the process will continue from here.
-
Use the Script task activity to generate the result message if the page could not be loaded. Thus, the process will continue from the error step. Javascript programming language is used in this case to generate error message. Type javascript in the Script format field.
-
Note variables that we defined in the Data Object field are received, we ensured that the value of the ticketPrice variable was left blank and the error message string was set into the Note variable. You can watch our other videos to learn the detailed usage of the Script task activity.
Activties> Script task
| Script format | javascript |
| Script | execution.getVariable(“ticketPrice”); execution.getVariable(“Note”); ticketPrice = “”; Note= “No matching ticket is found.”; execution.setVariable(“ticketPrice”,ticketPrice); execution.setVariable(“Note”,Note); |
| Name | Script task: No ticket |
- Use the Close activity to close the website we have opened. In the Close activity, select the reference name of the application from the Application name field and end the process with an End event activity.
Applications > Close
| Name | Close: booking.com |
| *Application name | ${bookingDemo} |
-
Continue the process with the Function activity to learn how many tickests were on the page when the search was concluded. The Functions activity allows us toget various information of the elements on the page.
-
Enter the location information of the ticket fields listed in this activity in the html structure into the field and choose the element count option from the Action field.
Applications > Functions
| Name | Functions: Get Ticket Row Count |
| *Application name | ${bookingDemo} |
| *Field | //*[@class=”resultWrapper”] |
| Result variable name | ticketRowCount |
| Action | elementcount |
- Then, according to the variable return from the Function activity, ensure that if no flight was found, the process was terminated, and if there was a flight, the process continued. To do this, use a gateway that allows us to advance the process according to conditions we set.
The flow condition (${ticketRowCount==0}) parameter of the Gateway we used in this process will come from the variable we determined in the previous step. If the value of this variable is 0, that is, there is no ticket, we have ensured that the condition returns true and the process proceeds and ends from here.
| Flow condition | (${ticketRowCount==0}) |
- Use again the Script task activity to obtain information if no matching ticket is found information. Type script format as javascript and type the script into the Script field.
Activities> Script task
| Script format | javascript |
| Script | execution.getVariable(“ticketPrice”); execution.getVariable(“Note”); ticketPrice = “”; Note= “No matching ticket is found.”; execution.setVariable(“ticketPrice”,ticketPrice); execution.setVariable(“Note”,Note); |
| Name | Script task: No ticket |
- To terminate the process, drag and drop the Close activity and select the reference name of the application that we want to close from the list. Finally, we ended the process with an End event .
Applications > Close
| Name | Close: booking.com |
| *Application name | ${bookingDemo} |
- In the case there is a flight, check the Default flow checkbox and process will continue from here.
| Default flow | True |
- Use the Function activity similar to the previous one, to query whether there is a flight with the best price information on the page.
Applications > Functions
| Name | Functions: Get Ticket Row Count |
| *Application name | ${bookingDemo} |
| *Field | //*[@class=”bfLabel bf-best”] |
| Result variable name | bestPriceFlag |
| Action | exists |
- To control whether there is a best ticket or not, use the Exclusive gateway activity.
- Type (${bestPriceFlag==false}) in the Flow condition field to control If there is no flight with the best price information.
| Flow condition | (${bestPriceFlag==false}) |
- Use the Script task activity to send the “No best ticket” message.
Activities> Script task
| Script format | javascript |
| Script | execution.getVariable(“ticketPrice”); execution.getVariable(“Note”); ticketPrice = “”; Note= “No matching best ticket is found.”; execution.setVariable(“ticketPrice”,ticketPrice); execution.setVariable(“Note”,Note); |
| Name | Script task: No best ticket |
- To close the web site, use the Close activity and select the reference name of application from the Application name field. End the process with an End event activity.
Applications > Close
| Name | Close: booking.com |
| *Application name | ${bookingDemo} |
- Type (${bestPriceFlag==true}) in the Flow condition field to control If there is a flight with the best price information.
| Flow condition | (${bestPriceFlag==true}) |
- Use the Script task activity to send the “Found best ticket” message.
Activities> Script task
| Script format | javascript |
| Script | execution.getVariable(“Note”); Note = “Best ticket is found.”; execution.setVariable(“Note”,Note); |
| Name | Script task: Found best ticket |
- To receive the best ticket price, drag and drop the Get methods activity. After selecting text from the Type field, type the location information of the best price in the field and assign the result to the ticketPrice variable.
Activities> Get methods
| Name | Get methods: Ticket Price |
| *Application name | ${bookingDemo} |
| *Field | //span[@class=”price option-text”] |
| *Type | text |
| Result variable name | ticketPrice |
- Finally close the page and end the process.
Applications> Close
| Name | Close: booking.com |
| *Application name | ${bookingDemo} |































