Tutorial: Creating your first Web Browser script

For more information refer to this blog: Creating Workloads Using Login Enterprise Application XRay

To get experience with the scripting language and configuring Web Browsers can be a bit daunting. Therefor we have outlined a simple tutorial on how you can be successful on your first Web Browser script. In this tutorial we are going to browse to loginvsi.com using Google Chrome version 81. Please make sure you have installed this on your development machine.

Firstly you need to have the application scripting pre-requisites installed. To do so please refer to our guide on the pre-requisites.

Step 1 - Setting up your scripting workspace

First, open up visual studio code and select the “MyScripts” tab. Next create a Folder with the title of your application for example "Chrome". The name of the folder is also the name we use for both .APP and .CS files. 

Within the folder you just created add an "myapplication.app" file i.e. "Chrome.app" and a application.cs i.e. "Chrome.cs" file. 

As an example, we created the chrome folder and files.

Step 2. Application Configuration 

Select the "Chrome.app" file and enter the working directory of the application:

Once done close the "Chrome.app" file, we will not be using this anymore. 

Step 3. The basics

Now open the "Chrome.cs" file. This is the file that contains all of the application commands that need to be executed by Login Enterprise. 

We start with the first few default lines that are required by Login Enterprise to be able to run. 

Make sure that every script has the following lines configured: 

 

Make sure that, on line 3 in the example, after "public class" the name is equal to the name of the CS file, e.g. Chrome. Within the Private Void, in between the StartBrowser(); and StopBrowser(); commands we can start writing our script. As you can see I have added a Wait(2) command that will sleep for 2 seconds after the website is launched.

Step 4. Actions and the Application XRay tool

Now we are ready to add actions to our script. There are a number of commands we supply within Login Enterprise you can find them in our scripting functions page. There they are explained in more detail. For now we are going to:

1. Open the website
2. Click a few links
3. Measuring the time it takes to load a page
4. Close the website

Application XRay Tool

To help you with writing the script, we have created a tool called the “ApplicationXRay”. This program is located in the tools directory of the extracted Login Enterprise "Scripting Toolset". With the Application XRay, you can select buttons, fields, and area's within a website you want to interact with. The tool automatically creates a string you can copy / paste directly in to the script you are creating.

For more information please refer to our dedicated documentation pages:

• The Application XRay: Win32 Application Functions Explained
• The Application XRay: Web Browser Functions Explained

Step 5. Run the script for the first time

We are first going to check if the website, as configured now, works and starts. To do this we simply need to go to "Run > Run Without Debugging" within Visual Studio Code. Or pressing the "Ctrl+F5" key combination.

Once executed you should see the browser starting and closing automatically. See example below.

Step 6. Getting familiar with the Xray tool

Once the basic start and stop actions are done we can focus on the next step; interacting with the website. To do this we use the Application XRay tool to find specific buttons and text fields where you can interact with. 

What you need to do is to start the Application XRay tool and select the "Web Browser" tab at the top. Here you select your browser from the dropdown menu and type in the preferred URL i.e. "https://www.loginvsi.com". Once configured you can press the "START" button. 

The Application should look something like this:

Once start is clicked you should see that the website and browser is started.

You can also see that the cross-hair icon in the Application XRay has turned green. This means that the Application XRay is actively searching for objects on the mouse location (when ever you are hovering over the started website). When you hover over a button, lets say "Learn More" you can see that the button becomes highlighted with a red line around it and the Control information within the Application XRay is filled. 

Now it is time to decide on the action you wish to connect to the selected object, in this example we are going to click on the button. To do this you need to select the "Click" action in the dropdown list of the Application XRay. 

Once selected you can click on the "EXECUTE" button to execute the action. Once clicked you should see your mouse cursor moving to the button and clicking it. 

To copy the command you can click "TO CLIPBOARD" button and paste it in to your script. Paste it before the Wait(2); command. Once pasted you can stop the Application XRay by clicking the "STOP" button. Once the webbrowser is closed you can run the script by using the "Ctrl-F5" command. The result will look something like this:

Step 7. - Now the real work

Now that we have familiarized ourselves with the Xray tool and Visual Studio Code we are ready for some real work. Now that we have clicked in the website we are ready to add more actions to the script. Use the Application XRay to start the website and we can continue. 

First of all i want to tell you that using the commands of WIN32 applications can also be used in this script, for example the .Maximize command to maximize the browser window. I always recommend setting applications to full-screen as that will eliminate buttons being hidden and increases stability. To do this simply type after the StartBrowser(); command "MainWindow.Maximize();". 

Once this is done you can run the script again, don't forget to stop the Application XRay properly, and you can see the window being maximized. 

We are now going to add more actions, what we will do is:

• Click on search
• Type something
• Add timer

Make sure you start the website using the Application XRay and you are on the correct page (I.E. Learn More"). And that the window is maximized. Also, in the Application XRay tool make sure you enable "Copy execute to clipboard". This places all executed commands in the clipboard.

Clicking on search

We are going to click on the magnifying glass on the website.

Once executed you should see a text field appearing,

Type something

By hovering over the text field and selecting the "Type to Element" action you are able to type to the object. If you click execute with "Type to Element" a popup will appear asking you to type what you wish to type. Here you enter the following: "Windows 10 {enter}". This command will type "Windows 10" and press the {enter} key. 

Once executed you should see typing happening in the search bar and a new page appearing after it is done. 

The new page should look something like this:

 

Open your script and paste the results after the previous actions and don't be shy and add waits in the script to give it a bit more time. See image as example. 

You can now close the Application XRay again and test your script to see if it works the way you want. 

Once this is done and the script is working successfully we are going to add a timer action to the results of the search. To do this we use the commands StartTimer and StopTimer. We also need to know when the page is loaded. In this example we use the "Search button" once that appears we say that the search page is loaded.

To do this, open the Application XRay tool and go back to the search result window, hover over the search button and select the "Find WebComponent by Selector" action. Execute the command and paste this in your script behind the previous commands.

Now it is time to add Timer actions, what we need to do is start the timer right before the enter action is sent, to do this we need to split the type actions of "Windows 10" and "{enter}". Wat we do is we copy the action, paste it underneath it and remove "{enter}" from the above command and the "Windows 10" from the lower command. 

We then add the timers around the commands, between the above mentioned command we start the timer and we and after we find the search button. It should look like this:

Once ready, close the application xray again and start your script!

A working script is attached to this tutorial and can be downloaded below. For questions you can always contact support@Loginvsi.com.