前提:掌握Jest + Puppeteer

1.Jest环境配置

2.Jest-MATCHERS匹配器

3.Jest-全局变量设置

4.Puppeteer安装

5.Puppeteer元素获取

6.Puppeteer文本值获取

7.Puppeteer iframe切换

8.Puppeteer 拖拽

9.Puppeteer Js脚本执行

一 需要安装的插件

安装包 命令
TypeScript npm install typescript --save-dev
Jest npm install jest --save-dev
ts-jest npm install ts-jest --save-dev
@types/jest npm install @types/jest --save-dev

二 安装步骤

1.mkdir UIAuto_Puppeteer //创建文件夹
2.cd UIAuto_Puppeteer // 进入该文件夹
3.安装以上包
4.tsc --init // 初始化相关配置文件,生成tsconfig.json
5.jest --init //初始化,生成jest.config.js

三 tsconfig.json配置

需要注意的是target 修改成es6,我们现在按照es6的语法特性

{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true,
"outDir": "dist",
}
}

四 jest配置

(一) 配置文件

  1. package.json : "scripts":{test": "jest"}
  2. jest.config.js : module_exports = {配置项}

(二) jest.config.js配置项解析

  1. roots : 当前目录
  2. testMatch : 设置识别哪些文件是测试文件(glob形式),与testRegex互斥,不能同时写
  3. moduleFileExtensions : 测试文件的类型
  4. transform : 用ts-jest 处理ts文件
module.exports = {
roots:[
"<rootDir>"
],
"moduleFileExtensions": [
"ts",
"js",
],
// 匹配__tests__文件夹下的后缀为 .test.ts文件
"testMatch": [
"**/__tests__/**/*.test.ts"
],
"transform": {
"^.+\\.ts$": "ts-jest"
}
};

五 文件目录

--UIAuto_Puppeteer
---__tests__
----demo
-----1.test.ts
-----2.test.ts
---node_mudules
---jest.config.js
---tsconfig.js
---package.json
---package-lock.json
$ UIAuto_Puppeteer : npm rum test

六 Puppeteer 配置

(一) 依赖的安装包

安装包 命令
puppeteer npm install puppeteer --save-dev
解决Chromium无法下载 npm i --save puppeteer --ignore-scripts
解决Chromium无法下载 set PUPPETEER_DOWNLOAD_HOST = https://storage.googleapis.com.cnpmjs.org
@types/puppeteer npm install @types/puppeteer --save-dev
@types/jest-environment-puppeteer npm install @types/puppeteer --save-dev
@types/jest npm install @types/jest --save-dev
jest-puppeteer npm install jest-puppeteer --save-dev
jest-environment-puppeteer npm install jest-environment-puppeteer --save-dev

(二) 步骤

1.创建puppeteer_enviroment.js
2.配置jest.config.js,再jest.config.js里添加以下项,
  1. globalSetup:全部变量,再之前运行
  2. globalTeardown:全部变量,再之后运行
  3. testEnvironment:测试环境
  "globalSetup": "jest-environment-puppeteer/setup",
"globalTeardown": "jest-environment-puppeteer/teardown",
"testEnvironment": "./puppeteer_enviroment.js",
4.配置puppeteer_enviroment.js

具体可以看看jest-environment-puppeteer的源码,这个代码很简单,setUp继承了jest-environment-puppetee,teardown() 继承了jest-environment-puppetee 里的teardown()

const PuppeteerEnviromenent = require('jest-environment-puppeteer');
class CustomEnvironmemnt extends PuppeteerEnviromenent {
async setup() {
await super.setup();
} async teardown() {
await super.teardown()
} }
module.exports = CustomEnvironmemnt

七 跑测试用例

代码如下,测试套件这边就不说了,比较简单

import { Page } from 'puppeteer';
describe('ly.com demo cases', () => {
let page: Page;
beforeEach(async () => {
page = await browser.newPage();
await page.goto('https://www.ly.com/');
});
afterEach(async ()=> {
await page.close();
})
test('test-ly-demo', async () => {
const logo = await page.$eval('.logo', el => el.getAttribute('title'));
console.log('logo');
await expect(logo).toEqual('同程旅游');
});
})

参考 https://jestjs.io/docs/zh-Hans/puppeteer
github代码地址:https://github.com/wangxiao9/puppeteer_demo

【基于PUPPETEER前端自动化框架】【一】TypeScript+Puppeteer+Jest 整合的更多相关文章

  1. 【基于Puppeteer前端自动化框架】【二】PO模式,断言(如何更简便逻辑的写测试代码)

    一.概要 前面介绍了Puppeteer+jest+TypeScript做UI自动化,但是这知识基础的,我们实现自动化要考虑的很多,比如PO模式,比如配置文件,比如断言等等.下面就来一一实现我是怎么用p ...

  2. 3分钟手把手带你搭建基于selenium的自动化框架

    1 .什么是seleniumSelenium 是一个基于浏览器的自动化工具,它提供了一种跨平台.跨浏览器的端到端的web自动化解决方案.Selenium主要包括三部分:Selenium IDE.Sel ...

  3. ShutIt:一个基于 Python 的 shell 自动化框架

    ShutIt是一个易于使用的基于shell的自动化框架.它对基于python的expect库(pexpect)进行了包装.你可以把它看作是“没有痛点的expect”.它可以通过pip进行安装. Hel ...

  4. 前端MVC框架、类库、UI框架选择

    CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于 ...

  5. 自动化框架Quantum Automation Framework+cucumber+perfecto

    名词解释 Quantum: 一款基于JAVA的自动化框架,支持手机和桌面WEB的自动化测试.与cucumber和perfecto实现了整合,用于BDD自动化. Refer: http://projec ...

  6. 前端测试框架 puppeteer 文档翻译

    puppeteer puppeteer 是一个通过DevTools 协议提供高级API 来控制 chrome,chromium 的 NODE库; puppeteer默认运行在 headless 模式, ...

  7. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  8. Puppeteer前端自动化测试实践

    本篇内容将记录并介绍使用Puppeteer进行自动化网页测试,并依靠约定来避免反复修改测试用例的方案.主要解决页面众多时,修改代码导致的牵连错误无法被发现的运行时问题.文章首发于个人博客.对前端感兴趣 ...

  9. 基于 Docker 和 GitLab 的前端自动化部署实践笔记

    基于 Docker 和 GitLab 的前端自动化部署 实践笔记 随着接触的项目越来越多,在部署测试流程上重复耗时工作也越来越多,所以对前端工作的CI/CD实现愈发迫在眉睫. 前端开发由于三大框架的崛 ...

随机推荐

  1. 一个基于canvas的移动端图片编辑器

    欢迎使用 canvas_mobile_drag 项目地址:https://github.com/xiaosu95/canvas_mobile_drag 点击查看demo(在移动端上查看) 该插件是一款 ...

  2. 开源项目bootdo的实战开发笔记

    开源项目bootdo 源码地址:https://github.com/lcg0124/bootdo 技术选型 1.后端 核心框架:Spring Boot 安全框架:Apache Shiro 模板引擎: ...

  3. 在Linux系统中安装Chrome浏览器

    前言:作为一个Web开发人员,经常与我们相伴的必然少不了浏览器,而Google旗下的chrome浏览器更是凭借着出色的性能.简洁的界面被广大开发者所喜爱,今天分享下如何在linux系统下安装chrom ...

  4. requests库响应消息体的四种格式

    1.r.text  文本响应内容,返回字符串类型,获取网页html时用: 2.r.content  字节响应内容,返回字节类型,下载图片或者文件时用: 3.r.json json解码响应内容,返回字典 ...

  5. Spring 5的最后一个特性版本5.3发布,4.3将于12月终止维护

    10月27日,Spring Framework团队宣布了5.3版本正式GA,Spring用户可以在repo.spring.io和Maven Central上获取到最新版本的依赖包. JDK的版本支持 ...

  6. 给萌新HTML5 入门指南(二)

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 上一篇我们已经为大家介绍了HTML5新增的内容和基础页面布局,这篇会继续向大 ...

  7. node.js+express框架 修改后自启【不需要再执行start】

    我们每次修改完后都需要重新启动下才能刷新,就很麻烦'nodemon'解决了这个问题. 这里直接进行全局安装 npm install -g nodemon 安装到本地 npm install nodem ...

  8. Group指定的方式如下: @Test(groups = {"fast", "unit", "database" })

    Group指定的方式如下: @Test(groups = {"fast", "unit", "database" }) public voi ...

  9. SLAM笔记

    1.matrix.preTranslate()和matrix.postTranslate()的区别 matrix.preTranslate(matrix_1); matrix.postTranslat ...

  10. 知识全聚集 .Net Core 技术突破 | 简单说说工作单元

    知识全聚集 .Net Core 技术突破 | 简单说说工作单元 教程 01 | 模块化方案一 02 | 模块化方案二 其他教程预览 分库分表项目实战教程 Git地址: https://github.c ...