使用Claude Code + Playwright编写UI自动化测试脚本，如何搭建一个具体的测试环境。

前提：本地已经安装了ollama+Qwen 2.5 7b。

🖥️ 第一步：准备基础运行环境

Claude Code 在 Windows 上运行需要一个特定的环境，通常通过 Git Bash 来提供。因此，首先要安装 Git 和 Node.js。

1. 安装 Git for Windows：访问 Git 官网 下载安装包，安装时保持默认设置即可。它提供的 Git Bash 是运行 Claude Code 的关键。

2. 安装 Node.js：访问 Node.js 官网 下载并安装 LTS（长期支持）版本。安装完成后，在 Git Bash 终端里输入 node --version 和 npm --version 验证是否成功。

备注：根据你使用的 Windows 版本，也有通过 WSL 安装的方案，但使用 Git Bash 是最直接的方式，无需启用 WSL。

 

下载完成后直接双击安装即可，都是默认选项。然后执行下图命令node --version和npm --version去查看是否安装成功，成功返回版本号则表示安装成功。

🔗 第二步：安装 Claude Code 并配置 Ollama 连接

这一步我们将安装 Claude Code，并通过环境变量让它知道去调用你本地的 Ollama 服务。

1. 安装 Claude Code：在 Git Bash 终端中执行以下命令进行全局安装，然后验证版本。

   bash

   npm install -g @anthropic-ai/claude-code
   claude --version
   
   

2. 配置环境变量连接 Ollama：这是最关键的一步。我们通过设置环境变量，让 Claude Code 将请求发送到你本地的 Ollama 服务。

   • 临时设置（推荐先测试）：在 Git Bash 中执行以下命令，设置 ANTHROPIC_AUTH_TOKEN（任意非空值即可）和 ANTHROPIC_BASE_URL（指向 Ollama 默认地址）。

     bash

     export ANTHROPIC_AUTH_TOKEN=ollama
     export ANTHROPIC_BASE_URL=http://localhost:11434

   • 永久设置（方便后续使用）：将以上两行命令添加到你的 ~/.bashrc 文件中，这样每次启动 Git Bash 都会自动加载。（后附方法）

3. 启动 Claude Code 并指定模型：环境变量配置好后，在同一终端中进入你的项目目录，使用以下命令启动 Claude Code，并通过 --model 参数指定你下载的 Qwen 2.5 模型。

   bash

   cd your-project-folder
   claude --model qwen2.5:7b

   首次启动时可能会提示登录或配置，对于本地模型，通常可以跳过或按提示完成。

4. 

备选方案：如果觉得手动配置环境变量比较繁琐，可以考虑使用像 CC Switch 这样的开源工具，它提供了一个图形界面来管理和切换不同的模型提供商，可以简化配置过程。

🎭 第三步：安装 Playwright

在你的项目目录中，通过 npm 安装 Playwright 测试框架。注意，建议以 @playwright/test 包的形式安装，这是官方的测试运行器。

bash

npm init playwright@latest

 上图中最后一个问题是否安装playwright browsers，就相当于是执行下面的命令：npx playwright install，所以如果这里已经选择了安装浏览器，后面不需要下载浏览器内核。

按照提示完成安装，它会自动创建示例文件和文件夹。安装完成后，执行以下命令下载所需的浏览器内核（如 Chromium）。

bash

npx playwright install

🚀 第四步：编写你的第一个测试

环境配置完成后，就可以开始编写测试了。你可以手动编写测试文件，也可以先利用 Playwright 的录制功能生成一个初始版本，再让 Claude Code 帮你优化和完善。

1. 录制操作（可选）：在 Git Bash 中运行 npx playwright codegen https://example.com，会打开一个浏览器窗口，你的每一步操作都会被记录下来，并生成对应的测试代码。你可以参考生成的代码结构，并复制到测试文件中。（录制得到的代码如下图）

   

    

2. AI 辅助编写和优化：

   • 在启动了 Claude Code 的终端中，清晰地向它描述你的测试场景。

   • 关键一步：将生成的代码或你认为不够理想的代码交给 Claude Code 审查，并让它根据你的项目规范（如使用 Page Object 模式、优先 data-testid 定位等）进行调整和优化。这能极大提升代码质量和可维护性。 

