中文说明.md

Docker 驱动视觉测试

从Docker Hub拉取镜像

docker pull bugazelle/web-visual-testing

内容

• 支持的视觉测试工具
• 特色: NoVNC, Jenkins, CNTLM
• 如何运行测试
• 系统信息
• 值得一看的其他内容

支持的视觉测试工具

1. BackstopJS
2. Hermione

Chrome/ChromeDriver: 117.0.5938.149/117.0.5938.149, Firefox/Geckodriver: 117.0/0.33.0

• 如果需要特定的chrome/chromedirver, firefox/geckodriver 和 selenium server版本，提一个单子给我，我帮你build镜像

特色

1. 支持noVNC

   可以像操作虚拟机一样操作docker容器，让测试更加的可视化，同时也方便调试脚本: http://127.0.0.1:6901/?password=vncpassword

   更多关于noVNC的信息: docker-headless-vnc-container

   -e VNC_RESOLUTION=1680x950: 设置分辨率为1680x950

   -p 6901:6901: 映射容器6901端口到本地6901，6901属于vnc客户端端口

   -p 5901:5901: 映射容器5901端口到本地5901，5901属于vnc服务器端口

   -v $(pwd):/tmp: 映射当前路径下的所有问点到docker容器中的/tmp目录

   docker run \
       -e VNC_RESOLUTION=1680x950 \
       -p 6901:6901 \
       -p 5901:5901 \
       -v $(pwd):/tmp \
       bugazelle/web-visual-testing
   

2. 支持Jenkins

   可以将docker容器作为一个jenkins agent，支持的环境变量有：

   JENKINS_MASTER_URL: Jenkins master的地址, 默认: http://127.0.0.1:8080

   JENKINS_SLAVE_KEY: Jenkins slave的密钥，比如: bb23de4d485447d3f8b73aefa268e687d5660dad553eb4534ff2ae369d7849c6

   JENKINS_SLAVE_NAME: Jenkins slave的名字

   JENKINS_AGENT_WORKDIR: Jenkins agent的工作空间, 默认: /home/jenkins

   提供3中方法连接Jenkins Master:

   • 推荐: jenkins-run.sh

   • jenkins-agent -url ${JENKINS_MASTER_URL} ${JENKINS_SLAVE_KEY} ${JENKINS_SLAVE_NAME}

   • java -jar /usr/share/jenkins/agent.jar -jnlpUrl ${JENKINS_MASTER_URL}/computer/slave1/slave-agent.jnlp -secret ${JENKINS_SLAVE_KEY}

   docker run \
       -e VNC_RESOLUTION=1680x950 \
       -p 6901:6901 \
       -p 5901:5901 \
       -v $(pwd):/tmp \
       -e JENKINS_MASTER_URL=http://172.17.0.1:8080 \
       -e JENKINS_SLAVE_KEY=1f27b72ec9cf59711788e8de7d1219766381c1ea0406b5f64de3bb6dcd6df913 \
       -e JENKINS_SLAVE_NAME=slave1 \
       bugazelle/web-visual-testing jenkins-run.sh
   

   关于如何通过docker平台搭建jenkins环境，可以参考: jenkins/README.md

