Until 5.3 Laravel was offering API to create very basic Browser tests. It was possible to use assertions like assertRedirectedTo, assertViewHas and so on. But since Laravel 5.4 it was changes. Those assertions are no longer available by default. You can use laravel/browser-kit-testing package if you want to support old style tests but preferred way to test browser is now Laravel Dusk.
In this article I will give you some tips that will help you set up your Laravel Dusk tests without bigger problems.
Running Laravel Dusk tests in Docker container
I was playing a bit with Laravel Dusk when it appeared but didn’t succeed with installing it on my Docker machine. But now when in Laravel 5.5 new Dusk 2.0 version was released with support for headless Chrome I’ve make my 2nd attempt to run Dusk on Docker.
Basically you need to install some packages. You need to run:
1 2 3 4 5 |
apt-get -y install libxpm4 libxrender1 libgtk2.0-0 \ libnss3 libgconf-2-4 chromium-browser \ xvfb gtk2-engines-pixbuf xfonts-cyrillic \ xfonts-100dpi xfonts-75dpi xfonts-base \ xfonts-scalable imagemagick x11-apps |
to make it working.
But it’s not all. Although in Homestead it will be enough to make it work for Docker you need to add something more. For further part of this article I will assume you have fresh Laravel 5.5 project with Laravel Dusk already installed.
So to make it working in Docker container you should open tests/DuskTestCase.php file and add ‘–no-sandbox’ for ChromeOptions, so it should work like this:
1 2 3 4 5 |
$options = (new ChromeOptions)->addArguments([ '--disable-gpu', '--headless', '--no-sandbox', ]); |
After that when you run
1 |
php artisan dusk |
this test should pass without any problem
Laravel Dusk screenshots and remote fonts
By default you will have screenshots created in tests/Browser/screenshots directory if test fails. To test this feature you get open tests/Browser/ExampleTest.php file and change
1 |
->assertSee('Laravel'); |
into for example:
1 |
->assertSee('LaravelTest'); |
If you run this Laravel Dusk tests again, this test should obviously fail and you should have screenshot file created. But again there’s small problem here. It’s quite possible you will get this screenshot blank. If you try to run this test multiple times you will probably see sometimes blank screenshot and sometimes you will see those texts.
It seems that depending on your luck, remote fonts will be loaded or not. We all know that loading any assets from remote urls sometimes is fast and sometimes is not. The same is when Dusk tests are running. To make sure you will always get texts visible the best option is to use some local font to avoid this problem completely. Obviously page won’t be exactly the same but when you are taking screenshot of failure case probably you don’t care about font – you care about content of the site.
If you don’t want to solve this on your own you can use package I’ve created: https://github.com/mnabialek/laravel-test-css/ but remember to set environment into testing when running test (in .env
file or in .env.dusk
file). In addition when using this package you can adjust some other styles (for example hide something on screenshots that you don’t care completely when displaying failure screenshots)
Laravel Dusk screenshots size
The last thing is screenshots sizes. By default screenshots are in 800×600 size no matter on your local machine screen resolution. It’s quite possible you would like to get higher resolution screenshots in case of failure. To make it work go again into tests/DuskTestCase.php and add additional option –window-size= with your preferred browser size that will also affect size of screenshots. Finally it can look like this:
1 2 3 4 5 6 |
$options = (new ChromeOptions)->addArguments([ '--disable-gpu', '--headless', '--no-sandbox', '--window-size=1920,1200' ]); |
Summary
Hope you enjoyed all those Laravel Dusk tips. I’ve spent quite a lot of time especially with making Laravel Dusk to work in Docker container so I hope I will save your time.
Spencer
Thank you very much for this post! It helped me realize I am not alone. So, I’m also trying to get Dusk to work in a Docker container. I’m simply using the official php container. When I run Chrome with the –headless option, tests never pass because nothing can be found on the page and the screenshot produced is just blank white like you mentioned. However, if I remove the –headless option and instead run an Xvfb process like “Xvfb -ac :0 -screen 0 1280x1024x16 -nolisten tcp”, then the tests will pass…