5

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)

Jan vO
  • 281
  • 4
  • 8

2 Answers2

2

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.

Hazel T
  • 859
  • 1
  • 8
  • 22
  • I am not so sure about the last part of the answer since it appears to be WebDriverJS syntax. But the part about changing the docker image to pull node-chrome-debug and setting the environmental variables definitely worked for me. – sonhu Aug 03 '16 at 12:09
  • It's Java syntax, using WebDriver 2.53. – Hazel T Aug 04 '16 at 17:21
1

I'm not sure if your issue is in Docker, Protractor, or xvfb... but on the Protractor side, I would try setting a specific browser size. I.E. beyond the size maximize() would likely provide.

So try setting the following in your Protractor config onPrepare:

browser.manage().window().setSize(2024, 800); // or whatever

This should give you a wide browser... not sure if it will pass your tests though.

I might also try changing 'xvfb's resolution...

Community
  • 1
  • 1
Brine
  • 3,733
  • 1
  • 21
  • 38
  • thanks for your reply. we tryed both solutions: in config onPrepare browser.driver.manage().window().maximize(); or browser.driver.manage().window().setSize(width, height); and xvfb via a config file /etc/supervisor/conf.d/xvfb.conf as mentioned above. none worked inside the docker container ... – Jan vO Jul 22 '15 at 07:42
  • @JanvO did you manage to get it working ? Even I'm facing same issue. https://github.com/SeleniumHQ/docker-selenium/issues/220 – vikramvi Apr 28 '17 at 13:46