puppeteer自动化测试
1、基础知识
- puppeteer.launch() 创建浏览器实例
- puppeteer.newPage() 创建一个新页面
- puppeteer.goto() 进入指定网站
- page.screenshot() 截屏
- page.pdf() 输出为pdf 注意必须是headless=true
- page.evaluate() 在浏览器中执行函数想到与在控制台执行函数 返回promise
- page.waitFor(selectorOrFunctionOrTimeout[, options[, ...args]]) 等待 可以是等待一段时间,某个函数执行或某个DOM的出现
- page.click(selector[, options]) 点击某个元素
- page.type(selector, text[, options]) 文本输入
- page.frames() 获取当前页面所有的 iframe,然后根据 iframe 的名字精确获取某个想要的 iframe
- iframe.$(‘.srchsongst‘) 获取 iframe 中的某个元素
- iframe.evaluate() 在浏览器中执行函数,相当于在控制台中执行函数,返回一个 Promise
- Array.from 将类数组对象转化为对象
- iframe.$eval() 相当于在 iframe 中运行 document.queryselector 获取指定元素,并将其作为第一个参数传递
- iframe.$$eval 相当于在 iframe 中运行 document.querySelectorAll 获取指定元素数组,并将其作为第一个参数传递
page.emulate() 指定设备
2、配置文件
jest.config.js
module.exports = { preset: 'jest-puppeteer', //调用preset
// globals: _.assign({}, config.get('e2e'), { //这里可以注入全局变量
// ENV_URL: config.get('baseUrl')
// }),
testMatch: ['**/test/*.test.js?(x)'] //指定需要进行测试的文件
}
jest-puppeteer.config.js
const port = process.env.TEST_SERVER_PORT ?
Number(process.env.TEST_SERVER_PORT) : // console.log(port) process.env.TEST_SERVER_PORT = port module.exports = {
launch: {
headless: process.env.CI === 'true',
},
browserContext: process.env.INCOGNITO ? 'incognito' : 'default',
server: {
command: `cross-env PORT=${port} node test`,
port,
launchTimeout: ,
},
}
命令行 npm run test
"test": "cross-env INCOGNITO=true jest -c jest.config.js --notify --detectOpenHandles",
3、服务文件/test/index.js(static即测试文件)
const path = require('path')
const express = require('express')
const app = express()
app.use(express.static(path.join(__dirname, 'static')))
console.log(process.env.PORT)
app.listen(process.env.PORT)
参考文章
puppeteer自动化测试的更多相关文章
- Puppeteer自动化测试cnode.js中文社区
如果完全不了解puppeteer的朋友可以去看看我的这篇随笔:https://www.cnblogs.com/zlforever-young/p/11569890.html 开始之前需要了解的知识:E ...
- 令人惊叹的Chrome浏览器插件
Chrome是一个简洁而又高效(高性能,高消耗)的浏览器.接下来让我吐血推荐一些常用的Chrome插件. 日常插件 uBlock Origin ----- 比Adblock性能更高的广告插件. Adk ...
- web前端自动化测试/爬虫利器puppeteer介绍
web前端自动化测试/爬虫利器puppeteer介绍 Intro Chrome59(linux.macos). Chrome60(windows)之后,Chrome自带headless(无界面)模式很 ...
- 基于jest和puppeteer的前端自动化测试实战
前端测试现状 经常听到后端同学说“单元测试”,前端写过测试用例的有多少?答案是:并不多,为什么呢?两个主要原因 1.前端属于GUI软件,浏览器众多,兼容问题让人头大,用户量有一定规模的浏览器包括: I ...
- Puppeteer前端自动化测试实践
本篇内容将记录并介绍使用Puppeteer进行自动化网页测试,并依靠约定来避免反复修改测试用例的方案.主要解决页面众多时,修改代码导致的牵连错误无法被发现的运行时问题.文章首发于个人博客.对前端感兴趣 ...
- puppeteer UI自动化测试demo(一)
一.简介 这个不大常见,比较常见的是selenium和weddriver: 所以就增加一个说明,来自官网的. Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTool ...
- CukeTest+Puppeteer的Web自动化测试(一)
CukeTest+Puppeteer的Web自动化测试 一.初识BDD.Cucumber(黄瓜).CukeTest 行为驱动开发(Behavior Driven Development,BDD).行为 ...
- Puppeteer - 谷歌推出的自动化测试工具库
Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制无头 Chrome 或 Chromium.它允许你从浏览器之外的环境(即命令行)与Chromium ...
- puppeteer:官方出品的chrome浏览器自动化测试工具
puppeteer发布应该有一段时间了,这两天正好基于该工具写了一些自动化解决方案,在这里抛砖引给大家介绍一下. 官方描述: Puppeteer is a Node library which pro ...
随机推荐
- .net core webapi发布
地址:https://www.cnblogs.com/laozhang-is-phi/p/9565227.html#autoid-5-1-0 地址2:https://www.cnblogs.com/f ...
- JS之判断json对象中是否含有某个key值
var json = {"key1":"val1","key2":"val2","key3":&qu ...
- oracle--等待事件
1. Buffer busy waits 从本质上讲,这个等待事件的产生仅说明了一个会话在等待一个Buffer(数据块),但是导致这个现象的原因却有很多种,常见的两种是:当一个会话试图修改一个数据块, ...
- fastclick源码分析
https://www.cnblogs.com/diver-blogs/p/5657323.html 地址 fastclick.js源码解读分析 阅读优秀的js插件和库源码,可以加深我们对web开发 ...
- Mybatis Dao开发方法(二)
使用Mapper代理的方式进行开发 Mapper开发的原理 使用Mybatis的Mapper代理方式进行开发,使用该方式,只需要编写Mapper接口,不再需要编写实现类,由Mybatis框架通过接 ...
- 配置文件详解和核心api讲解
一.配置文件详解 1.映射文件详解 1.映射配置文件的位置和名称没有限制. -建议:位置:和实体类放在统一目录下. 名称:实体类名称.hbm.xml. 2.在映射配置文件中,标签内的name属 ...
- <数据挖掘导论>读书笔记8FP树
1FP树
- PHP学习9——MySQL数据库
主要内容: MySQL的启动 MySQL数据库操作 数据库表设计 创建和查看表 修改表结构 MySQL语句操作 数据库备份与恢复 PHP操作MySQL数据库 面向对象的数据库操作 MySQL数据库是目 ...
- button小手设置 css的cursor
需要对元素的css属性cursor进行设置.cursor可能的值: default 默认(通常是一个箭头) auto 默认.浏览器设置的光标 crosshair 十字线形状. pointer 小手形状 ...
- in和not in
当子查询返回的列的值是多个值,那么就不能使用比较运算符(> < = !=),使用关键字in 语法: select …..from …..where 表达式 in (子查询) 常用in替换等 ...