Eine kurze Analyse der Verwendung der Puppeteer-Bibliothek in Node.js

Was ist die Puppeteer-Bibliothek? Was kann getan werden? Wie benutzt man? Der folgende Artikel stellt Ihnen die Puppeteer-Bibliothek vor und zeigt Ihnen, wie Sie die Puppeteer-Bibliothek in Node.js nutzen.

Puppeteer ist ein offizielles Google-Produkt, das headless Chrome über das DevTools-Protokoll Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。

中文文档

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

作用：

能做什么?

• 生成页面 PDF。
• 抓取 SPA（单页应用）并生成预渲染内容。
• 自动提交表单，进行 UI 测试，键盘输入等。
• 创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
• 捕获网站的 timeline trace，用来帮助分析性能问题。
• 测试浏览器扩展。

Puppeteer因为是一个npm的包，所以安装很简单：

npm i puppeteer

或者

yarn add puppeteer

如何使用：

// 引入 Puppeteer 模块
let puppeteer = require('puppeteer')

//puppeteer.launch实例化开启浏览器
async function test() {
    //可以传入一个options对象({headless: false})，可以配置为无界面浏览器，也可以配置有界面浏览器
    //无界面浏览器性能更高更快，有界面一般用于调试开发
    let options = {
        //设置视窗的宽高
        defaultViewport:{
            width:1400,
            height:800
        },
        //设置为有界面，如果为true，即为无界面
        headless:false,
        //设置放慢每个步骤的毫秒数
        slowMo:250
    }
    let browser = await puppeteer.launch(options);

    // 打来新页面
    let page = await browser.newPage();

    // 配置需要访问网址
    await page.goto('http://www.baidu.com')
    
    // 截图
    await page.screenshot({path: 'test.png'});

    //打印pdf
    await page.pdf({path: 'example.pdf', format: 'A4'});

   // 结束关闭
    await browser.close();
}test()

// 获取页面内容
//$$eval函数，使回调函数可以运行在浏览器中，并且可以通过浏览器的方式进行输出
    await page.$$eval('#head #s-top-left a',(res) =>{
        //console.log(res);
        res.forEach((item,index) => {
            console.log($(item).attr('href'));
        })
    })
// 监听console.log事件
page.on('console',(...args) => {
    console.log(args);
})
// 获取页面对象,添加点击事件
   ElementHandle = await page.$$('#head #s-top-left a')
   ElementHandle[0].click();

// 通过表单输入进行搜索
    inputBox = await page.$('#form .s_ipt_wr #kw')
    await inputBox.focus() //光标定位在输入框
    await page.keyboard.type('Node.js') //向输入框输入内容
    search = await page.$('.s_btn_wr input[type=submit]')
    search.click() //点击搜索按钮

爬虫实践

很多网页通过user-agent来判断设备，可以通过page.emulate(options)来进行模拟。options有两个配置项，一个为userAgent，另一个为viewport可以设置宽度(width)、高度(height)、屏幕缩放(deviceScaleFactor)、是否是移动端(isMobile)、有无touch事件(hasTouch)。

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.example.com');
  // other actions...
  await browser.close();
});

上述代码则模拟了iPhone6访问某网站，其中devices是puppeteerNode

