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代码格式

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();
  }
})();
1
2
3
4
5
6
7
8
9
10
11
12

Puppeteer代码风格

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
});
1
2
3
4
5
6
7

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

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)
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14

三、安装与使用

在项目中使用 Puppeteer：

npm i puppeteer
# or "yarn add puppeteer"
1
2

然后在项目中引用使用，看看下面最简单的例子
创建example.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();
})();
1
2
3
4
5
6
7
8
9
10

在命令行中执行

node example.js
1

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

四、Puppeteer常用命令

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

常用命令

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

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

• 等待几毫秒

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

• 等待某个 JavaScript 函数返回 true

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

• 向某个 Input 中输入字符

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

• 点击某个节点

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

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

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

1
2

• 生成 PDF 文件

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

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

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

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

await page.content()
1

• 返回操作

await page.goBack([options])
1

• 获取当前页面的标题

await page.title();
1

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

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);
1
2
3
4

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

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

1
2
3

事件监听

• 监听发出的网络的请求

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

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

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

1
2

• 页面关闭时触发

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

1
2
3
4
5

五、常见问题解决：

1. https://pptr.dev/troubleshooting
2. Liunx中无法使用问题https://github.com/CatsAndMice/blog/issues/66

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

---