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();}
})();

Puppeteer代码风格

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

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：

npm i puppeteer
# or "yarn add puppeteer"

然后在项目中引用使用，看看下面最简单的例子
创建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();
})();

在命令行中执行

node example.js

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

四、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();

• 等待几毫秒

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

• 等待某个 JavaScript 函数返回 true

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

• 向某个 Input 中输入字符

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

• 点击某个节点

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

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

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

• 生成 PDF 文件

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

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

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

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

await page.content()

• 返回操作

await page.goBack([options])

• 获取当前页面的标题

await page.title();

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

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);

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

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

事件监听

• 监听发出的网络的请求

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

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

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

• 页面关闭时触发

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

五、常见问题解决：

1. https://pptr.dev/troubleshooting

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

---