💡 常见问题与避坑指南

• 安装问题：如果在 npm install 时遇到操作系统检测错误，可以尝试设置 npm 的 os 配置项，然后重新安装：

  bash

  npm config set os linux
  npm install -g @anthropic-ai/claude-code --force --no-os-check

• 浏览器启动失败：确保已经执行了 npx playwright install 来下载浏览器。如果下载很慢，可以设置国内镜像加速：

  bash

  set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright
  npx playwright install

建议先从录制一个简单的页面访问操作开始，完整跑通一次流程，感受一下环境是否正常。如果在配置环境变量或生成第一个测试用例时遇到报错，可以把具体的错误信息发给我看看。

 

遇到的问题：

1.将以下两行命令添加到你的 ~/.bashrc 文件中，这样每次启动 Git Bash 都会自动加载”，这个应该怎么设置

export ANTHROPIC_AUTH_TOKEN=ollama
export ANTHROPIC_BASE_URL=http://localhost:11434

📁 第一步：找到或创建 .bashrc 文件

1. 打开 Git Bash（可以通过开始菜单搜索 "Git Bash" 启动）

2. 检查文件是否已存在：

   bash

   ls -la ~/.bashrc

   • 如果显示文件信息，说明已存在，可以跳过创建步骤

   • 如果显示 No such file or directory，需要创建它

3. 创建 .bashrc 文件（如果不存在）：

   bash

   touch ~/.bashrc

   或者在 Git Bash 中使用记事本创建：

   bash

   notepad ~/.bashrc

   如果提示文件不存在，会问你是否创建，选择"是"

✏️ 第二步：编辑 .bashrc 文件

有几种方式可以编辑这个文件：

方式一：使用记事本（最简单）

bash

notepad ~/.bashrc

记事本打开后，直接在文件中添加以下两行内容：

bash

export ANTHROPIC_AUTH_TOKEN=ollama
export ANTHROPIC_BASE_URL=http://localhost:11434

保存并关闭记事本。

方式二：使用 VS Code（如果你安装了）

bash

code ~/.bashrc

添加同样的两行内容后保存。

方式三：使用命令行编辑器（如 nano 或 vim）

bash

nano ~/.bashrc

或者

bash

vim ~/.bashrc

添加内容后保存退出（nano 按 Ctrl+X，然后按 Y，再按 Enter）。

🔄 第三步：让配置立即生效

编辑完成后，有两种方式让配置生效：

方式一：重新加载配置（推荐）

bash

source ~/.bashrc

方式二：重新打开 Git Bash
关闭当前 Git Bash 窗口，重新打开一个新窗口。

✅ 第四步：验证配置是否生效

执行以下命令检查环境变量是否已正确设置：

bash

echo $ANTHROPIC_AUTH_TOKEN
echo $ANTHROPIC_BASE_URL

如果分别显示 ollama 和 http://localhost:11434，说明配置成功。

📍 文件位置说明

在 Windows 中，~ 这个符号代表你的用户主目录，通常是：

• C:\Users\你的用户名\

所以 ~/.bashrc 文件的实际路径是：

• C:\Users\你的用户名\.bashrc

你也可以在文件资源管理器的地址栏输入 %USERPROFILE% 直接进入这个目录查看。

💡 额外提示

1. 如果不想永久设置，只想在当前终端会话中临时使用，只需在 Git Bash 中手动执行：

   bash

   export ANTHROPIC_AUTH_TOKEN=ollama
   export ANTHROPIC_BASE_URL=http://localhost:11434

   这样只在当前窗口有效，关掉就失效了。

2. 如果 .bashrc 文件不生效，可能是因为 Git Bash 默认加载的是 .bash_profile 或 .profile。你可以在 ~/.bash_profile 中添加一行来确保加载 .bashrc：

   bash

   if [ -f ~/.bashrc ]; then
       source ~/.bashrc
   fi

3. Windows 路径中的反斜杠问题：在 .bashrc 文件中，路径使用正斜杠 / 而不是 Windows 的反斜杠 \，所以写 http://localhost:11434 是正确的。

按照以上步骤设置完成后，每次打开 Git Bash，这两行环境变量配置都会自动加载，无需重复设置。你可以直接用 claude --model qwen2.5:7b 命令启动 Claude Code 了。