• 2019.4.10 初识puppeteer


    注:原地址:https://www.cnblogs.com/paris-test/p/9705075.html

    一、Puppeteer 介绍

    Puppeteer 翻译是操纵木偶的人,利用这个工具,我们能做一个操纵页面的人。Puppeteer是一个Nodejs的库,支持调用Chrome的API来操纵Web,相比较Selenium或是PhantomJs,它最大的特点就是它的操作Dom可以完全在内存中进行模拟既在V8引擎中处理而不打开浏览器,而且关键是这个是Chrome团队在维护,会拥有更好的兼容性和前景。

    二、Puppeteer 用处

    • 利用网页生成PDF、图片
    • 爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染)
    • 可以从网站抓取内容
    • 自动化表单提交、UI测试、键盘输入等
    • 帮你创建一个最新的自动化测试环境(chrome),可以直接在此运行测试用例6.捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题

    三、puppeteer环境准备

    1、Puppeteer环境要求

    1.1、Puppeteer要求node版本不低于v6.4.0,但是async/await只在Node v7.6.0或更高的版本支持。

    1.2、需要最近版本的Chromium浏览器

    2、Puppeteer环境准备

    1.Node.js 安装配置

    2.Puppeteer安装

    通过npm安装:npm install puppeteer --save

    由于封网,直接下载 Chromium 会失败,可以先阻止下载 Chromium 然后再手动下载它

    # 安装命令
    npm i puppeteer --save
    
    # 错误信息
    ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
    
    # 设置环境变量跳过下载 Chromium
    set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 
    
    # 或者可以这样干,只下载模块而不build
    npm i --save puppeteer --ignore-scripts
    
    # 成功安装模块
    + puppeteer@0.13.0
    added 1 package in 1.77s

    手动下载 Chromium,下载完后将压缩包解压,会有个 Chromium.app,将其放在你喜欢的目录下,例如 /Users/huqiyang/Documents/project/z/chromium/Chromium.app。正常安装包后 Chromium.app 会在 .local-chromium

    Tip:下载 Chromium 失败解决办法

    • 更换国内Chromium
    PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org
    npm i puppeteer
    
    • 或者用 cnpm 安装
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm i puppeteer

    2、jest环境

    安装 Jest:npm install --save-dev jest

    四、puppeteer自动化初试

    初试 Puppeteer,截个图吧

    知识点

    • puppeteer.launch 启动浏览器实例
    • browser.newPage() 创建一个新页面
    • page.goto 进入指定网页
    • page.screenshot 截图
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    const puppeteer = require('puppeteer');
     
    (async () => {
      const browser = await (puppeteer.launch({
        // 若是手动下载的chromium需要指定chromium地址, 默认引用地址为 /项目目录/node_modules/puppeteer/.local-chromium/
        executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium',
        //设置超时时间
        timeout: 15000,
        //如果是访问https页面 此属性会忽略https错误
        ignoreHTTPSErrors: true,
        // 打开开发者工具, 当此值为true时, headless总为false
        devtools: false,
        // 关闭headless模式, 不会打开浏览器
        headless: false
      }));
      const page = await browser.newPage();
      await page.goto('https://www.jianshu.com/u/40909ea33e50');
      await page.screenshot({
        path: 'jianshu.png',
        type: 'png',
        // quality: 100, 只对jpg有效
        fullPage: true,
        // 指定区域截图,clip和fullPage两者只能设置一个
        // clip: {
        //   x: 0,
        //   y: 0,
        //   1000,
        //   height: 40
        // }
      });
      browser.close();
    })();
  • 相关阅读:
    JS中数组的排序
    JS中输入身份证号码,subString截取出生日,并判断性别
    JS中for循环输出三角形
    JS中for循环实现s=x^y。
    JS中用for实现n的阶乘
    JS实现:for循环输出1000以内水仙花数
    JS中用if..else 查询成绩
    JS——do...while循环输出斐波拉契数前20项
    JS中while循环 ,二分法,产生随机数,计算机猜几次能猜中
    2018年5月9日JAVA-servlet01
  • 原文地址:https://www.cnblogs.com/Django-shao/p/10686085.html
Copyright © 2020-2023  润新知