【基于PUPPETEER前端自动化框架】【一】TypeScript+Puppeteer+Jest 整合

前提：掌握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