Have you ever wished your front end testing could be sped up? Has it ever seemed like Selenium was a royal pain in the ass? Though I agree, this isn’t the post that will relieve those problems. What it is, is a way to make testing your Angular app slightly less painful by providing light weight Selenium grid node parallelization with Protractor and Docker.
Specifically, this post will…
Interested in skipping to the end?
One last note before I get started… Francisco Martinez deserves all of the credit for figuring out how to integrate Protractor and concurrency in Grunt; I’m just writing up his work and cramming another Docker prototype into a blog bost. Thanks Francisco.
I’ve put together two projects to supply the Selenium Grid functionality. The docker-selenium-grid project supplies Dockerfiles for two Docker containers: a hub and a Firefox node; and comes with a script to help you add start and stop the cluster or new nodes. The vagrant-selenium-grid project is a Vagrant wrapper for the first project which further simplifies starting a cluster to simply running
To boot your cluster, simply run the following commands
git clone https://github.com/benschw/vagrant-selenium-grid cd vagrant-selenium-grid vagrant up
This VM defaults to using 2gb of ram, but this can easily be tuned by tweaking the
Vagrantfile before running
vagrant up. It will run three firefox nodes by default, but you can tweak this by shelling into the Vagrant vm and interacting with the cluster via
If you want to make sure it works, install protractor and run
npm install -g protractor ./test.sh
Docker provide’s lighweight virtualization. In other words, your laptop is probably capable of driving a handfull of browsers at once, but not a handfull of VMs. Docker gives you to encapsulation of a VM with (almost) none of the overhead. It does require a Linux kernel however, which is why i’ve recommended running your grid inside a Vagrant vm.
I’ll assume you’ve used Yeoman before, but just in case - here’s how to get it:
sudo npm install -g yo sudo npm install -g grunt-cli sudo npm install -g bower
Now that you have the basics, lets use our new tools to generate an angular app:
mkdir protractor-demo cd protractor-demo npm install generator-angular yo angular # go ahead and "Y" everything
Now lets start adding in Protractor.
Install the npm deps:
sudo npm install -g protractor npm install protractor --save-dev npm install grunt-protractor-runner --save-dev
At this point you can decide if you want to follow along and patch your
Gruntfile.js by hand, or just grab a copy from the protractor-demo project. Additionally, I’ve included scenario.tar.bz2 which holds the example tests we will be wiring up.
The quick way:
wget -N https://raw.github.com/benschw/protractor-demo/master/Gruntfile.js wget -qO- https://github.com/benschw/protractor-demo/raw/master/scenario.tar.bz2 | tar -C ./test/ -xjvf -
Add in your Protractor test wiring after the “karma” section:
getIpAddress() function at the top of your file. Since your grid is running in a VM, we need to give it more than
localhost to target:
Reference our two test features in the “concurrent” section:
In the “connect” section, update “connect.options” to use
hostname: '0.0.0.0', and “connect.dist” to use
And last but not least, add a new task at the bottom of the file so we can run these bad boys:
Assuming all our updates made it in and Yeoman’s Angular generator hasn’t changed, we should now be able to run tests for our two test features concurrently:
I hope it worked for you, and I hope this helped.