如何Docker化端到端验收测试？

模拟用户与浏览器交互的每一层都有一些不同的产品

让我们采用自下而上的方法来研究每一层如何构建在下一层之上。

入门时使用Selenium是值得的，Selenium是一个长期运行的项目，其中包含一组活跃使用的工具，现在由Selenium WebDriver，Grid，Server和IDE组成。在创建这些工具时，他们设定了许多行业标准，通常以他们来自的Selenium产品命名。这可以在'Selenium WebDriver'和在其开发中建立的'WebDriver线协议'中看到。适用的那些将在下面更详细地显示。

浏览器

任何网络浏览器：Chrome，Firefox，Internet Explorer，Safari，Opera等。通常在文档中称为“用户代理”。

W3C的WebDriver线路协议

WebDriver线路协议是一种与Web浏览器交互的平台和语言中立方式。它定义了一个在请求/响应对中使用JSON over HTTP的通用RESTful Web服务。它允许从外部源操作DOM元素，同时还允许导航到网页，用户输入，JavaScript执行等。

最初由Selenium为Selenium WebDriver编写，该协议现已进入编辑草案阶段，成为官方的W3C标准。

其他协议已经退出，这里不会详细介绍。所有解释都将采用实现WebDriver线路协议的后端。

另一个值得注意的协议是Puppeteer使用的Chrome DevTools协议。 Puppeteer不使用Selenium Server，它捆绑了最新版本的Chromium，供本地使用。如果你想在Docker中运行Puppeteer，你可以使用CodeceptJS镜像（Puppeteer和Nightmare附带）或者按照官方指南创建可以支持它的自定义镜像。

浏览器WebDrivers

这些是WebDriver线路协议的浏览器特定实现，例如ChromeDriver for Chrome或GeckoDriver for Firefox。每个都充当一个独立的服务器，用于接收来自使用WebDriver API的客户端的请求（通常是测试所在的位置）。为了与目标浏览器进行通信，必须安装正确的WebDriver实现。

Selenium Server

如果测试用例是在定义它们的同一台机器上运行，那么使用的客户端WebDriver API实现（如下所述）可以直接与浏览器WebDriver通信，并且不需要Selenium Server。

然而，如果要在不同的计算机上运行测试，无论是在CI中，在跨多个计算机或虚拟机（VM）的Selenium Grid设置中，在远程测试平台（如BrowserStack或SauceLabs）上，还是在Docker中，都要运行Selenium服务器。它充当代理，将来自客户端WebDriver API的请求转发到正确的浏览器WebDriver，并从浏览器传回响应。

正如我们稍后将看到的，'machine'也可以换成'container'

客户端WebDriver实现

各种工具实现了客户端WebDriver线路协议。这里的协议可以看作是通过上述层向浏览器发送请求的API。许多使用该协议的工具都是完整的框架，例如WebDriverIO，它们包含自己的测试运行程序。

其他实现包括：原始的Selenium WebDriver，Protractor，Appium等。

每个库的目标是实现相同的结果，但焦点和API实现略有不同。比如Protractor的browser.get(url)和WebDriverIO的browser.url(url)。

一个API统治所有

如本节开头所述，这是CodeceptJS发挥作用的地方。它将其他客户端WebDriver协议（或其它协议）实现为“帮助程序”，并允许你在使用一种API语言时指定你喜欢的帮助程序。 CodeceptJS并不关心所选帮助程序使用的协议。

WebDriverIO，Puppeteer，Protractor，Nightmare和Appium都是现有的帮助程序。

在CodeceptJS中，无论选择哪个帮助程序，上一个命令都是I.amOnPage(url)。这意味着如果你想将后端切换到支持的其他帮助程序之一，则不必重新编写测试。如果你愿意，可以通过自定义类覆盖或添加到默认API方法。

有这么多层，这听起来开始复杂了，但在CodeceptJS的初始化脚本和Docker镜像之间，我们可以快速找到一个有效的例子。

我们将产生什么

现在将使用两个容器，但这可以扩展

我们将在CodeceptJS中编写一个简单的测试，指定一个WebDriverIO后端帮助程序，它将与Docker容器中的远程单机firefox浏览器进行通信。我们将使用Express“hello world”应用程序，但这可以被你希望的任何应用程序取代。

只需要两个命令就能很快运行Dockerized应用程序和所有测试套件

一旦我们完成了所有设置，我们将只需运行两个命令来运行测试：

• docker-compose up --build

• docker exec -it app npm run test:e2e

通过在两个并排的终端窗口中运行，我们可以看到容器正在运行并且测试正在实时执行。

先决条件

Docker，适用于你正在开发的任何一台机器。

你也可以安装Node.js和npm进行本地开发和调试，但这些也完全可以在Docker中运行。

文件结构

我们将在下面生成文件结构。你可以在GitHub上看到一个工作示例[1]。

|-- .gitignore 
|-- output/
|-- Dockerfile
|-- app.js
|-- docker-compose.yml
|-- package.json
|-- package-lock.json
|-- e2eTests/



    
    |-- common_test.js
    |-- docker.conf.js

{
  "name": "example-standalone-firefox",
  "version": "1.0.0",
  "description": "Example of Dockerizing E2E testing",
  "scripts": {
    "start": "node app.js",
    "test:e2e": "codeceptjs run --steps --verbose --config=./e2eTests/docker.conf.js"
  },
  "dependencies": {
    "express": "^4.16.3"
  },
  "devDependencies": {
    "codeceptjs": "^1.2.0",
    "webdriverio": "^4.12.0"
  }
}

codeceptjs run --steps --verbose --config=./e2eTests/docker.conf.js

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('Hello World!'));

const server = app.listen(3000, () => {
    const port = server.address().port
    console.log(`Example app listening on port ${port}`)
 })

Feature('Basic test');

Scenario('navigate to homepage', I => {
  I.amOnPage('http://app:3000');
  I.saveScreenshot('frontpageScreenshot.png');
  I.see('Hello');
});

exports.config = {
  tests: './*_test.js',    // how to know which files are test files
  output: './output',      // where to save screenshots
  helpers: {
   WebDriverIO: {               // which backend helper to use
     url: 'http://app:3000',    // a base URL to start on
     host: 'firefox-container', // identifying where selenium runs
     browser: 'firefox',        // a series of config options
     smartWait: 5000,              
     waitForTimeout: 10000,
     desiredCapabilities: {        // for a demo app we do not want 
         acceptInsecureCerts: true,   to worry about SSL certs
     }
   },
  },
  name: 'codeceptjs-docker',
};

version: "2"        // which version of compose syntax you are using
services:
  app:
    container_name: app  // explicit so we can use this for app:3000
    build: .             // a self defined Dockerfile, see below
    ports:               // exposes port 3000 (where express runs)
      - "3000:3000"         to other containers, and to our local       
    depends_on:             browser
      - firefox-container
    volumes:             // maps so changes to these can be seen
      - ./e2eTests:/e2eTests
      - ./package.json:/package.json
      - ./package-lock.json:/package-lock.json
      - ./.gitignore:/.gitignore
      - ./app.js:/app.js

  firefox-container:      // we'll look at this below
    container_name: firefox-container
    image: selenium/standalone-firefox:3.12.0-americium
    volumes:
      - /dev/shm:/dev/shm
    ports:
      - "4444:4444"

    
FROM node:carbon 
WORKDIR ./ 
COPY ./package.json ./package-lock.json ./app.js ./ 
RUN npm install 
CMD [ "npm", "start" ]

docker exex <flags> <container_name> <command>

docker exec -ti app npm run test:e2e