Quick start of browser automated testing based on Dusk in Laravel

---

brief introduction

The unit test and function test we introduced earlier are based on PHPUnit. As a PHP test framework, PHPUnit is very powerful, but it can only be used to test back-end interfaces and functions, and cannot simulate browser side behavior to test JavaScript based front-end applications.

To this end, Laravel provides an official extension package for browser testing - Laravel Dusk. This feature was introduced in Laravel 5.4. The previous version used Symfony BrowserKit components to simulate Web browsers, but it is not a real browser after all, so there are many restrictions.

Laravel Dusk is based on ChromeDriver (One Selenium WebDriver, supporting desktop and mobile Chrome browsers) and Facebook php-webdriver (Selenium WebDriver PHP client). We can use it to simulate any operation in the browser, so as to achieve the goal of automated browser testing.

Laravel Dusk has provided us with the bottom packaging. You don't need to install Selenium separately or have the experience of using Selenium before. You can easily use the methods provided by Dusk to automate browser testing. Let's briefly introduce how to implement browser automated testing based on Dusk in the Laravel project.

Note: Selenium is a set of tools for test automation. For more details about Selenium, please refer to Official Documents , or read the corresponding Chinese documents 。

Installation Configuration

First, install the Dusk expansion pack through Composer in the root directory of the Laravel project:

 composer require --dev laravel/dusk

We only install Dusk in the local development environment or test environment, so we add --dev Option. If it is installed in the production environment, there is a security risk. For example, you can log in to the application as any user, so it is not recommended to use it in the production environment.

Next, run the Artisan command dusk:install Perform initialization:

 php artisan dusk:install

The command will tests Create a Browser Directory and contains a test case example:

From the root, browser test cases are also inherited from PHPUnit\Framework\TestCase , so you can use all the assertion methods provided by the PHPUnit and Laravel frameworks mentioned above in the use cases.

You may have noticed that the generated subdirectory also contains a screenshots Directory. When the test fails, Dusk will take a screen capture and save the picture to this directory, which is very helpful in debugging.

Next, you need to update .env In file APP_URL The configuration item can be configured as the virtual domain name of the project, such as http://laravel58.test , the domain name needs to be consistent with the configuration in the Web server so that it can be accessed through the browser.

Note: In addition, you can also let Dusk choose to use its own independent environment configuration file, such as .env.dusk.local If it is a test environment, the corresponding configuration file is .env.dusk.testing 。

Run Test

After the above initialization, you can run the browser test based on Dusk through the following Artisan commands in the project root directory:

 php artisan dusk

This command will run tests\Browser\ExampleTest.php In file ExampleTest ：

 class ExampleTest extends DuskTestCase { /** * A basic browser test example. * * @return void */ public function testBasicExample() { $this->browse(function (Browser $browser) { $browser->visit('/') ->assertSee('Laravel'); }); } }

Among them, we browse Method passed in a containing Browser Instance callback, in which we can Browser The method provided by the instance simulates various operations of the browser, and then tests the results through the assertion method. For example, through visit Method simulates accessing in the browser http://laravel58.test/ URL， Then through assertSee Method asserts whether the result page contains Laravel character string.

If the test passes, the results are shown as follows:

If the Laravel Replace the string with other strings that will not appear on the result page, such as Academician , the test fails:

At the same time tests/Browser/screenshots Generate a screenshot of the page when the test fails in the directory.

After reading this basic test case, let's look at some slightly more complex examples.

Forms and Certification

You can also interact with the form through Dusk. Here we are based on Laravel Certified Scaffold Code Simulate form interaction to test the user authentication function.

After the complete certification scaffolding code generation and database migration, we create a new browser test case through the following Artisan command RegisterTest ：

 php artisan dusk:make RegisterTest

The command will tests/Browser Generate under directory RegisterTest.php File:

 <? php namespace Tests\Browser; use Tests\DuskTestCase; use Laravel\Dusk\Browser; use Illuminate\Foundation\Testing\DatabaseMigrations; class RegisterTest extends DuskTestCase { /** * A Dusk test example. * * @return void */ public function testExample() { $this->browse(function (Browser $browser) { $browser->visit('/') ->assertSee('Laravel'); }); } }

modify testExample The method is as follows:

 /** * A Dusk register test example. * * @return void */ public function testExample() { $this->browse(function (Browser $browser) { $browser ->visit ('/')//Visit the home page ->ClickLink ('Register ')//Click the registration button ->AssertSee ('Register ')//Asserting that the registration page contains Register text //Populate the registration form with these values ->value('#name', 'test_01') ->value('#email', ' test_01@laravel58.test ') ->value('#password', 'test123456') ->value('#password-confirm', 'test123456') ->Click ('button [type="submit"] ')//Click the registration button ->AssertPathIs ('/home')//After successful registration, jump to the/home page ->assertSee("You are logged in!");  //  Prompt text after successful login }); }

In this test case, we first visit the application home page, and then pass the clickLink The method simulates clicking the registration link. After entering the registration page, first assert whether the page contains the "Register" text, and then pass the value Method to fill in the form. In this method, the first parameter is the CSS selector, and the second is the value of the corresponding input box. After filling in the form, click click Method Simulation Click the registration button to submit the form. After the form is submitted and registered successfully, assert whether the page jumps to /home Route, and assert whether the login success prompt text appears. So far, we have written an automated test of the registration process The first tutorial With the test case written by Laravel function test, the browser test function is more powerful and more integrated, because the function test can only simulate the specified back-end route, while the browser test can simulate the complete user operation process, and can test a complete transaction in a use case.

After writing the browser test code, run the test case again:

 php artisan dusk

The test is passed and the results are shown as follows:

At this time, check the database, and you will find that users A new table named test_01 Test user for.

You can imitate the registration process to test the user login process. In addition, Dusk also supports many interactions with other page elements and additional encapsulated assertion methods. For details, refer to Official Documents 。

In the next tutorial, we will demonstrate how to write automated test cases for Vue components through Dusk in the Laravel project.