官网

https://pptr.dev/

api 与 教程:

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
https://pptr.dev/#?product=Puppeteer&version=v1.6.0&show=api-class-puppeteer

第三方教程:

https://www.jianshu.com/p/2f04f9d665ce
https://jeffjade.com/2017/12/17/134-kinds-of-toss-using-puppeteer/
https://segmentfault.com/a/1190000010736797

安装

$ npm init -y && npm i puppeteer

Dmoe1: 无头浏览器也可以可视化,方便调试

const puppeteer = require('puppeteer')

// https://pptr.dev/#?product=Puppeteer&version=v1.6.0&show=api-class-page
puppeteer.launch({
headless: false //要看演示可以使用false
}).then(async browser => {
const page = await browser.newPage();
await page.goto('https://www.baidu.com/');
await page.type('#kw', '贝尔塔猫');
await page.click('#su');
await browser.close();
})

Demo1: 打开百度并且截图

const puppeteer = require('puppeteer');

// https://pptr.dev/#?product=Puppeteer&version=v1.6.0&show=api-class-page
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.goto('https://www.baidu.com');
await page.screenshot({path: 'screenshot.png'});
await browser.close();
});

Demo2: 输入内容,点击按钮

const puppeteer = require('puppeteer')

// https://pptr.dev/#?product=Puppeteer&version=v1.6.0&show=api-class-page
puppeteer.launch().then(async browser => {
const page = await browser.newPage()
await page.goto('https://www.baidu.com/')
await page.type('#kw', '贝尔塔猫')
await page.click('#su')
await page.waitFor(1000)
await page.screenshot({path: 'screenshot.png'});
await browser.close()
})

Demo3:通过往浏览器注入原生js,然后返回内容给Nodejs

请注意,不要尝试返回dom对象给nodejs,即时你返回了也无法正常调用DOM的属性和方法!!!。

const puppeteer = require('puppeteer')

// https://pptr.dev/#?product=Puppeteer&version=v1.6.0&show=api-class-page
puppeteer.launch().then(async browser => {
const page = await browser.newPage()
await page.goto('https://www.baidu.com/')
await page.type('#kw', '贝尔塔猫')
await page.click('#su')
await page.waitFor(1000)
await page.screenshot({path: 'screenshot.png'});
const list = await page.evaluate(() => {
return [...document.querySelectorAll('#content_left .result')].map(function (e, i) {
return e.textContent
})
})
console.log(20180714211647, list);
await browser.close()
})

Demo5: 监听Console

const puppeteer = require('puppeteer')

// https://pptr.dev/#?product=Puppeteer&version=v1.6.0&show=api-class-page
puppeteer.launch().then(async browser => {
const page = await browser.newPage()
page.on('console', msg => {
for (let i = 0; i < msg.args().length; ++i)
console.log(`${i}: ${msg.args()[i]}`);
});
await page.goto('https://www.baidu.com/')
await browser.close()
})

puppeteer (Nodejs版selenium )快速入门的更多相关文章

  1. 元素(WebElement)-----Selenium快速入门(三)

    上一篇<元素定位-----Selenium快速入门(二)>说了,如何定位元素,本篇说说找到的元素(WebElement)该怎么用. WebElement常用方法:  返回值  方法名  说 ...

  2. 隐式等待-----Selenium快速入门(九)

    有时候,网页未加载完成,或加载失败,但是我们后续的代码就已经开始查找页面上的元素了,这通常将导致查找元素失败.在本系列Selenium窗口切换-----Selenium快速入门(六)中,我们就已经出现 ...

  3. Selenium简介与环境搭配-----Selenium快速入门(一)

    Selenium是一套自动化测试框架.官方网站是:https://www.seleniumhq.org/  某些童鞋访问可能需要FQ. Selenium支持多种语言开发,例如Java,Python,C ...

  4. 元素定位-----Selenium快速入门(二)

    一.eclipse设置 工欲善其事必先利其器,在说元素定位之前,先来设置下eclipse. 首先放大一下字体,点击windows-preferences 其次,eclipse对于java的智能提示默认 ...

  5. 终结篇:RemoteWebDriver与Grid简介-----Selenium快速入门(十五)

    Selenium的基本使用,已经介绍得差不多了,今天来简单说说RemoteWebDriver与Grid,也是本系列的最后一篇. 还记得本系列第一章(Selenium简介与环境搭配)的配置中,提到我们下 ...

  6. 截图-----Selenium快速入门(十二)

    在自动化测试过程中,截图是常见的操作,因为有时候单靠程序无法判断是否已得到期望的结果,所以需要截图判断.又或者截图是作为判断的存证.Selenium的截图操作也是非常简单,而且自带了一个文件操作类Fi ...

  7. Cookie操作-----Selenium快速入门(十一)

    什么是cookie?顾名思义,就是饼干,小甜饼.而根据读音则是“曲奇”的意思,相信不少的人都吃过.而在网络上,cookie是指浏览器在本地的一种少量数据的存储方式.例如,我们常见的,登陆的时候有个ch ...

  8. 显式等待-----Selenium快速入门(十)

    上一篇说了元素定位过程中的隐式等待,今天我们来探讨一下显示等待.显式等待,其实就是在使用WebDriverWait这个对象,进行等待.显式等待对比隐式等待,多了一些人性化的设置,可以说是更细化的隐式等 ...

  9. js框操作-----Selenium快速入门(八)

    js框,就是JavaScript中的警告框(alert),确认框(confirm),提示框(prompt),他们都是模态窗口.什么是模态窗口,大家可以自行百度一下,简单说就是弹出的窗口是在最顶端的,你 ...

随机推荐

  1. C++变量未进行初始化时的默认值

      对于built-in类型,未初始化的变量的值是undefined value. 对于自定义类型,未初始化变量的值是类型默认构造函数指定的值.  

  2. [Algorithm] Given the root to a binary tree, return the deepest node

    By given a binary tree, and a root node, find the deepest node of this tree. We have way to create n ...

  3. mac 下vim 配置文件

    " Configuration file for vim set modelines=0 " CVE-2007-2438 " Normally we use vim-ex ...

  4. Java从零开始学三十一(DATE和Calendar类)

    一.Date类 Date类是一个相对较为简单的操作类,在使用中直接使用java.util.Date类的构造方法并进行输出就可以得到一个完整的日期 二.Calendar类 Calendar类可以将取得的 ...

  5. Java从零开始学十五(继承)

    一.继承作用 继承使用复用以前的代码非常容易,能够大大的缩短开发周期,降低开发成本,同时增加程序的易维护性 继承使重一个类A能够直接使用另外一个类B的属性和方法的一种途径 类A可以有自己的属性和方法 ...

  6. jQuery之前端国际化jQuery.i18n.properties[转]

    http://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18n/ jQuery.i18n.properties是一款轻量级的jQuery国际 ...

  7. java—(2)maven基本命令

    均在含pom.xml文件的路径下执行 maven命令执行是按阶段执行的.如执行mvn package.则实际上已经执行了例如以下命令: watermark/2/text/aHR0cDovL2Jsb2c ...

  8. LogUtils.java

    package com.xdsjs.save.utils; /** * 日志相关管理类 * Created by xdsjs on 2015/10/13. */ import android.util ...

  9. vue源码cached高阶函数解析

    1.源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  10. spring的applicationContext.xml中的DBCP配置如下:

    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy ...