Puppeteer基础知识（一）

一、简介

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

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

● 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常用命令

中文文档： 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); 

• 等待某个 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.KaTeX parse error: Expected 'EOF', got '#' at position 7: eval('#̲search', el => …eval(‘link[rel=preload]’, el => el.href);
  const text = await page.$eval{(}^{\prime }.tex{t}^{\prime },el=>el.textContent);consthtml=awaitpage.$eval(‘.main-container’, e => e.outerHTML);

• 获取某一类节点的某个属性集合
  const textArray = await page.$$eval(‘.text’, els => Array.from(els).map(el => el.textContent));

事件监听

• 监听发出的网络的请求
  page.on(‘request’)

• 监听收到的输出，用于打印
  page.on(‘console’, msg => console.log(‘PAGE LOG:’, msg.text()));

四、常见问题解决：

1. https://pptr.dev/troubleshooting

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

---