【基於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