精华内容
下载资源
问答
  • Puppeteer

    2020-06-27 22:51:05
    Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包,用来模拟 Chrome 浏览器的运行。 Puppeteer 是什么 Puppeteer 是 Node.js 工具引擎 Puppeteer 提供了一系列 API,通过 Chrome DevTools Protocol ...

    Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包,用来模拟 Chrome 浏览器的运行。

    Puppeteer 是什么

    Puppeteer 是 Node.js 工具引擎
    Puppeteer 提供了一系列 API,通过 Chrome DevTools Protocol 协议控制 Chromium/Chrome 浏览器的行为
    Puppeteer 默认情况下是以 headless 启动 Chrome 的,也可以通过参数控制启动有界面的 Chrome
    Puppeteer 默认绑定最新的 Chromium 版本,也可以自己设置不同版本的绑定
    Puppeteer 让我们不需要了解太多的底层 CDP 协议实现与浏览器的通信

    Puppeteer 能做什么

    官方称:“Most things that you can do manually in the browser can be done using Puppeteer”,那么具体可以做些什么呢?

    网页截图或者生成 PDF
    爬取 SPA 或 SSR 网站
    UI 自动化测试,模拟表单提交,键盘输入,点击等行为
    捕获网站的时间线,帮助诊断性能问题
    创建一个最新的自动化测试环境,使用最新的 js 和最新的 Chrome 浏览器运行测试用例
    测试 Chrome 扩展程序

    Puppeteer API 分层结构

    Puppeteer 中的 API 分层结构基本和浏览器保持一致,下面对常使用到的几个类介绍一下:
    Browser: 对应一个浏览器实例,一个 Browser 可以包含多个 BrowserContext
    BrowserContext: 对应浏览器一个上下文会话,就像我们打开一个普通的 Chrome 之后又打开一个隐身模式的浏览器一样,BrowserContext 具有独立的 Session(cookie 和 cache 独立不共享),一个 BrowserContext 可以包含多个 Page
    Page:表示一个 Tab 页面,通过 browserContext.newPage()/browser.newPage() 创建,browser.newPage() 创建页面时会使用默认的 BrowserContext,一个 Page 可以包含多个 Frame
    Frame: 一个框架,每个页面有一个主框架(page.MainFrame()),也可以多个子框架,主要由 iframe 标签创建产生的
    ExecutionContext: 是 javascript 的执行环境,每一个 Frame 都一个默认的 javascript 执行环境
    ElementHandle: 对应 DOM 的一个元素节点,通过该该实例可以实现对元素的点击,填写表单等行为,我们可以通过选择器,xPath 等来获取对应的元素
    JsHandle:对应 DOM 中的 javascript 对象,ElementHandle 继承于 JsHandle,由于我们无法直接操作 DOM 中对象,所以封装成 JsHandle 来实现相关功能
    CDPSession:可以直接与原生的 CDP 进行通信,通过 session.send 函数直接发消息,通过 session.on 接收消息,可以实现 Puppeteer API 中没有涉及的功能
    Coverage:获取 JavaScript 和 CSS 代码覆盖率
    Tracing:抓取性能数据进行分析
    Response: 页面收到的响应
    Request: 页面发出的请求
    如何创建一个 Browser 实例
    puppeteer 提供了两种方法用于创建一个 Browser 实例:

    puppeteer.connect: 连接一个已经存在的 Chrome 实例
    puppeteer.launch: 每次都启动一个 Chrome 实例

    const puppeteer = require('puppeteer');
    let request = require('request-promise-native');
    
    //使用 puppeteer.launch 启动 Chrome
    (async () => {
        const browser = await puppeteer.launch({
            headless: false,   //有浏览器界面启动
            slowMo: 100,       //放慢浏览器执行速度,方便测试观察
            args: [            //启动 Chrome 的参数,详见上文中的介绍
                '–no-sandbox',
                '--window-size=1280,960'
            ],
        });
        const page = await browser.newPage();
        await page.goto('https://www.baidu.com');
        await page.close();
        await browser.close();
    })();
    
    //使用 puppeteer.connect 连接一个已经存在的 Chrome 实例
    (async () => {
        //通过 9222 端口的 http 接口获取对应的 websocketUrl
        let version = await request({
            uri:  "http://127.0.0.1:9222/json/version",
            json: true
        });
        //直接连接已经存在的 Chrome
        let browser = await puppeteer.connect({
            browserWSEndpoint: version.webSocketDebuggerUrl
        });
        const page = await browser.newPage();
        await page.goto('https://www.baidu.com');
        await page.close();
        await browser.disconnect();
    })();
    

    这两种方式的对比:

    puppeteer.launch 每次都要重新启动一个 Chrome 进程,启动平均耗时 100 到 150 ms,性能欠佳
    puppeteer.connect 可以实现对于同一个 Chrome 实例的共用,减少启动关闭浏览器的时间消耗
    puppeteer.launch 启动时参数可以动态修改
    通过 puppeteer.connect 我们可以远程连接一个 Chrome 实例,部署在不同的机器上
    puppeteer.connect 多个页面共用一个 chrome 实例,偶尔会出现 Page Crash 现象,需要进行并发控制,并定时重启 Chrome 实例

    如何等待加载?

    在实践中我们经常会遇到如何判断一个页面加载完成了,什么时机去截图,什么时机去点击某个按钮等问题,那我们到底如何去等待加载呢?

    下面我们把等待加载的 API 分为三类进行介绍:

    加载导航页面

    page.goto:打开新页面
    page.goBack :回退到上一个页面
    page.goForward :前进到下一个页面
    page.reload :重新加载页面
    page.waitForNavigation:等待页面跳转
    Pupeeteer 中的基本上所有的操作都是异步的,以上几个 API 都涉及到关于打开一个页面,什么情况下才能判断这个函数执行完毕呢,这些函数都提供了两个参数 waitUtil 和 timeout,waitUtil 表示直到什么出现就算执行完毕,timeout 表示如果超过这个时间还没有结束就抛出异常。

    await page.goto('https://www.baidu.com', {
       timeout: 30 * 1000,
       waitUntil: [
           'load',              //等待 “load” 事件触发
           'domcontentloaded',  //等待 “domcontentloaded” 事件触发
           'networkidle0',      //在 500ms 内没有任何网络连接
           'networkidle2'       //在 500ms 内网络连接个数不超过 2 个
       ]
    });
    

    以上 waitUtil 有四个事件,业务可以根据需求来设置其中一个或者多个触发才以为结束,networkidle0 和 networkidle2 中的 500ms 对时间性能要求高的用户来说,还是有点长的

    等待元素、请求、响应
    page.waitForXPath:等待 xPath 对应的元素出现,返回对应的 ElementHandle 实例
    page.waitForSelector :等待选择器对应的元素出现,返回对应的 ElementHandle 实例
    page.waitForResponse :等待某个响应结束,返回 Response 实例
    page.waitForRequest:等待某个请求出现,返回 Request 实例
    await page.waitForXPath(’//img’);
    await page.waitForSelector(’#uniqueId’);
    await page.waitForResponse(‘https://d.youdata.netease.com/api/dash/hello’);
    await page.waitForRequest(‘https://d.youdata.netease.com/api/dash/hello’);
    自定义等待
    如果上面提供的等待方式都不能满足我们的需求,puppeteer 还提供我们提供两个函数:

    page.waitForFunction:等待在页面中自定义函数的执行结果,返回 JsHandle 实例
    page.waitFor:设置等待时间,实在没办法的做法
    await page.goto(url, { 
        timeout: 120000, 
        waitUntil: 'networkidle2' 
    });
    //我们可以在页面中定义自己认为加载完的事件,在合适的时间点我们将该事件设置为 true
    //以下是我们项目在触发截图时的判断逻辑,如果 renderdone 出现且为 true 那么就截图,如果是 Object,说明页面加载出错了,我们可以捕获该异常进行提示
    let renderdoneHandle = await page.waitForFunction('window.renderdone', {
        polling: 120
    });
    const renderdone = await renderdoneHandle.jsonValue();
    if (typeof renderdone === 'object') {
        console.log(`加载页面失败:报表${renderdone.componentId}出错 -- ${renderdone.message}`);
    }else{
        console.log('页面加载成功');
    }
    
    展开全文
  • puppeteer

    2019-10-24 14:39:44
    本文为使用puppeteer进行自动化测试的实践总结,持续更新。 puppeteer用途 网页截图或者生成 PDF 爬取 SPA 或 SSR 网站 UI 自动化测试,模拟表单提交,键盘输入,点击等行为 捕获网站的时间线,帮助诊断...

    本文为使用puppeteer进行自动化测试的实践总结,持续更新。

    puppeteer用途

    • 网页截图或者生成 PDF
    • 爬取 SPA 或 SSR 网站
    • UI 自动化测试,模拟表单提交,键盘输入,点击等行为
    • 捕获网站的时间线,帮助诊断性能问题
    • 创建一个最新的自动化测试环境,使用最新的 js 和最新的 Chrome 浏览器运行测试用例
    • 测试 Chrome 扩展程序

    常见用法

    1. 非无头模式、全屏

      puppeteer.launch({
          headless:false, //非无头模式
          defaultViewport:null, //页面窗口随浏览器大小展示 或者 defaultViewport:{width:0,height:0}
          args: [
              '--start-fullscreen' //浏览器全屏
          ]
      })
      

      如果是使用puppeteer-core指定本地chrome浏览器,可能会使用到puppeteer.connect(options)去连接本地的Chromium。这个时候不仅需要在launch里面配置defaultViewpot还需要在connectoptions中配置一下defaultViewport。否则任然会以默认的width:800,height:600打开

    2. 等待指定的选择器匹配的元素出现在页面中

      page.waitForSelector(selector[, options])
      
    3. 点击某个元素

      page.click(selector)
      
    4. 点击某个表单元素并输入

      //将options设为{delay:20},输入时会延迟20ms,更有feel哦
      page.type(selector, text[, options])
      

      注意:type是在表单元素后面追加内容。不会覆盖原有的表单值。
      需要清空,重新输入。可以使用page.$eval(selector,el=>{el.value='';el.click()})

    5. 获取页面元素

      page.$(selector) //类似document.querySelector
      page.$$(selector) //类似document.querySelectorAll
      
    6. 打开某个页面

      page.goto(url[, options])
      
    7. 当点击某个会引起跳转跳转的元素时

      await Promise.all([
              page.waitForNavigation(),
              page.click(selector)
          ])
      
    8. 监听浏览器打开新的页面

      browser.on('targetcreated',async target =>{
              const page = await target.page()
          })
      
    9. 关闭浏览器

      browser.close()
      
    10. 执行某段js代码

      page.evaluate(()=>{
          //js代码
      })
      
    11. 请求拦截

      • page.on(‘request’,request=>{}) 请求触发

      • page.on(‘requestfailed’,request=>{}) 请求失败触发

      • page.on(‘requestfinished’,request=>{}) 请求完成触发

      • page.on(‘response’,response=>{}) 请求返回response时触发

      • requset对象

        • requset.respond() 完成请求后会返回一个响应
        • request.continue() 继续请求
        • response.abort() 中断请求

        以上都需要开启page.setRequestInterception(true)来开启拦截

      • response对象

    参考

    1. git example
    2. 结合项目来谈谈 Puppeteer
    3. puppeteer中文文档
    4. puppeteer英文文档
    5. 在线测试
    6. puppeteer官网
    展开全文
  • Puppeteer API | FAQ | Contributing | Troubleshooting Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs ...
  • Puppeteer VS Puppeteer-core

    2019-06-13 15:41:00
    从v1.7.0以后每个版本发布两个包: puppeteer puppeteer-core ...puppeteer可支持一堆方便的PUPPETEER_ * env变量来调整其行为。 puppeteer-core是一个驱动任何支持DevTools协议的库。puppeteer-core在安...

    从v1.7.0以后每个版本发布两个包:

    1. puppeteer
    2. puppeteer-core

    puppeteer是一款用于浏览器自动化的产品。安装后会下载Chromium,用puppeteer-core来驱动。puppeteer可支持一堆方便的PUPPETEER_ * env变量来调整其行为。

    puppeteer-core是一个驱动任何支持DevTools协议的库。puppeteer-core在安装时不会下载Chromium。作为一个库,puppeteer-core完全通过其编程接口驱动,并忽略所有PUPPETEER_ * env变量。

    puppeteer-core和puppeteer之间的区别可归结为以下两点:

    1. puppeteer-core在安装时不会自动下载Chromium。
    2. puppeteer-core忽略所有PUPPETEER_ * env变量。

    在多数情况下可以使用puppeteer。
    在以下情况下应该使用puppeteer-core:

    1. 构建基于DevTools协议的产品或库。例如,可以使用puppeteer-core构建PDF生成器并编写自定义install.js脚本,该脚本下载headless_shell而不是Chromium以节省磁盘空间。
    2. 你正在捆绑Puppeteer以在Chrome Extension /浏览器中使用DevTools协议,因为下载额外的Chromium二进制文件是不必要的。

    使用puppeteer-core时,需更改以下代码:

    const puppeteer = require('puppeteer-core');

    转载于:https://www.cnblogs.com/iwangwei/p/11016853.html

    展开全文
  • Puppeteer support

    2020-11-27 16:58:38
    <div><p><a href="https://github.com/GoogleChrome/puppeteer">Puppeteer</a> provides a Node API to drive a Chrome headless browser. This allows you to programmatically visit sites, take screenshots, and...
  • Support Puppeteer

    2021-01-04 00:11:01
    <p>Matchers that work when running tests in Puppeteer. <h3>Suggested implementation: <p>Puppeteer methods return ;Puppeteer&version=v2.0.0&show=api-class-elementhandle">ElementHandles...
  • Update puppeteer

    2020-12-01 12:31:19
    <div><p>puppeteer 0.13 has support for the <code>PUPPETEER_DOWNLOAD_HOST configuration, this is useful for people behind proxy. <p>Would be nice with a new <code>1.1.3</code> version of penthouse.</p>...
  • | <a href="https://togithub.com/puppeteer/puppeteer">puppeteer</a> | devDependencies | major | <a href="https://renovatebot.com/diffs/npm/puppeteer/2.1.1/5.4.0"><code>2.1.1</code> -> <code>5.4.0...
  • Puppeteer fix

    2020-12-26 01:15:28
    <div><p>Fix for puppeteer</p><p>该提问来源于开源项目:OriginProtocol/origin</p></div>
  • Use Puppeteer

    2020-12-05 15:58:13
    <div><p>Adding https://github.com/GoogleChrome/puppeteer as a target (easily installable via npm) should make this work out-of-the-box in most dev and CI platforms.</p><p>该提问来源于开源项目:...
  • <div><p>In the <code>israeli-bank-scrapers-core</code> package, in the <code>next</code> version (<code>0.9.2-dev.83c4b6641), there are imports of types from <code>puppeteer</code> instead of <code>...
  • puppeteer入门Browser developer tools provide an amazing array of options for delving under the hood of websites and web apps. These capabilities can be further enhanced and automated by third-party ...

    puppeteer入门

    Browser developer tools provide an amazing array of options for delving under the hood of websites and web apps. These capabilities can be further enhanced and automated by third-party tools. In this article, we’ll look at Puppeteer, a Node-based library for use with Chrome/Chromium.

    浏览器开发人员工具为网站和Web应用程序的底层提供了许多惊人的选择。 这些功能可以通过第三方工具进一步增强和自动化。 在本文中,我们将研究Puppeteer ,这是一个用于Chrome / Chromium的基于节点的库。

    The puppeteer website describes Puppeteer as

    人偶网站将人偶描述为

    a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

    一个Node库,它提供了高级API来通过DevTools协议控制Chrome或Chromium。 Puppeteer默认情况下无头运行,但可以配置为运行完整(无头)的Chrome或Chromium。

    Puppeteer is made by the team behind Google Chrome, so you can be pretty sure it will be well maintained. It lets us perform common actions on the Chromium browser, programmatically through JavaScript, via a simple and easy-to-use API.

    Puppeteer由Google Chrome背后的团队开发,因此您可以肯定它将得到很好的维护。 它使我们能够通过一个简单易用的API,通过JavaScript以编程方式在Chromium浏览器上执行常见操作。

    With Puppeteer, you can:

    使用Puppeteer,您可以:

    • scrape websites

      抓取网站
    • generate screenshots of websites including SVG and Canvas

      生成包括SVG和Canvas的网站的屏幕截图
    • create PDFs of websites

      创建网站PDF
    • crawl an SPA (single-page application)

      搜寻SPA(单页应用程序)
    • access web pages and extract information using the standard DOM API

      使用标准DOM API访问网页并提取信息
    • generate pre-rendered content — that is, server-side rendering

      生成预渲染的内容-即服务器端渲染
    • automate form submission

      自动提交表单
    • automate performance analysis

      自动化性能分析
    • automate UI testing like Cypress

      Cypress一样自动化UI测试

    • test chrome extensions

      测试chrome扩展

    Puppeteer does nothing new that Selenium, PhantomJS (which is now deprecated), and the like do, but it provides a simple and easy-to-use API and provides a great abstraction so we don’t have to worry about the nitty-gritty details when dealing with it.

    Puppeteer并没有SeleniumPhantomJS (现已不推荐使用)之类的东西做任何新的事情,但是它提供了一个简单易用的API并提供了很好的抽象性,因此我们不必担心问题的实质。处理它的细节。

    It’s also actively maintained so we get all the new features of ECMAScript as Chromium supports it.

    它也得到了积极的维护,因此Chromium支持ECMAScript的所有新功能。

    先决条件 (Prerequisites)

    For this tutorial, you need a basic knowledge of JavaScript, ES6+ and Node.js.

    对于本教程,您需要JavaScript,ES6 +和Node.js的基础知识。

    You must also have installed the latest version of Node.js.

    您还必须安装了最新版本的Node.js。

    We’ll be using yarn throughout this tutorial. If you don’t have yarn already installed, install it from here.

    在整个教程中,我们将使用yarn 。 如果尚未安装yarn ,请从此处安装。

    To make sure we’re on the same page, these are the versions used in this tutorial:

    为了确保我们在同一页面上,这些是本教程中使用的版本:

    • Node 12.12.0

      节点12.12.0
    • yarn 1.19.1

      纱1.19.1
    • puppeteer 2.0.0

      up 2.0.0

    安装 (Installation)

    To use Puppeteer in your project, run the following command in the terminal:

    要在项目中使用Puppeteer,请在终端中运行以下命令:

    $ yarn add puppeteer

    Note: when you install Puppeteer, it downloads a recent version of Chromium (~170MB macOS, ~282MB Linux, ~280MB Win) that is guaranteed to work with the API. To skip the download, see Environment variables.

    注意:安装Puppeteer时,它会下载保证可以使用该API的Chromium的最新版本(〜170MB macOS,〜282MB Linux,〜280MB Win)。 要跳过下载,请参阅环境变量

    If you don’t need to download Chromium, then you can install puppeteer-core:

    如果您不需要下载Chromium,则可以安装puppeteer-core

    $ yarn add puppeteer-core

    puppeteer-core is intended to be a lightweight version of Puppeteer for launching an existing browser installation or for connecting to a remote one. Be sure that the version of puppeteer-core you install is compatible with the browser you intend to connect to.

    puppeteer-core旨在作为Puppeteer的轻量级版本,用于启动现有的浏览器安装或用于连接到远程浏览器。 确保您安装的puppeteer-core版本与您打算连接的浏览器兼容。

    Note: puppeteer-core is only published from version 1.7.0.

    注意: puppeteer-core仅从1.7.0版发布。

    用法 (Usage)

    Puppeteer requires at least Node v6.4.0, but we’re going to use async/await, which is only supported in Node v7.6.0 or greater, so make sure to update your Node.js to the latest version to get all the goodies.

    Puppeteer至少需要Node v6.4.0,但是我们将使用async / await,只有Node v7.6.0或更高版本才支持,因此请确保将Node.js更新到最新版本以获取所有好处。 。

    Let’s dive into some practical examples using Puppeteer. In this tutorial, we’ll be:

    让我们深入研究使用Puppeteer的一些实际示例。 在本教程中,我们将是:

    1. generating a screenshot of Unsplash using Puppeteer

      使用Puppeteer生成Unsplash的屏幕截图
    2. creating a PDF of Hacker News using Puppeteer

      使用Puppeteer创建黑客新闻PDF
    3. signing in to Facebook using Puppeteer

      使用Puppeteer登录Facebook

    1.使用Puppeteer生成Unsplash的屏幕截图 (1. Generate a Screenshot of Unsplash using Puppeteer)

    It’s really easy to do this with Puppeteer. Go ahead and create a screenshot.js file in the root of your project. Then paste in the following code:

    使用Puppeteer做到这一点真的很容易。 继续,在项目的根目录中创建一个screenshot.js文件。 然后粘贴以下代码:

    const puppeteer = require('puppeteer')
    
    const main = async () => {
      const browser = await puppeteer.launch()
      const page = await browser.newPage()
      await page.goto('https://unsplash.com')
      await page.screenshot({ path: 'unsplash.png' })
    
      await browser.close()
    }
    
    main()

    Firstly, we require the puppeteer package. Then we call the launch method on it that initializes the instance. This method is asynchronous as it returns a Promise. So we await for it to get the browser instance.

    首先,我们需要puppeteer程序包。 然后,我们在其上调用launch方法以初始化实例。 此方法是异步的,因为它返回Promise 。 因此,我们await它获取browser实例。

    Then we call newPage on it and go to Unsplash and take a screenshot of it and save the screenshot as unsplash.png.

    然后我们在其上调用newPage并转到Unsplash并对其进行截图,并将其保存为unsplash.png

    Now go ahead and run the above code in the terminal by typing:

    现在继续输入以下内容在终端中运行以上代码:

    $ node screenshot
    Unsplash - 800px x 600px resolution

    Now after 5–10 seconds you’ll see an unsplash.png file in your project that contains the screenshot of Unsplash. Notice that the viewport is set to 800px x 600px as Puppeteer sets this as the initial page size, which defines the screenshot size. The page size can be customized with Page.setViewport().

    现在,5-10秒后,你会看到一个unsplash.png在项目中包含Unsplash截图文件。 请注意,视口设置为800px x 600px,因为Puppeteer将此视口设置为初始页面尺寸,该尺寸定义了屏幕截图尺寸。 可以使用Page.setViewport()自定义页面大小。

    Let’s change the viewport to be 1920px x 1080px. Insert the following code before the goto method:

    让我们将视口更改为1920px x 1080px。 在goto方法之前插入以下代码:

    await page.setViewport({
      width: 1920,
      height: 1080,
      deviceScaleFactor: 1,
    })

    Now go ahead and also change the filename from unsplash.png to unsplash2.png in the screenshot method like so:

    现在,继续在screenshot方法中将文件名从unsplash.png更改为unsplash2.png ,如下所示:

    await page.screenshot({ path: 'unsplash2.png' })

    The whole screenshot.js file should now look like this:

    现在,整个screenshot.js文件应如下所示:

    const puppeteer = require('puppeteer')
    
    const main = async () => {
      const browser = await puppeteer.launch()
      const page = await browser.newPage()
      await page.setViewport({
        width: 1920,
        height: 1080,
        deviceScaleFactor: 1,
      })
      await page.goto('https://unsplash.com')
      await page.screenshot({ path: 'unsplash2.png' })
    
      await browser.close()
    }
    
    main()
    Unsplash - 1920px x 1080px

    2.使用Puppeteer创建Hacker News的PDF (2. Create PDF of Hacker News using Puppeteer)

    Now create a file named pdf.js and paste the following code into it:

    现在创建一个名为pdf.js的文件,并将以下代码粘贴到其中:

    const puppeteer = require('puppeteer')
    
    const main = async () => {
      const browser = await puppeteer.launch()
      const page = await browser.newPage()
      await page.goto('https://news.ycombinator.com', { waitUntil: 'networkidle2' })
      await page.pdf({ path: 'hn.pdf', format: 'A4' })
    
      await browser.close()
    }
    
    main()

    We’ve only changed two lines from the screenshot code.

    我们仅从screenshot代码中更改了两行。

    Firstly, we’ve replaced the URL with Hacker News and then added networkidle2:

    首先,我们用Hacker News替换了URL,然后添加了networkidle2

    await page.goto('https://news.ycombinator.com', { waitUntil: 'networkidle2' })

    networkidle2 comes in handy for pages that do long polling or any other side activity and considers navigation to be finished when there are no more than two network connections for at least 500ms.

    对于进行长时间轮询或任何其他附带活动的页面, networkidle2非常有用,并且当至少两个网络连接持续至少500毫秒时,认为导航已完成。

    Then we called the pdf method to create a PDf and called it hn.pdf and we formatted it to be A4 size:

    然后,我们调用pdf方法来创建PDf,并将其命名为hn.pdf并将其格式化为A4大小:

    await page.pdf({ path: 'hn.pdf', format: 'A4' })

    That’s it. We can now run the file to generate a PDF of Hacker News. Let’s go ahead and run the following command in the terminal:

    而已。 现在,我们可以运行该文件来生成Hacker News的PDF。 让我们继续在终端中运行以下命令:

    $ node pdf

    This will generate a PDF file called hn.pdf in the root directory of the project in A4 size.

    这将在项目的根目录中以A4大小生成一个名为hn.pdf的PDF文件。

    3.使用Puppeteer登录到Facebook (3. Sign In to Facebook Using Puppeteer)

    Create a new file called signin.js with the following code:

    使用以下代码创建一个名为signin.js的新文件:

    const puppeteer = require('puppeteer')
    
    const SECRET_EMAIL = 'example@gmail.com'
    const SECRET_PASSWORD = 'secretpass123'
    
    const main = async () => {
      const browser = await puppeteer.launch({
        headless: false,
      })
      const page = await browser.newPage()
      await page.goto('https://facebook.com', { waitUntil: 'networkidle2' })
      await page.waitForSelector('#login_form')
      await page.type('input#email', SECRET_EMAIL)
      await page.type('input#pass', SECRET_PASSWORD)
      await page.click('#loginbutton')
      // await browser.close()
    }
    
    main()

    We’ve created two variables, SECRET_EMAIL and SECRET_PASSWORD, which should be replaced by your email and password of Facebook.

    我们创建了两个变量SECRET_EMAILSECRET_PASSWORD ,应将其替换为您的Facebook电子邮件和密码。

    We then launch the browser and set headless mode to false to launch a full version of Chromium browser.

    然后,我们launch浏览器并将headless模式设置为false以启动完整版的Chromium浏览器。

    Then we go to Facebook and wait until everything is loaded.

    然后,我们转到Facebook ,等待所有内容加载完毕。

    On Facebook, there’s a #login_form selector that can be accessed via DevTools. This selector contains the login form, so we wait for it using waitForSelector method.

    在Facebook上,有一个#login_form选择器,可以通过DevTools进行访问。 该选择器包含登录表单,因此我们使用waitForSelector方法等待它。

    Then we have to type our email and password, so we grab the selectors input#email and input#pass from DevTools and pass in our SECRET_EMAIL and SECRET_PASSWORD.

    然后,我们必须输入我们的emailpassword ,以便从DevTools获取选择器input#emailinput#pass ,并传入SECRET_EMAILSECRET_PASSWORD

    After that, we click the #loginbutton to log in to Facebook.

    之后,我们单击#loginbutton按钮登录Facebook。

    The last line is commented out so that we see the whole process of typing email and password and clicking the login button.

    最后一行被注释掉,以便我们看到键入emailpassword并单击登录按钮的整个过程。

    Go ahead and run the code by typing the following in the terminal:

    在终端中键入以下内容,继续运行代码:

    $ node signin

    This will launch a whole Chromium browser and then log in to Facebook.

    这将启动整个Chromium浏览器,然后登录Facebook。

    结论 (Conclusion)

    In this tutorial, we made a project that creates a screenshot of any given page within a specified viewport. We also built a project where we can create a PDF of any website. We then programmatically managed to sign in to Facebook.

    在本教程中,我们创建了一个项目,该项目创建指定视口内任何给定页面的屏幕截图。 我们还建立了一个项目,可以在其中创建任何网站的PDF。 然后,我们以编程方式设法登录了Facebook。

    Puppeteer recently released version 2, and it’s a nice piece of software to automate trivial tasks with a simple and easy-to-use API.

    Puppeteer最近发布了版本2,它是一个很好的软件,可以通过简单易用的API自动执行琐碎的任务。

    You can learn more about Puppeteer on its official website. The docs are very good, with tons of examples, and everything is well documented.

    您可以在其官方网站上了解有关Puppeteer的更多信息。 这些文档非常好,有大量示例,并且所有文档都记录在案。

    Now go ahead and automate boring tasks in your day-to-day life with Puppeteer.

    现在,使用Puppeteer在您的日常生活中自动执行无聊的任务。

    翻译自: https://www.sitepoint.com/getting-started-with-puppeteer/

    puppeteer入门

    展开全文
  • [connector] Puppeteer

    2021-01-08 02:30:48
    <p>Using <code>Puppeteer</code> will unlock requests like <a href="#421">custom actions</a> more easily and with ergonomics that developers already know. <h2>Details <p>This section contains a list of...
  • puppeteer安装

    2019-07-22 18:21:04
    1.直接使用国内的puppeteer-cn,npm install --save puppeteer-cn
  • puppeteer调研

    2020-01-19 17:15:54
    Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行,但是可以通过修改配置文件运行“有头”模式。 http://www.puppeteerjs.com/ ...
  • Puppeteer简介

    2019-06-03 19:33:00
    puppeteer常用API https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md Puppeteer是一个node库,他提供了一组用来操纵Chrome的API(默认headless也就是无UI的chrome,也可以配置为有UI) ...
  • Added Puppeteer

    2020-12-01 00:48:38
    <p>Puppeteer is a popular library with many repositories, having it's topic description would be good. <p><strong>Please note: we will close your PR without comment if you do not check the boxes...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,097
精华内容 1,638
关键字:

puppeteer