Skip to content

扩展ui测试工具puppeteer的方法,便于快速写测试示例

Notifications You must be signed in to change notification settings

laomu1988/puppeteer-extend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

puppeteer-extend

  • 扩展ui测试工具puppeteer的方法,便于快速写测试示例

代码结构

|-- readme.md           // 说明文档
|-- src                 // 源代码目录
    |-- client_extend   // 浏览器端执行函数,会绑定在window.$client对象上以供后续调用
    |-- pupp_extend     // puppeteer扩展函数
    |-- index.js        // 总入口
    |-- client_extend.js  // 汇总浏览器端函数
|-- test                // 测试代码目录
    |-- config.json     // 手动创建的config.json配置文件
    |-- config.js
    |-- login.js        // 登录aicp系统处理
    |-- cases           // 测试Case
    |-- result          // 每个测试Case执行后的截图
|-- package.json

依赖

  • node v8.0或以上版本
  • puppeteer 测试工具
  • chromium 测试示例执行环境
npm install # 正常安装
npm install --ignore-scripts # 不安装chromium,避免chromium下载失败问题,安装完之后需要手动下载https://download-chromium.appspot.com/并将Chromium.app放入项目根目录下
# 在test目录下创建config.json,配置host和用户信息后执行test,结构如下{host: "", user: {username: '', password: ''}}. 
# 登录host指定的系统,创建名称为auto-test的agent
npm run test
npm run test-debug # 带日志的调试输出
npm run test click # 执行单个测试case

示例

const puppeteer = require('puppeteer');
const extend = require('puppeteer-extend');
(async () => {
    const browser = await puppeteer.launch({
        // executablePath: path.join(__dirname, '../Chromium.app/Contents/MacOS/Chromium'), // 修改执行的Chromium路径
        headless: headless,
        ignoreHTTPSErrors: true,
        defaultViewport: {
            width: 1280,
            height: 900
        }
    });
    const page = extend(await broswer.newPage());
    await page.goto('https://www.baidu.com');
    await page.$click('百度一下');

    await page.$chain() // 开启链式操作
        .goto('https://www.baidu.com')
        $click('百度一下')
        .end(); // 结束链式操作
})();

api

  • $clearValue(target) 清空输入框内容
  • $click(target) 点击文字
  • $clickClosest(start, target) 点击附近目标
  • $getInputSelector(target) 取得目标附近的输入框的选择器
  • $css(target) 取得文字所在dom的css选择器
  • $hash(hash) 修改页面hash值
  • $has(target) 判断页面是否包含目标元素
  • $hover(target) hover指定元素
  • $hoverClosest(target) hover指定元素
  • $moveTo(target) 移动鼠标到target目标位置
  • $pause(timeout) 暂停一段时间,单位ms
  • $refresh() 刷新页面
  • $setFieldValue(label, value) 设置表单的值,支持输入框、下拉菜单
  • $setFrom(form) 输入表单内容,例如{"标题": "标题内容", "备注": "备注内容"}
  • $setValue(label, value) 输入内容
  • $waitForAny(target1, target2) 等待任一目标出现
  • $waitFor(target, timeout) 等待目标出现
  • $waitForNot(target) 等待目标消失
  • $waitForNotLabel(target) 等待表单标签文字消失
  • $waitForLabel(target) 等待表单标签文字(和$waitFor区别是$waitForLabel可以查询到target:target:
  • $chain() 返回链式操作,最终需要调用end方法终止链操作
  • $nextWindow() 切换到下一个窗口页面
  • $prevWindow() 切换到上一个窗口页面

注意:其中target可以是文字内容或者css选择器。当是文字内容时,会去除空格后和dom节点文字内容剔除空格后内容比较,只有完全相同才认为是目标节点。

About

扩展ui测试工具puppeteer的方法,便于快速写测试示例

Resources

Stars

Watchers

Forks

Packages

No packages published