如何在Docker Compose中运行Protractor测试？Docker环境测试报错求助

一、错误根源分析 #

你遇到的「E/protractor - Could not find Angular on page http://localhost:4200/ : retries looking for angular exceeded」错误，核心原因是Docker容器的网络隔离特性：

• 本地运行时，Protractor和Angular应用都在宿主机，localhost指向宿主机本身，能正常访问。
• 但在Docker环境中，每个容器都是独立的网络节点，Protractor容器里的localhost指的是它自己的容器，而非Angular应用所在的容器或宿主机，自然无法找到Angular应用。

二、分步解决方法 #

1. 调整Protractor配置文件（config.js） #

修改baseUrl，不要用localhost，而是用Docker Compose中Angular服务的服务名称（比如你的Angular服务叫angular，就写http://angular:4200）。同时确保Selenium地址指向Docker化的Selenium服务（如果用独立Selenium容器的话）：

exports.config = {
  directConnect: false, // 如果用Selenium容器，设为false
  seleniumAddress: 'http://selenium-hub:4444/wd/hub', // Selenium服务的名称+端口
  baseUrl: 'http://angular:4200', // 替换成Angular服务的名称
  specs: ['myTest.js'],
  capabilities: {
    browserName: 'chrome',
    'goog:chromeOptions': {
      args: ['--headless', '--no-sandbox', '--disable-dev-shm-usage'] // 无头模式适配Docker
    }
  }
};

2. 完善Docker Compose配置 #

确保你的docker-compose.yml包含三个核心服务：Angular应用、Selenium Hub（可选，也可以用directConnect但需要Chrome驱动在容器里）、Protractor测试服务。示例配置：

version: '3.8'
services:
  angular:
    build: ./your-angular-app-dir # 指向Angular应用的Dockerfile目录
    ports:
      - "4200:4200"
    command: npm start # 启动Angular开发服务器
    networks:
      - test-network

  selenium-hub:
    image: selenium/hub:latest
    ports:
      - "4444:4444"
    networks:
      - test-network

  chrome-node:
    image: selenium/node-chrome:latest
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
    networks:
      - test-network

  protractor:
    build: ./your-protractor-dir # 指向Protractor项目的Dockerfile目录
    depends_on:
      - angular
      - selenium-hub
    command: ["npm", "test"]
    networks:
      - test-network
    volumes:
      - ./your-protractor-dir:/app # 挂载本地代码到容器，方便修改测试用例

3. 编写Protractor的Dockerfile #

在Protractor项目目录下创建Dockerfile，确保安装了Node.js、Chrome和Protractor依赖：

FROM node:18-alpine

# 安装Chrome依赖（Alpine环境）
RUN apk add --no-cache chromium chromium-chromedriver

# 设置环境变量，让Protractor找到Chrome
ENV CHROME_BIN=/usr/bin/chromium-browser
ENV CHROME_DRIVER=/usr/bin/chromedriver

# 创建工作目录
WORKDIR /app

# 复制package文件并安装依赖
COPY package*.json ./
RUN npm install

# 复制所有测试代码
COPY . .

# 启动测试（也可以让Docker Compose指定命令）
CMD ["npm", "test"]

4. 调整测试命令与等待策略 #

直接执行docker-compose exec angular sh -c "npm test"可能有问题，因为：

• exec是进入已运行的Angular容器执行命令，但该容器里可能没装Protractor依赖。
• 应该直接启动Protractor服务，并且要确保Angular应用完全启动后再跑测试（可以用wait-for-it脚本或者在测试代码里加等待逻辑）。

推荐的运行方式：

# 启动所有服务，包括Protractor测试
docker-compose up --build protractor

# 或者后台启动所有服务，再单独运行测试
docker-compose up -d angular selenium-hub
docker-compose run protractor npm test

如果需要等待Angular应用启动，可以在Protractor的config.js里加onPrepare钩子：

exports.config = {
  // ...其他配置
  onPrepare: function() {
    browser.waitForAngularEnabled(false);
    browser.get('http://angular:4200');
    browser.wait(protractor.ExpectedConditions.urlContains('4200'), 10000); // 等待10秒
    browser.waitForAngularEnabled(true);
  }
};

三、常见排查要点 #

• 确认Docker Compose的所有服务都在同一个网络（比如上面的test-network），这样服务之间才能通过名称互相访问。
• 检查Angular应用容器是否真的在4200端口监听，可以用docker-compose logs angular查看启动日志。
• 如果用directConnect: true，需要确保Protractor容器里安装了对应版本的Chrome和ChromeDriver，版本要匹配。

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