Automated UI Testing: Framework Development and Integration

This is a detailed guide on how Alin Groza (Principal Test Engineer at Visma) created an automated UI framework using BrowserStack. It is a three-part series, in which Alin will deep dive into:

• Framework development and integration
• Implementation and testing
• Results and achievements

In this guide let us seem at fabric evolution and integration.

Background

In 2020 Visma.net ERP created a projection to move the payment service from Monolith to the Microservice architecture. From the start of the newly created service, a new technical resolution had to be designed for performing machine-controlled UI tests.

Since this is a proficient answer for a full CI/CD process, the framework is designed to include all elements that make it an integrated part of the automated deployment process.

The model is integrated with the instrument already in place, for instance & # 8211; Github, TeamCity, Slack, and Microsoft.NET. In early words, the solution is a brand-new implementation but even compatible and integrate with the subsist creature on Visma.net ERP.

When running tests, the main requirement for the model is to be a solution—allowing tests to be executed on OS X (the 10th version of Mac OS) and Windows on any web browser.

To make the framework complete and to complement the puppet mentioned above, I needed to chance a cloud platform that could be use as both examination base (with operating system and browser) as easily as test performance (integrated with CI/CD creature, debug, reporting, logging, etc.) Keeping all this in mind, I prefer to act with.

Overview of the UI Automated Testing Framework

Below you find an overview of the framework part:

This is how the framework function:

1. GitHub stores C # Selenium tests code which will be used by TeamCity when create the flesh.
2. TeamCity gets the code from Github, creates the build, and mail it to BrowserStack.
3. BrowserStack runs the tests and creates reports.
4. BrowserStack post a notification on Slack when study are available.
5. Slack shows a link to BrowserStack reports.

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

Below you can see a diagram with the fabric operation steps mentioned above:

For the framework to create actual tests, the follow are required:

1. Programming language: I have selected C # as Object-oriented programming (OOP) since the full ERP platform is developed in C #
2. Page Objects Model as a design shape: is a extremely efficient practice for UI mechanisation reducing code duplication and improving
3. Selenium: is an open-source puppet for web automation on cross-platforms. I have selected it because it supports the Safari browser (one of the main requirements) and provides support and functionalities mostly for any matter touch to UI automation.

Integrating BrowserStack

BrowserStack is a cloud-based platform that allows you to screen applications across 3000+ different browser versions, devices, and go systems. It has built-in characteristic for the next items:

• Running exam in any browser and operating scheme
• Generating and store study including videos, visual logs, and step-by-step examination execution details in a user-friendly UI
• Debugging creature as piece of account (e.g. networks logs)
• for sending notifications
• Creating local tunnels for essay internal network URLs

The UI mechanization framework uses all these features and by using them, a lot of time was saved when I make the model from scratch. Access to any combination of browsers and operating systems is a huge advantage because it enable running trial without any limit.

BrowserStack gives the following benefits:

1. BrowserStack is fully replacing VMs (Virtual Machines) for running examination. This saves the time, and exploit involved in creating and maintaining the VMs.
2. Basically, any combination of OS and browser is uncommitted to run tests on BrowserStack (including the latest and legacy variant). Here is a complete list of.
3. BrowserStack has a for Slack, TeamCity, GitHub, and even Jira.
4. BrowserStack come with built-in features for reporting. The user-friendly reports were already created, and ready to be integrated into our framework. As a consequence, anyone on the team can check reports such as data validation, asserts, visual logs, meshing logarithm, a video transcription of the test run, etc.

In the undermentioned four images, you will see an example of a trial report.

The BrowserStack dashboard provides info about the chassis such as version tested, environment, list of executed tests, and position.

BrowserStack Dashboard

The trial story can be accessed by clicking on a test in the splasher. The study contains information about OS, browser version and tryout status. You can also watch the video recording of the test.

Test report

By zooming in on the tab “Text logs”, you can see the step-by-step details of the test execution. Each pace shows the proof position. By clicking on the clip for each step it will show the picture performing at that step/point in clip.

Text logs blind

By clicking on the tab “Network Logs”, you can see the details of the network logarithm. These logs show the interaction between the front end and the hind end. It is a useful tool for debugging failed tests. The meshing logs will likewise display bugs/problems/issues found elsewhere.

Network logs

In this undertaking, there is an internal environment that can be access simply inside the company & # 8217; s internal network. However, BrowserStack offers a NuGet packet called “ BrowserStackLocal ” which contains methods to make a local tunnel. Basically, the Set Up method of each test contains the call of the method for creating a local connector tunnel, while the Tear Down contains the corresponding one to fold the local connection tunnel.

Coming up adjacent

In my upcoming guide, I will surge in and present how tests are implemented and the way they are running, include BrowserStack reporting.

Related Guides