codeceptjs前端UI自动化测试

最近做UI自动化测试，就选择了codeceptjs。其框架好处文档里都有，比如

场景驱动——从用户的角度编写验收测试。使测试可读且易于遵循。
Driver Agnostic — 测试可以通过WebDriver、Puppeteer、TestCafe、Protractor、Appium等帮助程序运行。所有这些代码都是相同的。

初始化项目

npm init -y
npm install -g allure-commandline
npm i codeceptjs --save
一路回车键或者自行定义

.babelrc配置

{"presets": ["es2015"],"plugins": ["transform-runtime"]
}

.eslintrc.js

module.exports={root:true,parser:'@typescript-eslint/parser',plugins:['@typescript-eslint',],extends:['eslint:recommended','plugin:@typescript-eslint/eslint-recommended','plugin:@typescript-eslint/recommended',]
};

tsconfig.json

{"ts-node": {"files": true},"compilerOptions": {"target": "es2018","lib": ["es2018", "DOM"],"esModuleInterop": true,"module": "commonjs","strictNullChecks": true,"types": ["codeceptjs"],},
}

package.json

{"name": "test-demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "npx codeceptjs run-multiple basic","def": "npx codeceptjs def","report": "allure serve"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@types/node": "^15.6.1","@typescript-eslint/eslint-plugin": "^4.25.0","@typescript-eslint/parser": "^4.25.0","babel-cli": "^6.26.0","babel-plugin-transform-runtime": "^6.23.0","babel-preset-env": "^1.7.0","babel-preset-es2015": "^6.24.1","babel-preset-latest": "^6.24.1","babel-register": "^6.26.0","eslint": "^7.27.0","nodemon": "^1.18.10","rimraf": "^2.6.3","ts-node": "^10.0.0","typescript": "^4.3.2"},"dependencies": {"@babel/runtime": "^7.4.2","assert": "^2.0.0","codeceptjs": "^3.0.7","cookie-parser": "^1.4.4","cross-env": "^5.2.0","got": "^11.8.2","node-uuid": "^1.4.8","playwright": "^1.11.1",}
}

npm test 测试运行
npm run report 报告输出
npm run def ts转换

codecept.conf.js 配置

const { setHeadlessWhen } = require('@codeceptjs/configure');// turn on headless mode when running with HEADLESS=true environment variable
// export HEADLESS=true && npx codeceptjs run
setHeadlessWhen(process.env.HEADLESS);exports.config = {tests: './tests/**_test.ts',output: './output',require: ["ts-node/register"],  // ts编译helpers: {Playwright: {url: 'http://www.******.com',  // 测试地址show: true,browser: 'chromium',windowSize: '1200x900',},MyHelper: {require: './pages/CustomHelper.ts',}},multiple: {basic: {browsers: ['chromium']}},include: {customActors: './utils/CustomActors.ts',  // 引入方法loginPage: './pages/loginPage.ts',  // 引入方法},bootstrap: null,mocha: {},name: 'test-demo',plugins: {pauseOnFail: {},retryFailedStep: {enabled: true},tryTo: {enabled: true},screenshotOnFail: {enabled: true},allure: { // 测试报告enabled: true,outputDir: 'allure-results'}}
}

目录结构

CustomHelper

class CustomHelper extends Helper {constructor(config: any) {super(config)this.helpers;}printMessage(msg: string) {console.log(msg + 'Helper')}printHelpers() {console.log('Helpers enabled', Object.keys(this.helpers))}
}export = CustomHelper

loginPage.ts

