Ui Testing With Selenium In The Outsystems Platform- Selenium Framework

An Insight into the Selenium Framework

This article focuses on how to use Selenium on the OutSystems platform effectively by specifying the web element locator topics and recommendations on the use of technology. It also explains the significance of selenium for testing, UI testing tools, and UI testing framework.

Using Selenium to Perform UI testing

Selenium is used for conducting automation testing of user interface testing. As it is the best platform to automate common user interactions through a browser in web applications, Selenium is widely used in this industry. But, how to do UI testing and what is selenium framework?

With Selenium we can use two tools according to our needs

• Selenium IDE: It is an integrated development environment that it implements as an extension in browsers that allows you to write, edit, and play HTML scripts, simulating interactions with a Web application.
• Selenium WebDriver: Allows you to create more complex fully automated scenarios.

Elaborating UI Test with Selenium

To perform the tests, use the Selenium IDE platform, via plugin in any browser. It writes the scripts using a text editor and adjustments or additions can be made to a script that is already recorded. This approach is the easiest to use with the Outsystems platform.

Here are some Important Steps

1. Registration 

Use the automated scriptwriter to generate the scenarios while you interact with the web application as a user. This will generate a series of commands that will be visible, editable, and reproducible on the page.

2. Adjust Locators

This is a very important step, whether you are using the Selenium IDE or WebDriver. To determine which element a given command is operating on, some are better than others when using OutSystems. Those that are generated by the recorder are not very stable, as they can change as the application evolves. 

This is the area where the specifics of the platform have a greater impact. The next main section of this document will provide strategies for configuring OutSystems to find Web elements in Selenium.

3. Ensure Synchronization

UI interactions are often asynchronous. When running tests, we can verify that the page has been updated with the previous commands.

Generally, click events do not wait for the page to load when the clickAndWaitevent is complete. You can also include “waitFor” commands that will pause the script to the specific visible element, which is required for javascript or Ajax-generated objects after loading the page.

4. Add Checks

Checks and claims are essential in a script to validate the elements and values displayed on the page where you advance in interaction with your application. The writer does not know what you are looking for on a page to determine whether the state is as expected, so you will need to include them in the script.

Also Read: Selenium Testing Service Provider

5. Export to WebDriver

For automation, you can choose to export the script as a WebDriver code file with the Selenium IDEexport option. This will provide a starting point for the development of your WebDriver classes.

6. Element Finders

Whether you’re using Selenium IDE or WebDriver, there are several locator strategies you can use in Selenium. Locators can be used in many strategies, some of which are better than others when building dynamic applications in comparison. You should note the CSS selector prevents locators from changing when you modify your screens.

The platform generates HTML ID attributes dynamically, depending on the content determined to be sent to the client or browser in each request, based on business rules or screen conditions. ID attributes are subject to change. When adding new test scripts, the Selenium IDE defaults to the IDselector. At this point, to increase the maintainability of the tests, you must change the default locator according to the following guidelines:

• If your command operates on a link and there is only one link on the screen with that text, use the link finder with the link text;
• If the command operates on entries or other unique widgets on the web screen, use a CSS selector along with a custom style name in the widget;
• If it repeats elements on the same page (such as widgets within table and list records), use a custom ID containing the row number in its value and locate it with a CSS selector.

7. Simple Locators

Let’s assume that we are logging into the Login page and pressing one of the user’s predefined links as shown below:

As can be seen in the figure above, Selenium IDE used the link ID for “Charlotte Y Anderson” to locate the link during the recording session. Instead, we can use the link finder and link text because it is unique on this web screen. This script would produce the same result, being independent of the link ID. If we later choose to change the location of the link on the page, the script will continue to work as long as the link text remains the same.

8. CSS Selectors

If we modify the scenario of the previous topic by adding a new credential to the “admin” user and then clicking the Login button, the platform generates new Data Entry IDs and the Login button as locators. 

In this situation, when dealing with buttons and entries, the “link” locator of the previous section cannot be used. In this scenario, it becomes useful to use locators more attuned to the structure of the page and can use XPath or CSS selectors, which are the most used today. CSS selectors are actually very powerful, presenting as a particular advantage the ability to locate web elements in a structured way. 

For example, first you find a specific table on the web screen and then look for an entry within it. We strongly advise you to familiarize yourself with CSS locators if you want to run too many tests in the browser. We usually use a “dummy” CSS styles in the inputs and buttons to be able to easily locate them, and you can add a new custom “style” to each button and data entry in Service Studio, as shown in the image below:

As can be seen in the image above, we added a fictitious style “SeleniumUsernameInput” that does not need to be defined in the style sheet of the CSS module. We should only note whether it was generated in the HTML element of the data entry after the eSpace was published. We can then use CSS selectors in our script to locate the entries and buttons through the new dummy styles: “css=<Name_Of_Dummy_Style>“

Therefore, locators can identify Web elements using CSS styles that were created specifically for testing purposes, so that the script becomes much more robust and can be used in the future.

9. Tables and Lists – Using Custom IDS

A common situation when performing UI testing in OutSystems applications is to find web elements that repeat on the screen, being included in tables and lists. Going back to the previous example, let’s assume that after logging in, we want the script to expand the details of Andrea Mccarthy’s employee.

The Selenium IDE writer produces a locator for the link click based on the web element ID. Using a dummy CSS style on the link will not work because there are multiple links in the list that share the same style. However, setting a custom ID in Service Studio for the employee name will resolve this.

We created the extended property called data-selenium ID, which is generated as a custom tag with the same name in the HTML element of the page. The value is defined by an expression that contains “Person” with the row number in the table records.

Summing Up

On the resulting page, we can check whether the Andrea Mccarthy element contains a tag “seleniumid=Person3”. All similar elements will have a different number in value.

Finally, modify the Selenium IDE script to use a CSS selector using the custom ID. The “css=span[“seleniumid=Person3”] locator will search for the span that contains the custom selenium ID. That way, we are able to find elements within the table and list records using identifiers. Thus, now you know in detail about the selenium framework.

Also Read: Selenium Python Frameworks