Bitbucket Pipeline中TestCafe运行Angular E2E测试时DNS解析localhost失败

核心问题 #

Bitbucket Pipeline容器环境内，你的Angular应用未正确启动，或者TestCafe尝试访问的localhost:3200并非应用实际运行的可访问地址。

具体修复步骤 #

1. 确保Angular应用在Pipeline中后台启动并就绪 #

在bitbucket-pipelines.yml中，先启动Angular服务并让它后台运行，同时等待服务完全就绪后再执行TestCafe测试：

image: node:16

pipelines:
  default:
    - step:
        name: 安装依赖并执行E2E测试
        caches:
          - node
        script:
          - npm install
          # 后台启动Angular服务
          - npm run start &
          # 等待服务启动（可根据实际情况调整时长）
          - sleep 30
          # 运行TestCafe无头Chrome测试
          - npx testcafe chrome:headless tests/**/*.test.js

2. 修改Angular服务监听地址 #

默认Angular开发服务器仅监听localhost，容器内可能无法被TestCafe访问。修改package.json的start脚本，让服务监听0.0.0.0：

{
  "scripts": {
    "start": "ng serve --host 0.0.0.0 --port 3200"
  }
}

3. 用环境变量替代硬编码地址（可选） #

避免在测试代码中固定写http://localhost:3200，通过环境变量适配本地和CI环境：
测试代码示例：

const baseUrl = process.env.BASE_URL || 'http://localhost:3200';

fixture`项目列表`
  .page`${baseUrl}/projects/list`;

// 测试用例逻辑...

Pipeline脚本中添加环境变量：

script:
  - export BASE_URL=http://localhost:3200
  - npx testcafe chrome:headless tests/**/*.test.js

4. 用工具检测服务就绪（替代sleep） #

使用wait-on工具替代固定等待时长，确保服务真正启动后再执行测试：

• 安装依赖：npm install wait-on --save-dev
• 修改Pipeline脚本：

script:
  - npm install
  - npm run start &
  - npx wait-on http://localhost:3200
  - npx testcafe chrome:headless tests/**/*.test.js

错误原因说明 #

你遇到的Failed to find a DNS-record for the resource错误，本质是localhost:3200在Pipeline容器内没有对应的运行服务，或者服务监听地址无法被TestCafe访问。

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