How to start a wide browser inside a docker container, for Protractor testing

Question

When running end to end tests inside a docker container we need the browser to be wide, to make sure the elements (aButton) that are positioned far right are actually visible and test like

expect(mainPage.aButton.isDisplayed()).toBeTruthy();

succeed.

When displaying the browser width we always get a value close to 1050 as a maximum:

browser.driver.manage().window().getSize().then(function(size) {
    console.log('browser size', size);
});

displays:

browser size { height: 748,
               width: 1050,
               class: 'org.openqa.selenium.Dimension',
               hCode: 436207616 }

When using this two docker images to run the tests against they fail because the button is not visible. When running the test on the browser not inside Docker/Xvfb there is no problem.

https://registry.hub.docker.com/u/caltha/protractor/

Modified the settings of the Xvfb config by linking a local version like this (and some log folders for debugging..)

mkdir -p /tmp/docker/protractor/supervisor
docker run --rm  \
--name run_protractor \
-v /tmp/docker/protractor:/var/log \
-v /tmp/testproject:/project \  
-v /tmp/xvfb.conf:/etc/supervisor/conf.d/xvfb.conf:ro \
caltha/protractor

the file for the Xvfb settings xvfb.conf:

[program:xvfb]
command = Xvfb :1 -screen 0 1920x1080x16
stdout_logfile = /var/log/supervisor/%(program_name)s-out.log
stderr_logfile = /var/log/supervisor/%(program_name)s-err.log

When running the same test on this docker image we also get a 'small' browser:

http://www.function.fr/docker-with-chrome-and-selenium-and-firefox/

some more info: We start all our 'stuff' in linked Docker containers for Integration / End to end testing, a database container, tomcat/rest/java container for server. and a npm container for the angular website.

protractor.conf.js:

....
onPrepare: function() {    
  browser.driver.manage().window().maximize();
  //var width = 1224;
  //var height = 800;
  //browser.driver.manage().window().setSize(width, height);
}

How do we get a wide browser? (we don't use a responsive design for our website obviously)

Answer 1

Add the following to your docker-compose.yml file:

chrome:
  image: selenium/node-chrome-debug
  environment:
    SCREEN_WIDTH: 1920
    SCREEN_HEIGHT: 1080
  ports:
    - 5900
  links:
    - seleniumhub:hub

If you're using a debug node, you're done. If you're not, never fear! Maximize won't work, but driver.manage().window().setSize(new Dimension(1920, 1080)); will.