为什么选用 codeceptjs

怎么写

上篇里面有提到 cucumber 的步骤定义可以用自己喜欢的任意框架来写。codeceptjs 支持集成 cucumber，并且提供了方便的命令来根据 feature 描述生成 steps definition 文件框架，就可以使用 codeceptjs 的 API 来写测试脚本从而验证 feature 文件的步骤描述。

codeceptjs 的入口是一个叫做 codecept.conf.js 的文件，里面会有各种配置包括使用的 helpers 是 puppeteer 还是 webDriver，plugin 有哪些等。

如果要集成 gherkin，则在配置文件中增加这样一项：

1
2
3
4
5

gherkin: {
  features: '*.feature',
  // 自定义步骤可以不需要手动进入到配置文件中
  steps: './steps_definition/steps.js'
}

就会识别出 .feature 结尾的文件然后运行时去匹配 steps 配置项下的文件中的描述，继而运行相应的测试用例。

codeceptjs 还提供了codeceptjs gherkin:snippets [--path=PATH] [--feature=PATH]命令来根据 feature 文件中的描述生成如下的代码框架：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

Given("在xx页面", () => {
  // From "feature/xxx.feature" {"line":4,"column":6}
  throw new Error("Not implemented yet");
});

When("点击xx按钮", () => {
  // From "feature/xxx.feature" {"line":5,"column":7}
  throw new Error("Not implemented yet");
});

Then("打开xx弹窗", () => {
  // From "feature/xxx.feature" {"line":6,"column":5}
  throw new Error("Not implemented yet");
});

然后就可以使用 codeceptjs 提供的 API 来具体实现相应的步骤：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Given("在xx页面", () => {
  I.amOnPage("/index");
});

When("点击xx按钮", () => {
  I.click("#button");
});

Then("打开xx弹窗", () => {
  I.see("xx header");
});

最后使用 codeceptjs run --features 来运行。

几个注意事项

  • codeceptjs 配置 puppeteer 时，会发现启动的 chromium 尺寸在修改 windowSize 后也没有什么变化，此时需要额外的一些配置：
1
2
3
4
5
6
7
8
9

helpers: {
      // ...
      Puppeteer: {
        windowSize: '1280x1000',
        chrome: { args: ['--window-size=1280,1000'], defaultViewport: null }
        // ...
      },
}
  • 当遇到跨域情况时，可以直接在配置文件中写：
1
2
3
4
5
6
7
8

helpers: {
      // ...
      Puppeteer: {
        chrome: { args: ['--disable-web-security'] }
        // ...
      },
}
  • codeceptjs 可以在自定义 helper 里面拿到 Puppeteer 的 page 和 browser
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// config.js
helpers: {
      // ...
      CustomerHelper: {
        require: "path/to/CustomHelper";
      }
}

// CustomHelper.js
const Helper = codecept_helper

class CustomHelper extends Helper {
      // ...
      const { browser } = this.helpers.Puppeteer
      const { page } = this.helpers.Puppeteer
}