felippenardi/running-protractor-with-docker.md

## running-protractor-with-docker.md

      
    Raw
  

              running-protractor-with-docker.md
            
          
    Running Protractor Headless with Docker

Setting up Docker

1st Docker: Selenium Webdriver

This docker image is a Selenium Webdriver server where our specs will be directed against. It contains the Firefox and Chrome to run our specs headless. It also provides us VNC access to check what is going on the browser.
$ docker run --rm --net="host" -e VNC_PASSWORD=pancakes elgalu/selenium:v2.45.0-ssh3

2nd Docker: Protractor

You'll need a second Docker image with Protractor installed:
$ docker run -it --rm --net="host" -v `pwd`:/src felippenardi/yo

PS:

Now how both docker commands contains --net="host". That means both images are sharing the same network interface as the host. This is the easiest way to have docker images reaching each other.
Running the spec

The minimal setup for running a Protractor spec is having two files: spec.js and conf.js.
// conf.js content e.g.
exports.config = {
  seleniumAddress:
  'http://localhost:4444/wd/hub',
  specs: ['spec.js']
}
// spec.js content e.g.
describe('A feature spec', function () {
  it('navigates to the site', function () {
    browser.get('http://angularjs.org');
    browser.pause();
  });
});
Then using the Protractor Docker, you can run the specs against the Selenium Docker with this command:
$ protractor conf.js

Debugging with VNC

When writing tests you will want to see the browser to understand what is happening. You'll use VNC, but also the command line.
Connecting with the VNC

If you are developing locally, the VNC address will be localhost:5900, and the password will be the one you specifed on the docker run command (above e.g. uses "pancakes").
When connecting you will see a linux desktop, maybe a terminal—but nothing else. To see the browser, you must run the protractor spec.
### Debugging with the command line
Notice how on the above example I used browser.pause(). This will tell selenium to pause execution and allow you to see the browser state on the VNC server.
It will also return a command line interface. To enter the debug mode, you should type repl and hit return. This will bring a different command line interface. Here you can use protractor commands and see how they work live in the browser.
How to write that test?

If you get stuck when writing a certain test, there is two places you should look first:

Protractor API: Where every method is documented with examples.
AngularJS Docs: Where all built-in directives have a protrator tests examples tab