WebDriverIO with Docker

使用 Docker 進行 End-To-End 前端測試自動化，可讓前端測試更容易進行，即使沒有桌面環境，也能透過 Docker 運作環境在任何地方都可進行前端測試。

延續我們前兩章的 WebDriverIO 的進行，讓我們達到最後一步吧！

環境準備

• docker engine
• docker-compose

在 mac 上安裝非常的簡單：download-docker-for-mac，安裝完成後連 docker-compose 都幫你安裝完成。

Windows 的話需要 10 pro 以上才可以快樂的安裝：docker-for-windows，否則需要有 VirtualBox 的支援。

docker-compose.yml

因為我們會一次測試  chrome 與 firefox 瀏覽器，所以需要一次性啟動兩個 container，透過 hub 集線器可以幫我們委託測試需求到相對應的 chrome or firefox server 節點，讓我們在根目錄下建立 docker-compose.yml 檔案：

version: '3.4'

services:
  firefox:
    image: selenium/node-firefox:2.53.1
    volumes:
      - /dev/shm:/dev/shm
    depends_on:
      - hub
    environment:
      HUB_PORT_4444_TCP_ADDR: hub

  chrome:
    image: selenium/node-chrome:2.53.1
    volumes:
      - /dev/shm:/dev/shm
    depends_on:
      - hub
    environment:
      HUB_PORT_4444_TCP_ADDR: hub

  hub:
    image: selenium/hub:2.53.1
    ports:
      - "4444:4444"

Add script with package.json

再來我們增加一個 script item 到 package.json：

...
"scripts": {
  "test": "wdio wdio.conf.js",
  "dev-test": "chimp --mocha --watch --path=test",
  "test-with-docker": "docker-compose down && docker-compose up -d && npm test"
},
...

執行

npm run test-with-docker

就可以看到完整測試結果囉！很簡單吧！

 

---

若要看整個原始碼的話可到我的 Github repository 查看：https://github.com/eden90267/wdio-demo