steuert Bibliothek. Sie können Chrome direkt über die von Puppeteer bereitgestellte API steuern, um die meisten Benutzervorgänge zur Durchführung von UI-Tests oder als Crawler zu simulieren. Code> Besuchen Sie Seiten, um Daten zu sammeln. <p></p>Chinesische Dokumentation<ul> <li>https://zhaoqize.github.io/puppeteer-api-zh_CN/#/</li> <li> </ul> <p><a href="https://link.juejin.cn?target=" title="" ref="nofollow noopener noreferrer"><span style="font-size: 18px;">Funktion: Was kann </span></a><strong></strong></p> <blockquote><p> tun? </p></blockquote> <p><a href="https://www.php.cn/course/list/24.html" target="_blank">Seiten-PDF generieren. </a></p>Erfassen Sie SPA (Single Page Application) und generieren Sie vorgerenderte Inhalte. 🎜🎜Automatisch Formulare einreichen, UI-Tests, Tastatureingaben usw. durchführen. 🎜🎜Erstellen Sie eine automatisierte Testumgebung, die ständig aktualisiert wird. Führen Sie Tests direkt in der neuesten Version von Chrome mit den neuesten JavaScript- und Browserfunktionen durch. 🎜🎜Erfassen Sie die Zeitachsenverfolgung der Website🎜, Wird zur Analyse von Leistungsproblemen verwendet. 🎜🎜Testen Sie Browsererweiterungen. 🎜🎜🎜🎜🎜🎜Puppeteer ist ein npm-Paket, daher ist die Installation sehr einfach: 🎜🎜rrreee🎜 oder 🎜rrreee🎜🎜<span style="font-size: 18px;">Verwendung: </span>🎜 🎜 rrreee🎜<img src="https://img.php.cn/upload/image/686/278/965/1639133533551068.png" title="1639133533551068.png" alt="Eine kurze Analyse der Verwendung der Puppeteer-Bibliothek in Node.js">🎜rrreee 🎜 <img src="https://img.php.cn/upload/image/322/281/235/1639133556199777.png" title="1639133556199777.png" alt="Eine kurze Analyse der Verwendung der Puppeteer-Bibliothek in Node.js">🎜rrreee🎜🎜🎜<span style="max-width:90%">🎜Crawler-Praxis🎜</span>🎜🎜Viele Webseiten verwenden <code>user-agent, um das Gerät zu bestimmen. Sie können page.emulate(options) verwenden. um eine Simulation durchzuführen. Optionen haben zwei Konfigurationselemente, eines ist userAgent und das andere ist viewport, das width und height (Höhe) festlegen kann. code>, <code>Bildschirmskalierung (deviceScaleFactor), Ob es sich um ein mobiles Endgerät handelt (isMobile), Gibt es ein Berührungsereignis (hasTouch). 🎜rrreee🎜Der obige Code simuliert den Besuch einer Website mit iPhone6, wobei Geräte die Simulationsparameter einiger gängiger Geräte sind, die in puppeteer integriert sind. 🎜🎜Viele Webseiten erfordern eine Anmeldung. Es gibt zwei Lösungen: 🎜🎜🎜Lassen Sie den Puppenspieler das Konto und das Passwort eingeben: Klicken Sie, um die Methode page.click(selector[, Optionen]) zu verwenden, oder Sie können die Seite fokussieren. Fokus(Auswahl) . Für die Eingabe können Sie page.type(selector, text[, options]) verwenden, um die angegebene Zeichenfolge einzugeben, und Sie können auch die Verzögerung in den Optionen so einstellen, dass die Eingabe langsamer erfolgt, eher wie bei einer echten Person. Sie können auch „keyboard.down(key[, options])“ verwenden, um Zeichen für Zeichen einzugeben. 🎜🎜Wenn Sie Cookies verwenden, um den Anmeldestatus zu ermitteln, können Sie page.setCookie(...cookies) verwenden. Wenn Sie Cookies verwalten möchten, können Sie regelmäßig vorbeischauen. 🎜🎜🎜🎜🎜🎜Tipp: Einige Websites müssen den QR-Code scannen, andere Webseiten mit demselben Domainnamen verfügen jedoch über eine Anmeldung. Sie können versuchen, sich auf der Webseite anzumelden und den Cookie-Zugriff zu verwenden, um das Scannen zu überspringen QR-Code. 🎜🎜🎜🎜Leistungsstärkere Funktionen finden Sie in der offiziellen Dokumentation: https://zhaoqize.github.io/puppeteer-api-zh_CN/#/🎜🎜🎜Weitere knotenbezogene Kenntnisse finden Sie unter: 🎜nodejs-Tutorial 🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung der Puppeteer-Bibliothek in Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!