//  Login_test 调用公用方法
import loginPageConst from '../target/loginPage';
const { I, customActors } = inject()
const { actors } = customActors;export = {locator: 'body',goToHome: () => {I.amOnPage('/')},testMethod: (msg: string) => {console.log(msg)},clearForm: () => {  // 清楚表单字段actors.clearReactField(loginPageConst.userEle);actors.clearReactField(loginPageConst.psdEle);},async link () {await I.waitForVisible(this.locator)}
}

测试目录 tests Login_test.ts

import assert from 'assert';
import loginPageConst from '../target/loginPage'; // 目标id元素class  或者公共字段Feature('Login Test');Scenario('Login Test', async ({ I, loginPage }) => {I.printMessage('登录测试');await loginPage.goToHome();I.see('登录');I.fillField(loginPageConst.userEle, '18579946833');I.fillField(loginPageConst.psdEle, 'abc2123');loginPage.clearForm();I.wait(1);I.fillField(loginPageConst.userEle, '18579946833');I.fillField(loginPageConst.psdEle, 'abc21823');I.click(loginPageConst.submitEle);I.wait(2);const errMsg = await I.grabTextFrom(loginPageConst.tipsMsgEle);I.printMessage(errMsg);assert.ok(errMsg.includes('错误') || errMsg.includes('密码'), '登录输入错误');I.click(loginPageConst.tipsRegBtnEle);I.click(loginPageConst.tipsRegBgEle);loginPage.clearForm();loginPage.goToHome();I.fillField(loginPageConst.userEle, '185×××××87');I.fillField(loginPageConst.psdEle, 'abc123');I.click(loginPageConst.submitEle);I.waitUrlEquals(loginPageConst.myCompanyUrl, 4);pause();const url = await I.grabCurrentUrl();assert.ok(url === loginPageConst.myCompanyUrl, '登录成功');
});

CustomActors

// 方法增加在了actor对象上 react下改框架方法不能清楚表单值 ，自定义该方法
export const actors = actor({clearReactField: async function(locator:string) {this.doubleClick(locator);await this.pressKey('Backspace');}
});

运行test命令

npm test

查看测试报告

codeceptjs前端UI自动化测试相关推荐

从一次故障聊聊前端 UI 自动化测试
背景事件的起因在于老板最近的两次"故障",一次去年的,一次最近.共同原因都是脚手架在发布平台发布打包时出错,导致线上应用白屏不可用. 最神奇的是,事后多次 Code Review ...
ui自动化测试框架_浅谈前端（UI）自动化测试
作为一名测试开发从业者,自动化测试好像是绕不开的话题....结合最近接触到的一些测开应聘同学聊到关于前端自动化测试及自己的理解,分享一下自己对UI自动化测试的认识,大概如下. 测试分层的自动化测试思想 ...
如何提高UI自动化测试的质量
背景项目是基于Ruby on Rails开发的web程序,应该说项目中的测试实践是很好的,具有高覆盖率的单元测试以及比较合理的集成测试.存在的问题是,所有的单元测试和集成测试都是针对后端代码的,前端 ...
python3.7界面设计_基于selenium+Python3.7+yaml+Robot Framework的UI自动化测试框架
前端自动化测试框架项目说明本框架是一套基于selenium+Python3.7+yaml+Robot Framework而设计的数据驱动UI自动化测试框架,Robot Framework 作为执行 ...
干货 | 基于 BDD 理念的 UI 自动化测试在携程度假的应用
作者简介 Leo Li,携程高级软件工程师,负责度假 BDD-Test UI 自动化测试框架的研发.维护和迭代等工作. 如今无论大公司还是小公司都越来越重视测试质量.并且前端领域越来越繁荣,前端工程也 ...
ui自动化测试测试报告_您需要了解的有关UI测试的所有信息
ui自动化测试测试报告让我们从一个问题开始. 用户在网站上进行互动的第一件事是什么? 接口,当然. 网站的外观是在用户身上产生"第一印象"的第一件事. 交互式Web应用程序可以为 ...
什么是 UI 自动化测试？
白码会说:Time will tell. UI 自动化是 Web 页面自动化测试的解决方案,可以用来测试应用的前端页面.自动化插件能够记录下应用的界面功能或流程,并用于进行自动化测试. UI 自动化主 ...
UI自动化测试是什么？什么项目适合做UI自动化测试
目录前言 1.about自动化测试 2.自动化测试分层 3.什么样的项目适合自动化测试 4.常见的自动化测试工具简介 5.UI自动化测试要不要做? 6.什么样的项目更适合做自动化测试结语前言本 ...
华为APP UI自动化测试岗面试真题，真实面试经历。
1.Android APP 内存不足时,如何获得内存? 系统优先结束被挂起(暂停)的进程,释放内存. 2.APP 测试常见问题有哪些?原因有哪些? 常见的有 crash.ANR(应用无响应.卡死),一 ...

codeceptjs前端UI自动化测试

初始化项目

.babelrc配置

.eslintrc.js

tsconfig.json

package.json

codecept.conf.js 配置

目录结构

CustomHelper

loginPage.ts

测试目录 tests Login_test.ts

CustomActors

运行test命令

查看测试报告

codeceptjs前端UI自动化测试相关推荐

最新文章

热门文章