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));
事件监听文章来源：https://www.toymoban.com/news/detail-727684.html
- 监听发出的网络的请求
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);
五、常见问题解决：
- https://pptr.dev/troubleshooting
- Liunx中无法使用问题https://github.com/CatsAndMice/blog/issues/66
以上就是基础知识的学习。文章来源地址https://www.toymoban.com/news/detail-727684.html
到了这里，关于Puppeteer基础知识（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
