标签:ons tee 自动化 tar wan page form env port
安装包 | 命令 |
---|---|
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
需要注意的是target 修改成es6,我们现在按照es6的语法特性
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true,
"outDir": "dist",
}
}
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 | 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 |
"globalSetup": "jest-environment-puppeteer/setup",
"globalTeardown": "jest-environment-puppeteer/teardown",
"testEnvironment": "./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('同程旅游');
});
})
【前端自动化框架】TypeScript+Puppeteer+Jest 整合 (一)
标签:ons tee 自动化 tar wan page form env port
原文地址:https://www.cnblogs.com/totoro-cat/p/11384034.html