简介：是Codeception测试框架下的一个项目，是运行在nodejs的UI测试框架, 能使场景驱动的验收测试简单化。
特点：

  • 从用户角度编写
  • 所有的交互动作来自于对象I。对象I的方法都被描述为用户访问网站可能产生的行为，易读易写易维护

  • 对多个后端API兼容。odeceptjs支持多个webdriver实现 i.e. webdriverio, protractor and phantomjs, 我们可以很简单在他们之间切换。

    1. webdriver实现在codeceptjs里面叫做Helper，正是下面这些Helper给对象I提供了actions<br />      [Webdriverio](https://link.jianshu.com/?t=http://webdriver.io/)<br />      [Protractor](https://link.jianshu.com/?t=http://www.protractortest.org/)<br />      [Phantomjs](https://link.jianshu.com/?t=http://phantomjs.org/)<br />      [Nigntmare](https://link.jianshu.com/?t=http://www.nightmarejs.org/)<br />      [Appium](https://link.jianshu.com/?t=http://appium.io/)<br />      [Selenium Webdriver](https://link.jianshu.com/?t=https://www.npmjs.com/package/selenium-webdriver)

  • 同步。我们不用关心js中的异步问题 i.e. promises & callback。测试场景是线性的

  • 基于Mocha测试框架。
  • 可以编写出易读易懂的场景驱动的验收测试。可以写成BDD style
  • Smart locator。Smart locators: use names, labels, matching text, CSS or XPath to locate elements
  • 互动式debug shell。可以在测试执行时随时暂停然后尝试codeceptjs提供地不同的API
  • 提供了方便的命令行工具帮助创建测试。可以通过命令一步创建tests, pageobjects, stepobjects
  • 支持web和mobile端的测试

安装教程：https://blog.csdn.net/zhaofuyuan135/article/details/107507496

安装步骤：
1、安装nodejs
2、新建目录，cmd进入dos命令框
3、初始化npm 命令：npm init -y
npm:开源的Node.js包管理工具。用来安装各种Node.js的扩展
4、安装codeceptjs 命令：npm install codeceptjs puppeteer —save-dev
puppeteer:
1、一个Node库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。
2、默认以 headless 模式运行，但是可以通过修改配置文件运行“有头”模式。
提示错误：timeout
可以执行命令：npm config set registry https://registry.npm.taobao.org（换成淘宝源，使安装速度更快）
5、初始化codeceptjs 命令：npx codeceptjs init

安装过程注意事项：
1、设置名称是以_test.js结尾，表示是测试用例，方便区分
2、helper to use 选择puppeteer
3、编写测试用例标题起名通俗易懂

登录脚本编写：

  1. Feature('login');
  3. const SELECTORS = {
  4.     gotourl: 'https://zhuang.pinming.cn/login/#/login/',
  5.     account: '17621905947',
  6.     pwds: '75prefer619!!',
  8. };
  9. Scenario('test something', ({ I }) => {
  10.     //在浏览器打开页面
  11.     //对应网址在Windows下可以不与codecept.conf.js中Puppeteer设定的url一致，mac下相反
  12.     I.amOnPage(SELECTORS.gotourl);
  14.     //打开浏览器等到可以看到对应文字再进行登录
  16.     I.fillField('请输入账号/手机号', SELECTORS.account);
  18.     //输入密码
  19.     I.fillField('请输入密码', SELECTORS.pwds)
  21.     //点击登录按钮
  22.     I.click({css:'button, [type="submit"]'})
  24.     //能够暂停执行进入交互模式 也就是执行完成会停留当前页面
  25.     pause();
  26. });

运行过程中遇到的问题
1、执行到查看”登录”等中文时，出现乱码情况
解决办法:js文件记事本打开，另存到当前目录，将编码格式改成UTF-8,文件替换
image.png
2、运行到输入账号等，提示 Error: Evaluation failed: DOMException: Failed to execute ‘querySelectorAll’ on ‘Element’: ‘请输入账号/手机号’ is not a valid selector
解决方法：

codeceptUI的安装与使用

作用：是CodeceptJS具有交互式的图形化测试运行器
使用场景：

  • 按组或单个运行测试
  • 获取测试报告
  • 复习测试
  • 编辑测试和页面对象
  • 编写新的测试

安装教程：https://www.cnblogs.com/7047-zfy/p/13231455.html

安装过程中遇到的问题：(安装过程较慢，需耐心等待)
1、报错：Error: connect ETIMEDOUT 简单解决：重新安装

安装完成后，需要输入命令npx codecept-ui运行，浏览器输入cmd运行结果给出的地址
遇见的问题：地址登录不进去，提示无法访问网站
尝试用到的解决办法：
1、控制面板-windows defender防火墙-关闭专用网络、公用网络防火墙
2、浏览器-设置-系统-打开代理-手动设置代理为运行结果给出的地址

image.png
3、再浏览器打开地址，成功打开
image.png

安装 mochawesome

1、pm i mochawesome
2、npm i mocha -D //执行安装命令

详细安装教程：https://www.cnblogs.com/7047-zfy/p/13231525.html

遇见的问题：(安装过程较慢，需耐心等待)
1、报错：Error: connect ETIMEDOUT 简单解决：重新安装

运行结果：npx codeceptjs run —reporter mochawesome
image.png
提示测试报告的路径，可以查看

安装集成开发环境visual studio code

安装地址：https://code.visualstudio.com/
新建工程：https://blog.csdn.net/Vickers_xiaowei/article/details/82755942
其他使用教程：https://www.jianshu.com/p/95c4c869bff1
ctrl+shift+p：打开插件安装，搜索需要安装的插件并安装
设置自动保存：设置-settings-搜索auto save-勾选delay
忽略捕获异常：设置-settings-搜索use global ignore files并勾选，但是并没有解决问题
导入文件并运行：
编译：
image.png
结果不正确，暂未解决：
image.png