如何将WebdriverIO集成到Docker并部署至GitLab CI/CD？

一、先搞定本地WDIO环境的可移植性 #

别在容器里执行npm init wdio --yes，这个命令的非交互模式容易出问题，直接复用你本地已经跑通的WDIO配置：

• 确保本地的package.json、package-lock.json、wdio.conf.js以及测试脚本目录（比如tests/）能正常通过npm test执行用例
• 把这些文件整理到单独的目录（比如wdio-ci/），方便后续打包进容器

二、编写Dockerfile构建WDIO镜像 #

基于Node镜像，同时安装Chrome浏览器和驱动，示例Dockerfile：

# 用轻量的Node镜像
FROM node:18-alpine

# 设置工作目录
WORKDIR /wdio

# 安装Chrome依赖（alpine环境下）
RUN apk add --no-cache \
    chromium \
    chromedriver \
    nss \
    freetype \
    harfbuzz \
    ca-certificates \
    ttf-freefont

# 复制依赖文件，先装依赖再复制代码，利用Docker缓存
COPY package*.json ./
RUN npm ci

# 复制WDIO配置和测试脚本
COPY wdio.conf.js ./
COPY tests/ ./tests/

# 设置环境变量，告诉WDIO Chrome的位置
ENV CHROME_BIN=/usr/bin/chromium-browser
ENV CHROMEDRIVER_BIN=/usr/bin/chromedriver

# 执行测试的命令
CMD ["npm", "test"]

三、调整WDIO配置适配容器环境 #

修改wdio.conf.js里的关键配置：

1. 浏览器无头模式配置：在capabilities里添加Chrome无头参数，避免容器无显示环境报错

capabilities: [{
    browserName: 'chrome',
    'goog:chromeOptions': {
        args: [
            '--headless=new',
            '--no-sandbox',
            '--disable-dev-shm-usage', // 解决容器内存不足问题
            '--disable-gpu'
        ]
    }
}],

2. 应用访问地址修改：本地用http://localhost，但在容器/CI环境中，要改成你的PHP应用容器的服务别名（比如docker-compose或GitLab CI services里的别名），比如http://php-app:80

四、本地测试容器化WDIO #

• 构建镜像：docker build -t wdio-ci-image ./wdio-ci
• 把WDIO容器和你的PHP/MySQL容器放在同一个Docker网络，运行测试验证：

docker run --network your-app-network wdio-ci-image

（your-app-network是你PHP/MySQL应用所在的Docker网络名称）

五、接入GitLab CI/CD #

编写.gitlab-ci.yml，核心是让WDIO容器能访问到你的PHP/MySQL服务：

方式1：直接在CI中安装依赖运行 #

stages:
  - test

wdio-ui-test:
  stage: test
  image: node:18-alpine
  # 启动你的PHP和MySQL服务，别名要和WDIO配置里的地址一致
  services:
    - name: your-php-app-image:latest
      alias: php-app
    - name: mysql:8.0
      alias: mysql
      variables:
        MYSQL_ROOT_PASSWORD: your-db-pass
        MYSQL_DATABASE: your-db-name
  before_script:
    # 安装Chrome和依赖
    - apk add --no-cache chromium chromedriver nss freetype harfbuzz ca-certificates ttf-freefont
    # 设置Chrome环境变量
    - export CHROME_BIN=/usr/bin/chromium-browser
    - export CHROMEDRIVER_BIN=/usr/bin/chromedriver
    # 安装WDIO依赖
    - npm ci
  script:
    - npm test
  # 可选：缓存npm依赖，加快CI速度
  cache:
    paths:
      - node_modules/

方式2：用提前构建好的WDIO镜像 #

如果已经在本地或镜像仓库推了WDIO镜像，直接用镜像简化CI步骤：

stages:
  - test

wdio-ui-test:
  stage: test
  image: your-registry/wdio-ci-image:latest
  services:
    - name: your-php-app-image:latest
      alias: php-app
    - name: mysql:8.0
      alias: mysql
      variables:
        MYSQL_ROOT_PASSWORD: your-db-pass
        MYSQL_DATABASE: your-db-name
  script:
    - npm test

关键注意事项 #

• 不要在容器里初始化WDIO：本地配置好再复制，避免非交互初始化的各种问题
• 容器网络互通：确保WDIO容器和应用容器在同一个网络，用服务别名访问而非localhost
• 资源限制：GitLab Runner要给足够的内存，避免Chrome因内存不足崩溃

内容的提问来源于stack exchange，提问作者Ralph