Automate your Laravel 5.5 and Laravel Dusk 2.0 browser tests for free in Microsoft Edge, Firefox and Chrome. CircleCI 2.0 offers 4 containers for open-source projects without any cost so you can run all your browser tests in parallel which is really awesome. It also has support for storing artifacts so you can take screenshots in the browsers while testing to view different states of your app.
Automated browser testing on Microsoft Edge, Firefox and Chrome for free.
So I’ve been working on a frontend project recently in Laravel 5.5 and VueJS and I wanted to write browser tests to make sure that everything is working properly. When you are writing a frontend app and have clients accessing it from different environments and devices you have to make sure that it will work in different browsers. When the project is small and quick to test some might feel that it is easier and quicker to just start the browser and click away to test the application. However, once the project hits a certain size, you will surely realize that it is an impossible task for a human to test the whole application manually by simply clicking around to verify that things are working as they are supposed to. Even worse, picture the scenario when you have to do it in multiple browsers for each little small tweak you do. It is time to automate your browser tests and let the computer do the heavy lifting.
I strongly recommend CircleCI which is a great continuous integration service and a perfect place to get started with automating your browser tests in the cloud. CircleCI 2.0 has native docker support which is great because you can easily start containers with different browsers installed and run your tests easily. However, this does not work well with the Windows platform. After some researching, I was happy to come across this announcement [link] from another service that I love, BrowserStack, which said that they offer free automated testing for Microsoft Edge. When you sign up as a new user you also get 100 minutes of automated testing for free on any platform which you could use for some sample testing in Internet Explorer for example.
Let’s set up Laravel 5.5 with Laravel Dusk 2.0 and start testing your app with browser tests in parallel on CircleCI. If you haven’t got an account at CircleCI or BrowserStack yet, head over there for a quick signup before proceeding with the following steps.
First, let’s get a clean copy of Laravel 5.5 and install Laravel Dusk 2.0:
After running these commands you should have your local environment up and running. Now we just have add a BrowserStack helper script since that is where your Microsoft Edge tests will run and a CircleCI config file to run the tests in parallel in Edge, Chrome and Firefox on CircleCI.
Create a Traits folder inside your tests folder and copy this file into that folder, tests/Traits/RunsBrowserStackLocal.php.
After that, create a .circleci in the root of your repository and copy this file: .circleci/config.yml
And lastly, tweak your DuskTestCase.php so that is looks like this file: tests/DuskTestCase.php
Now your repository is all set, so go ahead and create a new repository on GitHub and push the files. Now head over to BrowserStack and copy your username and access key, we need to add these to the CircleCI environment to be able to access BrowserStack from CircleCi and run the browser tests on Microsoft Edge. Next step is to log in to CircleCI, click “add project”, select CircleCI 2.0 and click start building to add your new GitHub repository. Then add the following environment variables in the environments variables menu to the left on your project settings page.
Click rebuild or push a new commit to your GitHub repository to trigger a build. All application logs and artifacts will be stored and linked to in the artifacts tab in each build details page.
You can get the full repository here to check for differences if you are encountering any issues.