1 Introduction
Automation testing is an automated process that runs the steps of performing a test case by machine, which reduces errors, time and boredom with manual testing. Especially at the end of the project, the number of test cases is much, the regression test will take a lot of time. Moreover, when the system has many different languages, it will be difficult for the tester and prone to errors.
As a developer, usually we only write unit tests in the project, but unit tests only help us cover the lines of codes (line of codes), the inputs and outputs of the functions that we have written but not covered. gain user actions and actions on the system. And in version 5.4, laravel has launched a new feature called laravel dusk to help us do this.
2 installation
2.1 Project
The first step is to prepare a project to run the test, here I have prepared a sample project with the functions to log in, register, and add dirty correction to serve the test. You can clone here
2.2 Installing the Laravel dusk package
Add the laravel dusk package with the following command:
1 2 | composer require --dev laravel/dusk |
And install
1 2 | php artisan dusk:install |
After running the above command, Laravel will create a tests / Browser directory containing the sample test cases, download reports, and install chrome drivers. In case of running an error due to chrome incompatibility, you can try some of the following:
- Update google chrome to the latest version and then run it again
1 2 | <span class="token function">sudo</span> <span class="token function">apt-get</span> --only-upgrade <span class="token function">install</span> google-chrome-stable |
- Check the current chrome version on your device (go to google chrome -> Help -> About Google Chrome) and install chrome dirver with the corresponding version by command, eg chrome 79.0.3945.88
1 2 | php artisan dusk:chrome-driver 79 |
2.3 Configuration
Let’s take a look at the driver method in the DuskTestCase.php file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token comment">/** * Create the RemoteWebDriver instance. * * @return FacebookWebDriverRemoteRemoteWebDriver */</span> <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">driver</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">ChromeOptions</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">addArguments</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'--headless'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'--start-maximized'</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// ....</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span> |
$ options is a set of options when running tests, by default there will be --headless options that do not enable the browser to simulate when running the test, --start-maximized enable chrome with full screen size to simulate When running the test, you can refer to the other options here . Here I will remove the --headless option to enable the browser to simulate when running the test. My code will be as follows
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token comment">/** * Create the RemoteWebDriver instance. * * @return FacebookWebDriverRemoteRemoteWebDriver */</span> <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">driver</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">ChromeOptions</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">addArguments</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'--start-maximized'</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> RemoteWebDriver <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'http://localhost:9515'</span> <span class="token punctuation">,</span> DesiredCapabilities <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">chrome</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">setCapability</span> <span class="token punctuation">(</span> ChromeOptions <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token constant">CAPABILITY</span> <span class="token punctuation">,</span> <span class="token variable">$options</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span> |
2.3 File env
By default, Laravel dusk will use environment variables in the project’s .env file, to manage the environment variables specifically for laravel dusk, we copy the .env.example file to a file called .env.dusk. In this article I ran the test at localhost, so I will bark the variable APP_URL as follows:
.env.dusk
1 2 3 4 5 6 | APP_NAME=Laravel APP_ENV=local APP_KEY= APP_DEBUG=true APP_URL=http://localhost:8000 |
3 Write a test
Now we will write a test. First I will delete the ExampleTest.php file in the tests / Browser folder because in this example I will test the registration function of this project.
With four field names, email, pasword, password confirmation and corresponding html code as follows:
1 2 3 4 5 6 7 8 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> name <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> text <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-control @error( <span class="token punctuation">'</span> name <span class="token punctuation">'</span> ) is-invalid @enderror <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> name <span class="token punctuation">"</span></span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {{ old( <span class="token punctuation">'</span> name <span class="token punctuation">'</span> ) }} <span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-control @error( <span class="token punctuation">'</span> email <span class="token punctuation">'</span> ) is-invalid @enderror <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {{ old( <span class="token punctuation">'</span> email <span class="token punctuation">'</span> ) }} <span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> password <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> password <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-control @error( <span class="token punctuation">'</span> password <span class="token punctuation">'</span> ) is-invalid @enderror <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> password <span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> password-confirm <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> password <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-control <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> password_confirmation <span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">autocomplete</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> new-password <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> |
Create a test function registration file with the command
1 2 | php artisan dusk:make RegisterTest |
Laravel dusk will generate a RegisterTest.php file in the tests / Browser directory with the following content:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">namespace</span> <span class="token package">Tests Browser</span> <span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Illuminate Foundation Testing DatabaseMigrations</span> <span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Laravel Dusk Browser</span> <span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Tests DuskTestCase</span> <span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">RegisterTest</span> <span class="token keyword">extends</span> <span class="token class-name">DuskTestCase</span> <span class="token punctuation">{</span> <span class="token comment">/** * A Dusk test example. * * @return void */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">testExample</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">browse</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> Browser <span class="token variable">$browser</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$browser</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">visit</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'/'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">assertSee</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'Laravel'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span> |
I will delete the test example and replace it with my test cases
- The test goes to the Register page and checks to see if there are elements
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token comment">/** * Test go to register page and see elements. * * @return void */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">testGoToRegisterPage</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">browse</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> Browser <span class="token variable">$browser</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$browser</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">visit</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'/register'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">assertSee</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'Register'</span> <span class="token punctuation">)</span> <span class="token comment">// Tìm element bằng thuộc tính name</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">assertPresent</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'input[name="name"]'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">assertPresent</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'input[name="email"]'</span> <span class="token punctuation">)</span> <span class="token comment">// Tìm element bằng thuộc tính id</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">assertPresent</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'#password'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">assertPresent</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'#password-confirm'</span> <span class="token punctuation">)</span> <span class="token comment">// Tìm element bằng thuộc tính class</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">assertPresent</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'.btn-primary'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- Test registration function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token comment">/** * Test register feature works corectly. * * @return void */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">testRegisterFeature</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">browse</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> Browser <span class="token variable">$browser</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$password</span> <span class="token operator">=</span> <span class="token single-quoted-string string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="044565443536373031">[email protected]</a> '</span> <span class="token punctuation">;</span> <span class="token variable">$faker</span> <span class="token operator">=</span> Faker <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$name</span> <span class="token operator">=</span> <span class="token variable">$faker</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">name</span> <span class="token punctuation">;</span> <span class="token variable">$browser</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">visit</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'/register'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">type</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'name'</span> <span class="token punctuation">,</span> <span class="token variable">$name</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">type</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'email'</span> <span class="token punctuation">,</span> <span class="token variable">$faker</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">email</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">type</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'password'</span> <span class="token punctuation">,</span> <span class="token variable">$password</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">type</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'password_confirmation'</span> <span class="token punctuation">,</span> <span class="token variable">$password</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">click</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'.btn-primary'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$browser</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">assertSeeLink</span> <span class="token punctuation">(</span> <span class="token variable">$name</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">assertPathIs</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'/home'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
And run the following command to run the test case
1 2 | php artisan dusk |
And results
Test result 
4 Result
Above are the installation steps and a rough example of Laravel dusk, in the next section I will introduce other parts such as how to interact with elements, how to structure the directory … Thank you for your interest. The monitoring center, see you later in the following sections 
Refer