• puppeteer UI自动化测试demo(一)


    一.简介

    这个不大常见,比较常见的是selenium和weddriver;

    所以就增加一个说明,来自官网的。


    Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行,但是可以通过修改配置文件运行“有头”模式。
    
    你可以在浏览器中手动执行的绝大多数操作都可以使用 Puppeteer 来完成! 下面是一些示例:
    
    生成页面 PDF。
    抓取 SPA(单页应用)并生成预渲染内容(即“SSR”(服务器端渲染))。
    自动提交表单,进行 UI 测试,键盘输入等。
    创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
    捕获网站的 timeline trace,用来帮助分析性能问题。
    测试浏览器扩展。

    二.安装

    1)node

    由上可知,该框架依赖于node,先安装node6+

    到该地址 :http://nodejs.cn/download/选择合适的版本进行安装;

    安装结束后(比如我是window),在cmd执行:node -v 

    以上说明安装成功了。

    2)puppeteer  

    同样来源于官网:

    安装
    在项目中使用 Puppeteer:
    npm i puppeteer
    # or "yarn add puppeteer"
    Note: 当你安装 Puppeteer 时,它会下载最新版本的Chromium(~170MB Mac,~282MB Linux,~280MB Win),以保证可以使用 API。 如果想要跳过下载,请阅读环境变量。
    puppeteer-core
    自 1.7.0 版本以来,我们都会发布一个 puppeteer-core 包,这个包默认不会下载 Chromium。
    npm i puppeteer-core
    # or "yarn add puppeteer-core"
    puppeteer-core 是一个的轻量级的 Puppeteer 版本,用于启动现有浏览器安装或连接到远程安装。
    具体见 puppeteer vs puppeteer-core.

    三.运行

    1)编写example.js脚本

    官网都是以默认Chromium执行,我这边以自带的chrome执行。脚本如下:

    const puppeteer = require('puppeteer');
    
    (async () => {
      const browser = await puppeteer.launch({executablePath:"C:UsersAdministratorAppDataLocalGoogleChromeApplicationchrome.exe"});
      const page = await browser.newPage();
      await page.goto('https://example.com');
      await page.screenshot({path: 'd:\example.png'});
      await browser.close();
    })();

    2)执行example.js

    执行命令:node example.js

    报错

    解决:将该js放置到node puppeteer模块的目录下再执行;

    四. 结果

    1)在D盘目录,产生example.png文件

    2)打开文件,为该url界面的截图

     五.缺点

    1)该工具是基于Chromium提供出的api,适合Chromium的接口,在chrome上执行未必成功;而我们客户一般是安装chrome,所以,就看涉及到的api了;

    附:

    官网地址:https://github.com/GoogleChrome/puppeteer

    api地址:https://zhaoqize.github.io/puppeteer-api-zh_CN/#/

  • 相关阅读:
    memcache概念浅谈及名称混乱之区分
    apache设置头
    Apache中关于页面缓存的设置
    memcahced&redis命令行cmd下的操作
    memcache命令行
    Memcached管理与监控
    memcache stats命令详解
    memcache基础知识-stats参数
    ab测试
    yum安装Apache,Mysql,PHP
  • 原文地址:https://www.cnblogs.com/VVsky/p/11065514.html
Copyright © 2020-2023  润新知