Puppeteer基础知识（一）

- Puppeteer基础知识（一）

一、简介

Puppeteer 是一个强大而灵活的工具，可以用于网页爬虫、自动化测试、性能分析等场景。能够模拟用户行为、拦截网络请求、处理弹窗、模拟设备等，可以让我们更灵活地控制浏览器和页面。不仅能够启动web进行测试，也能够启动web H5 模拟器进行测试。

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行"有头"模式。

二、其他一些自动化测试工具

● Selenium/WebDriver 专注于跨浏览器自动化；它的价值主张是一个适用于所有主要浏览器的单一标准 API。多种语言支持。官网地址：https://www.selenium.dev/zh-cn/documentation/

● Puppeteer 比较轻量化，专注于 Chromium；其价值主张是更丰富的功能和更高的可靠性。官网地址：https://pptr.dev/

● nightmare 链式调用方式，已经不再维护。官网地址： https://github.com/segment-boneyard/nightmare

Selenium/WebDriver代码格式

js 复制代码

const {Builder, By, Key, until} = require('selenium-webdriver');

(async function example() {
  let driver = await new Builder().forBrowser('firefox').build();
  try {
    await driver.get('http://www.google.com/ncr');
    await driver.findElement(By.name('q'));.sendKeys('webdriver', Key.RETURN);
    await driver.wait(until.titleIs('webdriver - Google Search'), 1000);
  } finally {
    await driver.quit();
  }
})();

Puppeteer代码风格

js 复制代码

const puppeteer = require('puppeteer');

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

Nightmare 代码风格：链式调用方式https://github.com/segment-boneyard/nightmare

js 复制代码

const Nightmare = require('nightmare')
const nightmare = Nightmare({ show: true })

nightmare
  .goto('https://duckduckgo.com')
  .type('#search_form_input_homepage', 'github nightmare')
  .click('#search_button_homepage')
  .wait('#r1-0 a.result__a')
  .evaluate(() => document.querySelector('#r1-0 a.result__a').href)
  .end()
  .then(console.log)
  .catch(error => {
    console.error('Search failed:', error)
  })

三、安装与使用

在项目中使用 Puppeteer：

bash 复制代码

npm i puppeteer
# or "yarn add puppeteer"

然后在项目中引用使用，看看下面最简单的例子

创建example.js文件，然后增加以下内容：

js 复制代码

const puppeteer = require('puppeteer');

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

  await browser.close();
})();

在命令行中执行

bash 复制代码

node example.js

这样就会打开一个浏览器，进行执行文件中的命令。

四、Puppeteer常用命令

中文文档： https://puppeteer.bootcss.com/api#class-browserfetcher

常用命令

选择器
page. $(selector) page.$ $(selector)
它们的功能类似于document.querySelector和document.querySelectorAll。

js 复制代码

const frontEnd = await page.$('span[data-type=frontend]');
frontEnd.click();

等待几毫秒

js 复制代码

await page.waitFor(500); 
await page.waitForTimeout(2600);

等待某个 JavaScript 函数返回 true

js 复制代码

await page.waitFor(() => !document.querySelector('.ant-spin.ant-spin-spinning'));

向某个 Input 中输入字符

js 复制代码

await page.type('#username', '18154');
await page.type('#session_email_or_mobile_number', userName);

点击某个节点

js 复制代码

await page.click('#btn-submit');

截取网页的屏幕截图
备注在OS X上截图需要至少1/6秒。

js 复制代码

await page.screenshot({ path: '../images/publishClick.png', fullPage: true });

生成 PDF 文件

js 复制代码

await page.pdf({path: 'example.pdf'});

在浏览器中执行一段 JavaScript 代码

js 复制代码

await page.evaluate(() => alert('1'));

返回页面的完整 html 代码，包括 doctype。

js 复制代码

await page.content()

返回操作

js 复制代码

await page.goBack([options])

获取当前页面的标题

js 复制代码

await page.title();

获取某一个节点的某个属性

js 复制代码

const searchValue = await page.$eval('#search', el => el.value);
const preloadHref = await page.$eval('link[rel=preload]', el => el.href);
const text = await page.$eval('.text', el => el.textContent);
const html = await page.$eval('.main-container', e => e.outerHTML);

获取某一类节点的某个属性集合

js 复制代码

const textArray =
 await page.$$eval('.text', els => Array.from(els).map(el => el.textContent));

事件监听

监听发出的网络的请求

js 复制代码

function logRequest(interceptedRequest) {
  console.log('A request was made:', interceptedRequest.url());
}
page.on('request', logRequest);
// 清理监听
page.removeListener('request', logRequest);

监听收到的输出，用于打印

js 复制代码

page.on('console', msg => console.log('PAGE LOG:', msg.text()));

页面关闭时触发

js 复制代码

function closePage() {
  console.log('closePage.........');
}
page.on('close', closePage);

五、常见问题解决：

https://pptr.dev/troubleshooting

以上就是基础知识的学习。