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

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料