3. 支持CNTLM

   如果处于NTLM代理的环境中，可以使用CNTLM提供二级代理. 更多关于CNTLM: https://linux.die.net/man/1/cntlm

   提供的环境变量有:

   CNTLM_PROXY_DOMAIN: 默认: global

   CNTLM_PROXY_AUTH: 默认: NTLMv2

   CNTLM_PROXY_USER: 没有默认值，请查看cntlm.conf.tmpl

   CNTLM_PROXY_KEY: 没有默认值，请查看cntlm.conf.tmpl. 使用 cntlm -u YourUserName -H 可以获得密钥.

   CNTLM_PROXY_SERVER: 没有默认值，请查看cntlm.conf.tmpl. 如果有多个代理服务器，使用: CNTLM_PROXY_SERVER_1, CNTLM_PROXY_SERVER_2, CNTLM_PROXY_SERVER_3, CNTLM_PROXY_SERVER_4, CNTLM_PROXY_SERVER_5

   CNTLM_NO_PROXY: 请查看cntlm.conf.tmpl. 默认: localhost, 127.0.0., 10., 192.168., 172.17.

   如何运行: cntlm-run.sh, 接着二级代理就在本地可用了: http://127.0.0.1:3128

   docker run \
       -e VNC_RESOLUTION=1680x950 \
       -p 6901:6901 \
       -p 5901:5901 \
       -v $(pwd):/tmp \
       -e CNTLM_PROXY_DOMAIN=global \
       -e CNTLM_PROXY_AUTH=NTLMv2 \
       -e CNTLM_PROXY_USER=YourUserName \
       -e CNTLM_PROXY_KEY=YourKey \
       -e CNTLM_PROXY_SERVER=TheProxyServer, like my.proxy:3128 \
       bugazelle/web-visual-testing /bin/bash -c "cntlm-run.sh; \
          export http_proxy=http://127.0.0.1:3128; \
          export https_proxy=http://127.0.0.1:3128; \
          wget --no-check-certificate http://apache.org; "
   

如何运行测试

1. 调试模式 - 调脚本的时候用

   1. 启动docker容器，把当前目录的文件映射到容器中的/tmp目录

      注意: 有时候 chromedriver, geckdriver 在docker容器中抽风, 添加 --privileged -v /dev/shm:/dev/shm --shm-size 2048m 解决问题

      docker run \
          -e VNC_RESOLUTION=1680x950 \
          -p 6901:6901 \
          -p 5901:5901 \
          -v $(pwd):/tmp \
          --privileged \
          -v /dev/shm:/dev/shm \
          --shm-size 2048m \
          bugazelle/web-visual-testing
      

   2. 访问 http://localhost:6901/?password=vncpassword/ to the vnc env.

   3. 启动 "terminal", 运行测试

      cd /tmp;
      ls -l;
      cd samples/BackstopJS/Chrome/BackstopJS_PuppeteerEngine_SimulateCookie_UserActions;
      backstop reference;
      

2. 直接跑 - 正式跑测试时候用

   docker run \
       -e VNC_RESOLUTION=1680x950 \
       -p 6901:6901 \
       -p 5901:5901 \
       -v $(pwd):/tmp \
       --privileged \
       -v /dev/shm:/dev/shm \
       --shm-size 2048m \
       bugazelle/web-visual-testing \
           /bin/bash -c "cd /tmp/samples/BackstopJS/Chrome/BackstopJS_PuppeteerEngine_SimulateCookie_UserActions; \
           backstop reference;"
   

系统信息

1. OS: debian:11

2. Chrome/ChromeDriver: 117.0.5938.149/117.0.5938.149

3. Firefox/Geckodriver: 117.0/0.33.0

4. NodeJS: 18.x

5. BackstopJS: 6.2.2

6. Hermione: 7.1.6

7. HTML Reporter: 9.10.3

8. Json Reporter: 0.1.0

9. Looks Same: 8.2.4

10. Chai: 4.3.10

11. Java: 11.0.20

12. Git: 2.30.2

13. Default User: root

值得一看的其他内容

1. iOS设备分辨率/视窗 (view port) 大小: http://iosres.com/

2. 所有可能设备的视窗 (view port) 大小: https://material.io/devices/, http://viewportsizes.com/

3. Chrome Flags: https://peter.sh/experiments/chromium-command-line-switches/

4. Firefox Flags: http://kb.mozillazine.org/Command_line_arguments

5. SmilerJS Flags: https://docs.slimerjs.org/current/configuration.html

6. Phantom Flags: http://phantomjs.org/api/command-line.html

7. Firefox User Agents: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox

8. Chrome User Agents: https://developer.chrome.com/multidevice/user-agent

9. Desired Capabilities: https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities

10. 历史Chrome版本 (RPM包): http://orion.lcg.ufrj.br/RPMS/myrpms/google/

11. 历史Chromium版本：https://github.com/Bugazelle/chromium-all-old-stable-versions

12. 历史Firefox版本: https://ftp.mozilla.org/pub/mozilla.org/firefox/releases/