第二章：测试环境搭建——Node.js安装与配置、微信开发者工具安装、小程序项目创建与配置

好，咱们正式开始动手了。

这一章，说白了就是「把家伙事儿备齐」。你想想看，没有环境，你写再多代码也跑不起来。我见过不少新手，一上来就急着写脚本，结果环境没配好，折腾半天连个Hello World都跑不出来。嗯，咱们别走那个弯路。

2.1 Node.js安装与配置

Node.js是整个自动化测试的基石。没有它，很多工具都跑不起来。我个人习惯用LTS版本，稳定，省心。

2.1.1 下载与安装

去Node.js官网，下载LTS版本。别追新，追新容易踩坑。我曾经手贱装了个最新版，结果某个依赖包不兼容，排查了一下午。从那以后，我再也不当小白鼠了。

安装步骤很简单，一路Next就行。但要注意两点：

  • 安装路径不要带中文和空格。我习惯用 C:\nodejs 或者 D:\nodejs
  • 安装时勾选「Add to PATH」，这样命令行里就能直接用了

装完之后，打开命令行（Win+R，输入cmd），验证一下：

node -v
npm -v

能看到版本号，就说明装好了。如果提示「不是内部或外部命令」，别慌，八成是环境变量没配好。去系统环境变量里，把Node.js的安装路径加到PATH里就行。

小技巧： 我习惯把npm的全局安装路径改到D盘，免得C盘越来越肥。命令如下： 
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

2.1.2 配置淘宝镜像

国内下载npm包，速度你懂的。我建议配个淘宝镜像，下载速度能快10倍。

npm config set registry https://registry.npmmirror.com

配完之后，可以验证一下：

npm config get registry

看到返回的地址是淘宝镜像，就对了。

注意： 有些公司内部有私有npm仓库，如果你在公司环境，先问问同事有没有配好的镜像地址。别自己瞎配，到时候包拉不下来就尴尬了。

2.2 微信开发者工具安装

微信开发者工具，是我们调试和预览小程序的必备工具。自动化测试也得靠它来驱动。

2.2.1 下载与安装

去微信官方文档，找到「开发者工具」下载页面。选择稳定版，别用beta版。beta版有时候会有奇奇怪怪的bug，我吃过亏。

安装时注意：

  • 安装路径同样不要有中文和空格
  • 安装完成后，先打开一次，扫码登录。这一步很重要，因为工具需要绑定你的微信账号

登录成功后，你会看到这样的界面：

功能区域 说明
菜单栏 文件、编辑、工具等常规操作
工具栏 编译、预览、上传等常用功能
模拟器 手机屏幕模拟，实时查看效果
编辑器 代码编辑区域
调试器 类似Chrome DevTools，用于调试

2.2.2 开启自动化相关端口

这一步很多人会漏掉。微信开发者工具默认不开自动化端口，你得手动打开。

点击菜单栏的「设置」→「安全设置」，找到「服务端口」，把它打开。默认端口是9420。

重点： 端口必须打开，否则自动化脚本连不上工具。我刚开始做自动化时，脚本死活跑不通，查了半天才发现是端口没开。你说冤不冤？

2.3 小程序项目创建与配置

环境搭好了，咱们来创建一个真正的小程序项目。别用官方示例，咱们自己建一个，这样后面写自动化脚本时，你对项目结构心里有数。

2.3.1 创建项目

打开微信开发者工具，点击「新建项目」：

  1. 项目名称：写个有意义的，比如 auto-test-demo
  2. 目录：选一个你记得住的位置，比如 D:\wechat-projects
  3. AppID：如果你有正式的AppID就填，没有的话选「测试号」也行
  4. 开发模式：选「小程序」
  5. 模板：选「不使用模板」，咱们从零开始

点击确定，项目就创建好了。你会看到这样的目录结构：

auto-test-demo/
├── pages/
│   └── index/
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
├── app.js
├── app.json
├── app.wxss
└── project.config.json

这个结构你得熟悉，后面写自动化脚本时，经常要定位页面路径和文件。

2.3.2 配置project.config.json

这个文件很重要，它记录了项目的各种配置。自动化测试时，工具会读取这个文件来知道项目怎么跑。

打开 project.config.json，确保里面有这些配置：

{
  "description": "自动化测试示例项目",
  "packOptions": {
    "ignore": []
  },
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "compileType": "miniprogram",
  "libVersion": "3.3.4",
  "projectname": "auto-test-demo",
  "condition": {}
}
个人经验： libVersion 这个字段，我建议用最新的稳定版。版本太老的话，有些新API不支持，自动化脚本可能会报错。你可以去微信官方文档查当前的最新版本号。

2.3.3 验证项目能正常运行

在开发者工具里，点击「编译」，看看模拟器里能不能正常显示页面。如果能看到一个「Hello World」或者你自定义的页面，那就说明项目创建成功了。

如果报错，别急。常见的坑有：

  • app.json 里注册了不存在的页面路径
  • 代码里有语法错误，比如少了个逗号
  • AppID 无效（如果你用了测试号，这个可以忽略）

我建议你养成一个好习惯：每改完一个文件，就编译一次。别攒一堆问题再排查，那样你会疯掉的。

2.4 环境验证：跑一个简单的自动化脚本

环境都搭好了，咱们来验证一下。写一个最简单的自动化脚本，看看能不能控制微信开发者工具。

首先，安装 miniprogram-automator：

npm install miniprogram-automator --save-dev

然后，在项目根目录下新建一个 test.js 文件：

const automator = require('miniprogram-automator')

async function run() {
  // 连接开发者工具
  const miniProgram = await automator.connect({
    projectPath: 'D:\\wechat-projects\\auto-test-demo', // 改成你的项目路径
    port: 9420
  })

  // 获取当前页面
  const page = await miniProgram.currentPage()
  console.log('当前页面路径:', page.path)

  // 断开连接
  await miniProgram.disconnect()
}

run()

在命令行里运行：

node test.js

如果控制台输出了页面路径，恭喜你，环境搭建成功了！

注意： 运行脚本前，一定要确保微信开发者工具已经打开，并且打开了你的项目。否则脚本会报连接超时。我刚开始就老忘这一步，后来养成了习惯：先开工具，再跑脚本。

好了，环境搭完了。下一章咱们开始写真正的自动化测试用例。到时候你会发现，环境搭得好，后面写代码就顺风顺水。要是环境没搭好，后面全是坑。嗯，咱们已经避开了大部分坑，可以安心往下走了。

← 上一章 📖 返回目录 下一章 →