如何在Docker容器中启动宽浏览器以进行量角器测试 [英] How to start a wide browser inside a docker container, for Protractor testing

问题描述

在docker容器中运行端到端测试时，我们需要浏览器较宽，以确保位于最右侧的元素(aButton)实际上可见并进行测试，例如

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();

成功.

当显示浏览器宽度时，我们总是得到最大接近1050的值:

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);
});

显示:

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

在使用这两个docker映像针对它们运行测试时失败，因为该按钮不可见.在不在Docker/Xvfb内的浏览器上运行测试时，没有问题.

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/

通过链接这样的本地版本(以及一些用于调试的日志文件夹)，修改了Xvfb配置的设置.

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

用于Xvfb设置xvfb.conf的文件:

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

在此docker映像上运行相同的测试时，我们还会获得一个小型"浏览器:

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

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

更多信息:我们在链接的Docker容器(用于集成/端对端测试)，数据库容器，tomcat/rest/java容器(用于服务器)中启动所有材料".还有一个用于角度网站的npm容器.

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:

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)

推荐答案

将以下内容添加到docker-compose.yml文件中:

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

如果您使用的是调试节点，则说明已完成.如果您不是，请不要害怕！最大化将不起作用，但是 driver.manage().window().setSize(new Dimension(1920，1080)); 将会有效.

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.

这篇关于如何在Docker容器中启动宽浏览器以进行量角器测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！