Web & Mweb UI Testing

Hi everyone,

In this article, I will explain the fundamental concepts of Web and Mobile Web UI testing, share best practices, and provide some tips for conducting a successful testing process.

What is Web/Mweb UI Testing?

Web/Mweb UI testing is a testing method used to test the accuracy and functionality of a web application’s user interface.

When we say User Interface test, they are the areas where we test both visual, functionality, and functionality requirements and contact our users. When it comes to the user interface, it should come to mind not only to test the visuality but also to test the functionality of the user on the application.

Why is it important?

• It improves the user experience,
  It is used to validate the user experience of a web application. These tests help identify problems that users may encounter while using the application and increase the usability of the application.
• It helps detect errors,
  This makes the application more reliable and reduces the potential impact of errors.
• Changes are tracked,
  When a new version of the application is released, it ensures that errors and problems are quickly detected and corrected.
• It saves time and resources in the development process,
  It helps detect and fix errors early, saving time and resources during development.
• It reduces operating costs.
  Early detection of errors improves user experience and reduces operating costs. Therefore, user interface tests are vital for projects.

How do we advance our testing processes?

We support our manual test flows with our automation tests. Manual and automation tests are progressing in parallel in our sprint processes. While creating the output of our test scenarios in our manual processes, we are looking for answers to questions such as which ones are tested in automation, which ones should be tested in automation, and what we need to test in automation.
We also pay attention to the use of a common language among automation, especially in the test scenarios we prepare in manual processes. By incorporating automation tests into our processes, we save time while minimizing human errors. We provide early detection of errors with the rapid test process, which is one of the most important advantages of automation for us.

1-Planning

• Test scenarios are determined and a test plan is prepared.
• Automation test scenarios, critical levels of test scenarios, repetitive test scenarios, and scenarios where manual tests will not be applied are determined.
• Priorities of test scenarios are determined.

2-Preparation

• Test scripts are written for automation scenarios and test scenarios are prepared.
• Required test data is generated.
• A suitable test environment is prepared for written test scenarios.

3- Implementation

• Manual tests are performed, and the results are recorded.
• Automation scenarios are executed, and the results are recorded.
• The test results are examined, and errors are identified.

4-Error handling

• Discovered errors are documented and reported by creating tasks for them.
• The status of the errors is tracked, and their solutions are verified.

5-Reporting and Analysis

• Test results are collected and reported.
• Test results are analyzed.
• Test cases are updated and improved according to requirements.

6-Repeated Test

• Changes are made and retested.
• Automation tests are updated and rerun.

7-Completion

• After the test cases are completed, the results are reviewed and reported.
• Once the application is approved by the testing team, it undergoes validation to become a release version.

Web UI Automation Test Processes

1-Automation tool selection
The first step is to select a suitable tool for Web/Mobile Web UI test automation. Tools such as Selenium and Cypress are commonly used for Web/Mobile Web UI test automation.

2-Preparation of test scenarios
Test scenarios are created using the automation tool. These scenarios serve as a structured outline consisting of a series of steps and expected outcomes.

3-Coding of test scenarios
The prepared test scenarios are implemented in a programming language compatible with the selected automation tool. Once the tool is chosen based on project requirements, the programming language is selected accordingly. For example, the Selenium testing framework supports Python, Java, and JavaScript, whereas Cypress only supports JavaScript.

4-Opening the web driver
The automation tool opens a web driver for the execution of test cases. This driver redirects to the URL of the application where the test cases will be run. Here we can talk about drivers such as Webdriver, WebdriverIO, and WebdriverJs.

5-Performing the steps
The automation tool performs the steps in the test cases. These steps include actions to perform in the application’s user interface.

6-Editing the test report
The automation tool concludes the results of the test cases and generates a test report. This report includes the pass/fail status of test cases. Report outputs in HTML, XML, and JSON formats can be obtained.

Which Technologies Do We Use?

The tools to be used according to the demands and requirements of the project should be analyzed and selected.

Our Web UI Automation Testing Practices

• Explicit test names
  We use the global language English for test terminology. The importance of naming here is that it is important for us that another person who will continue to code after us understands what is written up to 80%, if not 100%, of the project. In addition, it is ensured that the author not only understands the problem when he looks at it but also precisely detects the problem for errors that may occur as the size of the project grows.
• Selectors are specific and clear
  The specific and clear selectors allow easy adjustments for possible errors. While giving the name of the selector, we create it by giving a step-by-step name about where the selector is used.
  Which feature file, which stream, text? Button? Is it input? We attach importance to selector definitions by specifying them in order.
  It provides a great benefit when maintenance is carried out in large-scale projects.
• Writing separate tests for each case
  For example, in the 10-step login scenario, instead of writing all the steps in a single case, we divide them into a scenario consisting of the least meaningful steps. This prevents errors in the steps that can be independent when it fails, and it also facilitates the analysis of the error.
• Avoiding the use of the wait
  The use of Wait creates an unprofessional appearance in scenarios other than necessity. For example, there may be delays in a page transition due to factors such as the internet and platform, but there are controls that can be made other than waiting. In addition, any waiting time to be added is a process against the time-saving and speed principle of automation. For this reason, it is an important step not to add time to the code when it is not a necessity. Because the faster we complete our pipeline processes, the more it gives us a big plus, especially in our production processes. Every delay in the pipeline process creates a disadvantage for us.

Example of a project written in Python using a robot framework

• Label use
  Tags allow us to run the test script both locally and to make tag-specific test runs while the custom runner is running in Jenkins. At the same time, it allows us to see which scenario we wrote for which task by using the id of the task made in the tags we gave in the test scenario as a tag. In this way, when the task, the script written, and the running automation meet at a common point with this tag id, it allows us to easily make the desired changes in retrospective tests or the feature.
• Supporting parallel test runs to shorten pipeline processes
  We shorten our test processes by running parallel tests in our pipeline processes. We support parallel test runs in not every project but large-scale projects. Although it saves time in the pipeline process and enables fast detection of problems, parallel testing may not be possible in some scenarios. For example, running two different scenarios that want to access the same resources at the same time can cause problems. Another disadvantage is that parallel test runs may require more CPU and memory.

Thanks for taking the time to read the article.

If you want to ask any questions, you can contact me at Müge Güngör

At the same time, if you want to get more detailed information about this article, you can reach the Web & Mweb UI Testing presentation I explained at Teknasyon Tech Day’23 here.