How to build a web automation using OpenBots Studio
Hi, my name is Brian Torres and I’m your studio evangelist.
In today’s video, I’m going to be showing you how to do a web automation build using OpenBots Studio.
In this particular build, I’m going to be opening the Google search site using Chrome browser.
Afterwards, I’ll perform a very basic search for the current Google stock price.
Once you navigate to the page, I’m simply going to extract the current price listed there and display it in this show the in-message box to be able to confirm that we extracted the price.
In this video I’m also going to briefly discuss the two different types of commands that we have available for performing web automations and discuss the differences between them.
So let’s go ahead and get started.
In OpenBots Studio, we have two different versions of the same commands that you can utilize in order to build your web automations.
The first group are known as just learning base commands.
These will initialize your instance of the browser using selenium.
However, we also have a different subset that uses the same functionality but will initialize your browser the same way that a user would.
Now these commands are known as the Native browser commands because they utilize an extension to interact with the browser in the same way that a user would.
Now both versions will allow you to perform the same basic functionality for extracting or navigating through different webpages.
The main difference is going to be that selenium, because of the way it interacts with the web browser, will not give you access to any cache or cookies that you may already have in your browser, whereas the native ones will, as again they will interact the same way that the user would.
Would now the important thing to take away here.
Is that when using the native browser commands, you must have the correct extension installed depending on the browser you plan to utilize.
Let me show you how to go ahead and install the extensions you need in order to use the native browser commands.
From OpenBots Studio, you can see here, in the options tab, if you select this, you’ll see that we have the extensions manager available.
By selecting this, you’ll get a sub window that will have the different extensions currently available.
One dependent for each of the different browsers that we currently support.
These include Chrome, edge and Firefox.
Simply click on the install button located next to the extension that you wish to install and OpenBots Studio will automatically install the extension for you.
Just make sure to open the browser afterwards. Navigate to the extensions page and ensure that it has been enabled.
Once you’ve done so, you’re ready to utilize all of our native browser-based commands.
Now with that distribution out of the way, let’s go ahead and get started building your automation.
Now, in this example, I’m going to go ahead and utilize the native browser version of the commands.
This is important in order to help showcase the recorder that we have built into OpenBots studio that works seamlessly. Once we have the appropriate extension installed.
So to begin, I’m going to have to have the automation actually open up an instance of the appropriate browser. To do this I have to search for the appropriate create application command that will allow me to do so.
Once again, this is going to be dependent on whether you’re going to use the Selenium or the native browser.
So since I’m going to be using their browser version, I’m going to go ahead and perform Search for native browser create application.
So, you can see here, don’t add the command here we have all different parameters. Now that we have to fill in to utilize these command properly.
The first one is called Native browser instance name. This works very similarly to how we work with Excel or early Word-type applications.
Essentially, what this allows us to do is, since we can have multiple instances of an application open at any given time, this parameter allows us to create a variable that allows us to store the information that defines this particular instance of the browser.
So that future commands can utilized in the same project, all we have to do is reference that variable to allow the automation to understand which version of the browser it needs to interact with.
So, let’s go ahead and create this variable. All we need to do is click into the parameter value here and then utilize the control plus K hot key.
This takes us to the variables manager tab. From here I’m going to go ahead and select new to indicate I’m creating a new variable. And from here I’ll be able to define the actual variable that I’m creating.
First, I have to give this a new name. So, I’m going to call this particular variable, V browser and next tab select the appropriate type.
Whenever we’re working with instances then using a variable to store that information, we have to utilize a type that’s located here in the bottom of this dropdown called OB App Instance.
This is a unique variable type that we have available in OpenBots Studio specifically designed for this particular purpose.
With this selected, we can go ahead and click OK to create the variable.
This takes us back to the variables matters window, and once we click OK once more from here, it’ll take us back to filling out the parameters for the associated command.
You can see here that now under the native browser instance name parameter, we have the V browser variable listed here.
The next step is going to be to indicate the browser engine that I’m going to be opening using this command.
By default, it will select the Chrome browser.
However, you can see that we have a dropdown option that allows you to select one of the other browsers that we currently support as well, including Edge as well Firefox.
In this example, I am going to be using Chrome, so I’ll leave it as the default option.
You didn’t have to specify a URL, so this is essentially the URL page that will be opened when you first open the browser itself.
Since we’re just performing Google search, I’m going to go ahead and indicate here that I simply wanted to navigate to the Google.com site.
With that we can go ahead and click OK to go ahead and add the command to automation. Let me go ahead and get rid of this little show message command that’s always sort of a placeholder for any new products we create.
Now, once we open the actual Chrome browser, this is basically when we’re going to go ahead and start actually interacting with it.
Now you can always just open the browser yourself 1st and navigate to the page before you actually start capturing and performing and adding all the different commands.
However, I always find it easier after I’ve added this native browser create application command to give my code a quick run and have an instance of that browser opened up for me.
This makes sure that we’re capturing all the X path parameters that you’ll be seeing me discussing in a second in the same way that it will be when the automation actually executes.
So, you can see that when executing the code, it went ahead and opened the Chrome browser and the Google search page.
We go and click on close here to close the log window. And this is basically what I’m going to be using in order to build the automation here.
So, at this point, what I need to do is to go ahead and type into the search bar. What I want to search for.
So in this case it is going to type in here Google stock in order to look up the current stock price for the Google company. To do that, we navigate back to OpenBots. Studio.
Once again, utilizing the same native browser commands, I’m going to go ahead and search for native browser set text. So this command is utilized in order to actually type into any search bar located on any website.
It’s important to note here that, although I am using just the Google search page here that these commands will work in the same way according to any website you’re currently using.
This will work with any particular text field that you may encounter on any site.
Here you’ll see that once again it will ask us for again for that native browser instance name. This is why we created that variable before.
Instead of having to do anything complicated procedure in order to indicate the specific instance you’re trying to interact with, all we have to do here is click on insert variable argument.
From here you’ll see the full list of the variables that we currently already have built in to our project and select the V browser variable.
Now this next section is going to be confusing, so let me explain.
This one so this one is called the element search parameter.
So, this particular section is utilized in order to help the automation understand and identify the specific elements on screen that it’s supposed to interact with.
To do so, it requires information about the different parameters associated with the element to be specified.
You can see here that by default it already has some parameter names listed out here.
What you can do here is basically manually insert the parameter values associated with the element on screen they’re trying to interact with.
However, there’s no other way that we can also get this information.
You can see here that underneath the element search parameter name, we also have an option here called Native element recorder.
The OpenBots studio is actually built with some inbuilt recorder features that allows you to automatically capture element parameters for you.
Since we’re working with the native browser, the recorder that is associated with this particular elements is the native element recorder.
You’ll see here when I click on this, this will go ahead and sort of minimize OpenBots Studio and you’ll see at the top left we get a little window that just lets us know that we have a couple hotkeys we can now use, either hitting escape to end the recorder or F2 in order to delay.
The delay is basically used in order to help you capture hidden elements, right? So let’s say for example, you’re trying to capture a sub option of the file menu.
If you need to capture one of those sub elements, you can simply hit the delay hot key, then click on file and then once the delay has ended, then captured the specific sub element you need from there.
We won’t need to be using that from here, but I just want to bring that up just so you understand how these features can be utilized.
Now at this point, the recorder is active and it’s basically waiting for your input in order to identify the element it needs to capture.
So you’ll notice here that as you move your mouse cursor around the different elements will begin to be highlighted as you move the mouse cursor over them.
This is due to the fact that we have the extension installed that is able to interact natively with the browser to identify all these different elements.
Capturing element is simply a matter of moving mouse cursor over the particular high-asset field you’re trying to capture. In this case, the text field for it to perform search, and once highlighted, simply left click.
Once you do, you’ll notice here that OpenBots Studio will pop back up to the window for pulling out different parameters
Except this time you’ll notice now that all the parameters listed inside the element search parameter fields are auto populated for you.
At this point, you can always go back if you’re running into any issues with your automation. You can always go back here and manually change these values as needed.
We also support wild card characters and the ability to pass in variables instead of hardcoded values as well, so there’s a lot of versatility for you to basically define these parameters as needed, depending on the site and your performance that you’re perceiving as you test out your automations.
So with the actual parameters specified, now that the bot actually knows what field is supposed to interact with, the next field is the actual text that needs to type into that associated element.
So right here on the text set is where we’re going to specify they’re trying to search for the Google stock.
I’m going to type Google stock. So after this you’ll see here that after we typed in the text to set, we have some additional parameters for specifying exactly how the particular element is going to be interacted with.
For example, you have the option here of clearing text. If that field already has some information typed into it, this simply allows you to indicate that it should first delete the information there before typing in the actual text that you want to populate the field.
So in our case, we do want to make sure that it is only searching for Google stock, so just for safely, we’re going to go ahead and leave the clear text options set to yes as well.
Now you’ll notice the little option here listed underneath it is the simulate type.
Another thing to keep in mind always with OpenBots Studio is that if you ever have questions about what any parameters being used for or anything like that, you can simply mouse the cursor over the name of the parameter and you get a brief description of what that parameter is used for.
So in this case, for example, you can see that with the simulated type it states that select with the text should be typed as simulated using the target application. If not, it will send keystrokes to target elements.
Basically, all this means is that if you choose yes option for the simulate type, it’ll go ahead and interact with that particular element using the browser settings itself.
Or if you leave it as a No option, which is the default option, it’ll send in the text information the same way that the user would by simply typing in the keyboard by sending those simulated keystrokes.
I’ll go ahead and leave this No, but keep in mind that if you want to help improve the performance of your automations, choosing the Yes option will be a bit quicker, so it may be an option you might want to look into.
The next parameter that you need to take note of is the timeout seconds option here. You can see here that by default it has the value of 30.
So in the event that when the automation executes, it is not able to immediately search for the elements.
This allows you to determine the amount of time that the automation should continue attempting to search for it before throwing an exception.
By default, all these different commands that interact with the browser will have a 30 second timeout, but you can always feel free to manipulate that and change this value based on your circumstances.
Maybe perhaps, for example, you’re working with a browser that just tends to work a bit slower than loading up the page, so maybe you want to extend the time on it—things of that nature.
In my purposes, however, I’m going to leave it to the default value of 30 seconds and with this we can go ahead and click on OK to add the commands as well to our command here.
So now that we typed in what we want to search for in the Google search bar, now let’s go ahead and have the automation perform the search itself.
If we were to simulate the steps ourselves or how we would do it ourselves in a browser, of course we would go ahead and do the same thing.
We would type in Google stock and then we would have two options.
A lot of us would simply hit the enter key in order to have it go ahead and perform the search or we always have the option here.
If we click outside the field, you can see that we have the Google search button that we can always click on in order to perform the search itself.
If we wanted to, we can simulate these two steps using automation as well.
If we did want to have the automation click on this Google search button here, what we can do is go back here into our OpenBots Studio and search the native browser click Element Command.
So this is the command that you want to utilize if you need to perform the mouse click on any element that’s located in your browser.
So by clicking on the native browser click Element Command, you’ll see here that the parameters again for the specific command will be displayed.
And you’ll notice that this looks very similar to the set text command that we just used.
Once again, you’ll indicate the native browser instance name, so that understands which browser instance is trying to interact with.
You have the element search parameter that you have to define the different parameters so it can actually identify the specific element to interact with.
That of course has the native element recorder that you can use to help you extract that information for you.
And then afterwards is where you’ll see the parameters that are unique to that particular command that you’re utilizing.
You’ll notice that as you use all the different native browser or even the selenium-based ones, they all work exactly in the same way.
Instance names reference the browser element search parameter to identify the elements and then the unique specific of parameters available for that particular command as well.
Now I’m actually not going to utilize this particular command, I just want to show that this is an option of how you click on the Google search button.
Instead, I’m going to go ahead and have the user send the enter key, and there’s actually a reason I’m doing this.
If I go here and try to type out again the Google stock, notice here that what tends to happen when you click inside the text field, you get this little drop down where Google tries to help you out by giving you suggestions of what you’re trying to type out.
Or you can just click on the option there and form the search.
But you’ll notice that it inadvertently covers up that Google search button.
If we try to tell the automation to click on that button, there’s a good chance that that drop down for the suggestions is actually going to block the button, preventing the automation from being able to interact with it correctly.
It might be better instead to just have the automation send the enter key the way most users probably would perform in search itself.
So again, you can also use the set text command to kind of simulate sending the enter key as well.
There’s a way to do that, however I want to show you a different command.
You can also utilize in order to perform the same functionality.
We have a different command called Send advanced keystrokes.
This command is utilized in order to send any kind of keyboard common keystroke combinations that you need to for your automation.
For example, if you needed to save a file, sometimes you would tend to use the control plus S hot key in order to save changes.
So this would be a command that you can utilize to simulate the exact same process by specifying the control key and yes key in that they should be pressed at the same time in order to perform that keystroke.
So in this case we’ll see here that we use the send advanced keystrokes command it will give you an option of indicating the specific window that you’re trying to send this particular keystroke combination to
By default, as you can see here, it has the value of current window.
All this means essentially is that if you leave it as default value, whatever window happens to be the active window at that particular moment in time on your desktop, that’s going to be the one that’s going to receive this particular signal of the keys that you try and send out.
However, you have here the dropdown you can also utilize in order to specifically choose the specific window you want to interact with.
So if I wanted to choose specifically the Google Chrome window, let it know that the Chrome window is the one I’m trying to interact with.
However, at this point I’m pretty confident that my automation is going to be on the Google search bar, so I should go ahead and leave it as default option here instead of making any changes.
But just keep in mind that, if in practice, when you’re actually performing your automations, if you find a little bit less reliable where it’s not sending the correct location, you have the option of controlling that bit using the window name itself.
Once you selected the window you want to interact with, the next thing is to indicate the keystrokes you’re trying to send out to it.
So you’ll see here there’s two columns. One is the actual key itself that you’re trying to send out, and the 2nd is to indicate the action to take.
So first in this case, since all I’m trying to do is send the enter key, I’m going to use this dropdown option here under selected key.
And select the enter return option.
Now I have to now select a particular action to take with that key.
So you notice here this is going to be a dropdown that has three different options.
Key press—up down up. Key down and key up.
So what this has to do is trying to simulate the different interactions a user can take with a key.
The first case here at the key pressed, where it says down plus up, is simply going to interact with the key the same way that a user word when they simply press it, where they press the key down and then release it to let go.
However, sometimes, especially when trying to do hotkeys and things like that, you might have to hold down on a particular key if you’re trying to select multiple files—things of that nature.
In order to simulate the action of holding down the key, you have the second option to indicate key down, which will instruct the automation to have that simulated action of simply holding down that key until given further instructions.
Now, if you did have a key pressed down previously, and now you want the automation to let go of that key, that’s when you realize the third option and it says key up.
Basically, just stop pressing the key from this point forward.
In this situation, I simply wanted to just press the enter key as normal, so I’ll select the first option called key press down plus up.
You can see here that as I entered this first option here for the entry key, I received another row, that if I wanted to, I can keep adding additional keys to send a combination of keys all at once.
All I need to do is the enter key here. I’m going to go ahead and press OK to add the command.
This will go ahead and send enter key.
So let me go ahead and simulate the step here on the actual Chrome page by sending the enter key.
This should be the next page that we see once we form the search itself.
You can see here that I currently have the price listed right here on the screen, so this is the information that I want to extract now as my next step.
So once again, just as before, we have a specific command that we can use to extract data from the current webpage.
Based on whether you’re going to use selenium or native browser, make sure you search for the appropriate one.
So in my case I’m using native browser ones, so I’m going to search for native browser.
In this case it is going to be get text.
But just like the other commands we’ve seen so far for interacting with the web browser, we’ll take the same steps here.
Indicate the instance name. In our case, V browser variable, and then capture the parameters for that particular element.
Again I’ll use the native element recorder.
Then highlight the elements, so in this case, the price and left click on it.
And we can once again verify that the actual parameter values have all been updated.
In this case, for example, this price can constantly change, right? So, depending on when I run this automation, the numerical value here can change.
But what this can mean is that sometimes, depending on how the automation captures the parameters, the parameter values themselves can sometimes hold those unique values as part them.
You always want to double check that none of these two selected parameters hold the current price listed as part of the actual value that’s passed in there.
You can just mouse over, especially if it’s not going to all fit into that one screen to double check.
I can see that the X path does not contain the actual price in it, so we’re fine there.
Then it’s also using the relative X path as well, so let’s go ahead and highlight this here, and looks like there’s nothing there as well—so we should be good to go.
We always keep in mind that double check for any kind of hard coded values in there that could change in future runs and making change adjustments as needed.
And also bear in mind that these parameters don’t work that were selected by default by the recorder.
You can simply disable the parameters you don’t want to utilize and enable the ones you do by using the appropriate checkbox next to that particular parameter name.
All we have left to do under the output text variable is to give it a variable that I can use to store the data that I just extracted from the website.
Let’s use the control plus K hotkey again and press on new to indicate we’re trying to create new variable.
I’ll call this one V stock.
And this will be a basic string type variable that I’m going to use to store a text-based data.
From here we’ll click on OK and OK once more to finalize creating the variable.
And with that, we’re ready to click OK to add the command into our code.
Now that we’ve extracted the text, the actual stock price that we were looking for, I’m just going to do a basic show message command in order to have the price list displayed on screen.
You can see the show message is very straightforward. It simply asks you for the message that you want displayed.
In my case, it’s going to be the stock price stored inside of the V stock variable.
And you also have the option here when using the show message command to indicate whether you want the window to automatically close after a set amount of time.
By default, you can see the value is 0. What that means is that the automation should not close the window on its own.
It should wait for user input to close the message box manually before continuing to the next step in the automation itself.
I’ll go ahead and leave this at zero just so I can have control of when the message box will disappear.
And press OK to add the command.
So now that we’ve finished with the actual functionality of the code itself, the last step is going to be to clean up after itself by closing the Chrome browser.
To do so, I will search up the native browser close application command.
And all this requires is the instance name referencing the browser. In this case, it’s the browser variable.
And with that we have finished building out the code for automations.
So just to kind of reiterate and go through these commands really quickly.
1) Start off by using the native browser create application command to open up an instance of Chrome on the Google search page.
2) Use the native browser set text command in order to type into the search bar what we’re trying to search for in this case, Google Stock.
3) Use the consent advanced keystrokes command in order to send the enter key to perform the user interaction of performing the search.
4) Use the native browser get text command to extract the stock price from the newly navigated web page and do a show message to display it to confirm that we have that captured the price correctly.
5) And finishing off, close the show message by using the Native browser closed Application command to close out the browser.
So with this, let’s go ahead here and close out the browser and give it a quick run to verify that it’s working as expected.
Once again, you get the log one at the bottom right to confirm the automation is running and we can see here the browser has already opened to the Google search page.
Let’s take a moment here to type in Google stock, perform the search.
We can see here that it has already navigated to the page, extracted the price and the message box has appeared, and we can see here that it does equal value that we were expecting from the page itself.
So now if I click on OK to close out the message box, the last step should be is the Chrome browser actually closing it out.
And there we go. The Chrome browser has been closed and we get this text indicator on our log message window that lets us know that everything went through without any exceptions.
In this particular example, I didn’t run into any exceptions.
However, it’s very common, when working with web automations, that you’ll run into a UI element not found type of exception.
These usually occur when you’re working with commands such as the set text or get text commands.
It’s usually an indicator that the parameters you specify to identify the element are not working as expected.
When you see these types of exceptions, always go back to the command that caused the exception and double check some of those parameters.
It’s possible that you may have ended up with some hardcoded values or something of that nature that may need to be altered.
For example, maybe the parameter has a value that changes every time the instance of the browser initialized.
That might require you to use things like a wild card character or maybe it’s an indication that one of the other parameters should be utilized in its place.
This can happen frequently depending on the site you’re working on as each website is built differently and some will be easier to work with than others.
Don’t be discouraged if you constantly run into these types of exceptions that require you to constantly make changes to the parameters.
Just bear with it and experiment a bit around.
Eventually you’ll find the right set of parameters that allow you to identify that element, and it will allow you to resolve that exception.
And with that we successfully completed our first web-based automation.
In this example we learn the fundamentals between the selenium-based commands and the native browser commands.
We then use the native browser-based commands in order to perform a search using the Chrome browser and then extract some data.
Although in this example we only use the Google search page in this process we built, these same fundamental concepts and commands can be used for all sorts of different websites and web pages that you might need to interact.
Although we used Chrome here, the native browser commands can be used with different browsers, such as Edge or Firefox.
As long as you learn these fundamental concepts and commands, you can use these to build all sorts of complicated business processes based on your needs.
I hope you’ve enjoyed this video and happy automating.