June 2

Step-by-step guide to building a module in BAS

In this article you will learn how to create modules in BrowserAutomationStudio step by step, using a simple «Page Emulation» module as an example

Within this material we will develop a basic module that includes several key actions — from emulating browser behavior to saving screenshots. This example will help you understand the structure of modules and the principles of their creation

This article was prepared based on the old version of the interface. Despite possible visual changes, the functionality and sequence of actions remain relevant

Module catalog with added module from the current article

Interface of the developed module

1. What are modules and their advantages

Module — this is a set of functions, united in one place. It helps structure the project, speeds up development and allows to reuse code in different BAS projects

If in simple words — imagine a small packing box. In it you can put different things: dishes, microphone, cup, so that it would be convenient to carry things. So, module — this is exactly such a box. Inside it are located different functions, and each performs its task: cup — for drinking, microphone — for recording sound. Exactly the same way functions in a module perform concrete actions inside your script

The entire toolbar of BrowserAutomationStudio represents a catalog of diverse modules, each of which is intended for performing specific tasks

BrowserAutomationStudio module catalog

Advantages of Modules:

  • Time saving — with the help of modules you get rid of the necessity to create the same functions from scratch every time. It's enough to develop a module once and use it in any BAS projects where it is required
  • Optimization and readability of code — modules allow to «hide» complex code behind one convenient cube. Your project will become to look neater and more visual
  • Improved support for code updating — if it's necessary to change functionality in separate parts, it's enough to make changes in the module, update it and the project actions
  • Convenient testing — modules can be tested separately from the main project, which simplifies debugging and error fixing

Module technology — key to simplifying everyday work. Let's figure out how to create a module step by step on the example of Emulator Module

2. Creating a module for page emulation Emulator Module

Task of the module

  • Go to the specified web page. After its loading the module should emulate user activity, while the duration of work is set by the user
  • Take a screenshot by the specified selector, and save it in the project directory

For creating a module it's necessary to understand how functions work in BrowserAutomationStudio. You can familiarize yourself with their work in this article: More about functions

In BrowserAutomationStudio actions in the module are implemented through functions, we need to create a function and fill it. From the task of the Emulator Module module, it can be understood that we need to create two functions:

  • Function №1: Will go to the site page Waiting for Full Loading of the page action «Start emulation of inactivity»
  • Function №2: Screenshot saving screenshot output information to log return to the module user in variable the path to screenshote

Module function diagram

Module project


To quickly demonstrate module creation, we prepared the Emulator_Module project, containing the main logic

Also two functions were added to the project in advance, which we created earlier. We omitted their implementation in order to immediately proceed to demonstration of the module's work


Function №1

Task: go to the page specified by the module user (parameter #1), emulate work for the specified amount of time (parameter #2)

  1. Function name: Load_site_await_emulation
  2. Function description: Action of page loading and emulation
  3. Return value: (This option is not required for the current task)
  4. Parameter #1: User enters link to the site. Type — «String or expression», to give the module user maximum freedom of action
  5. Parameter #2: User selects type «Number or expression» by analogy with the first parameter

Final view of function №1

Function №1 with filled parameters

Parameter №1

Parameter #1 with entered values

Parameter №2

Parameter #2 with entered values

Function code

Function Code

Important! When using third-party modules your module becomes dependent on them. If the needed module is not installed in the project (for you or for the end user), the work of your module will be disrupted


Function №2

Task: Take a screenshot by the selector passed by the module user, then save the screenshot and output to log the path to the screenshot (parameter #1)

  1. Function Name: screenshot_and_save_screenshot_to_png
  2. Function description: This action will take a screenshot of the entire screen, after which it will save it in the project directory with .png format
  3. Return value: Screenshot saving path. The module user will get back in variable «MODULE_EMUL_SCREENSHOT_PATH» the location of the screenshot
  4. Parameter #1: The module user should pass selector for the «Screenshot» action

Parameters of function № 2 differ from function № 1:

  • In parameter Selector_for_screenshot option «Default value» is added
  • Besides that, function № 2 has a return value — the module passes the path to the saved screenshot into a variable

Final view of function №2

Function №2 with filled parameters

Filled Parameter #1

Parameter #1 with entered values

Function code

Function Code (Part 1)
Function Code (Part 2)


Additionally to functions:

1. Passing resources to module functions

When writing functions for your module, to pass resources to the function, it's necessary to call it using the «Function call» action (module «Script logic» → action «Function call») and fill the parameters with the needed resources

⚠️ Important: if you don't perform the «Function call» action, parameters will not be passed, and their values will remain null

Press this button to pass resources to function parameters


2. Testing module logic

For convenience of testing it's recommended to use the «MAIN» function. It executes during debugging, but when compiling the module it's automatically excluded from the final build


3. Useful tips when creating modules

«Tip» - Function settings in module interface


«Tip» - How parameter is displayed in module

3. Installation and use of module

After preparing two functions, the next stage is their integration and compilation into a full-fledged module

Eight steps to module compilation

1. Complete work on the script

Module installation is impossible while the script is running


2. Go to the «Module Manager» window

Location: top panel of BrowserAutomationStudio, button «Module Manager»

In the «Module Manager» tool the following settings are available:

  • Create / Install a module
  • Search
  • View all existing modules
  • Disable/enable module using combobox to the right of the namee
  • Open folder with module by clicking on module title
  • See version, name and description of module

3. To compile the module press the «Create module» button


4. Selection of functions for compilation

Earlier, at the development stage, two functions were created. Now comes the next step — their compilation into a full-fledged module

Selection of functions for compilation


5. Module description and its name

Click on the «Show more» button to expand and see all available fields

In the image below on the left the corresponding fields are shown, as well as their appearance in the module interface

«Tip» - Example of compilation settings in module interface


6. Load logo for the module

Regardless of the original logo size, it will be automatically scaled to 32×32 pixel format


7. Selection of additional parameters

When going to the page with additional module compilation parameters two checkboxes are displayed:

  • Random function name (recommended) — if the same function names are used in different modules, this can lead to conflicts. Enabling this option helps avoid such situations
  • Install module immediately after creation — this option allows to automatically install the compiled module, and when updating automatically replaces the old version with the new one, and installs the updated one in the project

We'll leave both checkmarks active and proceed to the finale of module compilation


8. Finale — module is compiled and installed in the project

  • After pressing the «Finish» button — BrowserAutomationStudio compiled the module and automatically opened the folder where it is located in .zip format
  • The module automatically installed in our project. This can be checked by opening the «Module manager» window
  • The module also shows up in the catalog of other modules

🎉 Successfully added module

Additional information:

  • If you need to update the module without going through all the steps again, in the compilation dialog box press the «Skip» button

Quick module compilation by pressing one button


Thank you for your attention

In this article we examined a simple module consisting of several functions. However, imagine how much time can be saved if you start creating modules and combining them with more complex everyday algorithms!

Source files for practice:

  1. Module from article.zip | Module source file.xml
  2. You can find ideas for modules at the following link

You can share your module, as dozens of other authors have done ❤️

Module thread on the forum — EN | RU

Additional study materials:
1. Functions in BrowserAutomationStudio
2. Module localization. How to rename actions in the module


English channel

YouTube

Twitter