Automated web application testing: practical guide and insights!

With the launch of the new version of YourTexGuru, we have significantly strengthened our automated testing for the web application. This strategy aims to ensure a high level of quality, reliability, and optimal user experience while supporting the continuous development of new features.

Our service is built on an architecture that integrates many different components and technologies. This complexity made it essential to implement a rigorous testing strategy to ensure the robustness of the entire system.

Table of Contents

Why automate web application testing?

Automating web application testing allows a development team to quickly detect errors, ensure better functional coverage, and reduce regressions. Unlike manual testing, automated scripts offer fast and repeatable execution while minimizing testers’ efforts. This is especially critical for applications that require regular validation of user interfaces and interactions with complex data.

The different levels of automated testing

To address validation needs and the specific challenges of our architecture, we structured the tests into three levels.

1. Unit testing

Unit tests are the foundation of any automated testing strategy for a web application. These tests validate the behavior of individual functions, classes, or methods in isolation, without depending on external components like databases, APIs, or third-party systems. The main goal is to ensure that each “building block” of the application works correctly on its own.

Unit tests are typically quick to execute and easy to implement, making them an excellent starting point for automating testing.

Why are these tests essential?

Quick bug detection: These tests catch errors directly within the business logic.
Living documentation: Unit tests serve as a reference for understanding the expected behavior of functions or classes.
Ease of evolution: During modifications or refactoring, these tests ensure that the expected behavior remains intact.

2. HTTP Controller testing

HTTP controllers serve as the bridge between the user interface and business logic. Testing these elements is crucial to ensure the quality of interactions with the web application. These tests simulate HTTP requests and verify the service responses. For example, we automated tests for all AJAX calls to ensure they function correctly in all scenarios.

To manage the data required for these tests, we use an in-memory database like SQLite, which simplifies configuration and ensures effective isolation. We also use mocks to simulate external services and focus on internal logic. Additionally, Laravel’s RefreshDatabase ensures that each test script starts with a clean database.

3. Browser testing

Browser tests play a key role in validating user interfaces and features relying on JavaScript or AJAX calls. These automated tests simulate real user actions, such as navigating through the app or interacting with forms.

For these scenarios, we use dedicated tools like Selenium or Laravel Dusk. These tools enable testing of complex cases, such as dynamic data display or the behavior of a feature in response to asynchronous scripts.

A classic example is an automated test for account creation, validating the entire user flow from entering information to accessing the main interface.

Challenges of automating web tests

1. Managing external services

Automating tests involving interactions with third-party tools or external services can be complex. To ensure reliability and script speed, we use mocks to simulate responses from these services.

In Laravel, there are several ways to create mocks. For example, you can mock an HTTP response:

HTML

 Http::fake([
        '<https://api.example.com/users/123>' => Http::response([
            'id' => 123,
            'name' => 'Jane Doe',
            'email' => 'jane.doe@example.com',
        ], 200),
    ]);

This approach works if your code uses Laravel’s HTTP client. Alternatively, Laravel offers a solution to mock services:

HTML

$this->mock(EmailService::class, function ($mock) {
    $mock->shouldReceive('send')
        ->once()
        ->with('john.doe@example.com', 'Welcome!', 'Welcome to our platform')
        ->andReturn(true);
});

The choice depends on what you want to test. If you aim to test the controller code, it makes sense to mock the service it uses.

2. Configuration for browser tests

Browser tests require a database shared between the server and test processes. While this configuration may seem straightforward locally, it requires special attention in a continuous integration (CI) environment like GitLab CI.

Here’s an example of a GitLab CI configuration for automated tests of a web application using Laravel Dusk:

HTML

test-browser:
  stage: test
  image: bitnami/laravel:9.5.2
  services:
    – name: mysql/mysql-server:8.0
      alias: mysql
  script:
    – apt update
    – apt install -y xvfb wget
    – wget <https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb>
    – apt install -y ./google-chrome-stable_current_amd64.deb
    – composer update –no-scripts –lock
    – php artisan key:generate
    – php artisan dusk:chrome-driver –all
    – php artisan clear-compiled
    – Xvfb :0 -screen 0 1920x1080x24 &
    – export DISPLAY=:0
    – ./vendor/laravel/dusk/bin/chromedriver-linux/chromedriver –port=9515 &
    – php artisan serve –no-reload –host=0.0.0.0 –port=80 &
    – php artisan dusk

This example sets up MySQL as a Docker image alongside the tests, installs Chrome and its driver, and then runs the service and Dusk tests.

Here’s an example of a Dusk script to test a user login process in a web application:

HTML

$this->browse(function (Browser $browser) {
            $browser->visit('/login')
                ->type('email', fake()->email)
                ->type('password', 'secret')
                ->click('input[type="submit"][value="OK"]')
                ->waitForText('Stratégie de contenu')
                ->assertPathIs('/home');
            $this->checkJsLogs($browser->driver->manage()->getLog('browser'));
        });

This type of script ensures that the user interface functions as expected.

The benefits of automated testing

Implementing a testing strategy requires an initial and ongoing investment, but the benefits are clear:

Improved feature quality: Bugs are identified quickly, even in complex scenarios.
Reduced regressions: New features don’t affect existing parts of the application.
Time savings for teams: Testers can focus on advanced scenarios while scripts handle repetitive tests.
Increased user confidence: Tests ensure that the interface and features meet user expectations.

Automated tests are a critical pillar for ensuring the quality and reliability of modern web applications. With tools like Selenium, Laravel Dusk, and tailored configurations, we’ve ensured an optimal user experience while streamlining the development and maintenance of our application.