Nodejs自动化测试与页面操控插件puppeteer的使用

Nodejs自动化测试与页面操控插件puppeteer的使用
Puppeteer 是一个 Node 库，它提供了一组高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。你可以使用 Puppeteer 进行自动化测试、网页截图/屏幕录制、爬虫抓取数据等。

安装 Puppeteer

首先，你需要在你的项目中安装 Puppeteer。你可以使用 npm 或 yarn 来安装：

npm install puppeteer
# 或者
yarn add puppeteer

基本用法

下面是一个简单的示例，展示如何使用 Puppeteer 打开一个网站并进行一些基本操作：

const puppeteer = require('puppeteer');

async function run() {
    // 启动浏览器和新页面
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // 访问指定的URL
    await page.goto('http://example.com');

    // 设置页面视图大小
    await page.setViewport({ width: 1280, height: 800 });

    // 截图
    await page.screenshot({ path: 'example.png' });

    // 执行JavaScript代码，例如获取页面标题
    const title = await page.evaluate(() => document.title);
    console.log(`Page title is ${title}`);

    // 填写表单并提交
    await page.goto('http://example.com/login');
    await page.type('#username', 'my-username');
    await page.type('#password', 'my-password');
    await page.click('button[type="submit"]');
    await page.waitForNavigation();

    // 关闭浏览器
    await browser.close();
}

run();

高级功能

1. 点击按钮或链接

await page.click('a.login-link');

2. 获取页面内容

const content = await page.content();
console.log(content);

3. 执行复杂的用户交互

await page.mouse.click(x, y); // 在指定坐标点击鼠标
await page.keyboard.type('Hello World'); // 模拟键盘输入

4. 使用等待函数确保页面加载完成

await page.waitForSelector('.some-element-class'); // 等待特定元素出现
await page.waitForTimeout(5000); // 等待指定时间

5. 处理弹出窗口

page.on('dialog', async dialog => {
    console.log(dialog.message());
    await dialog.dismiss(); // 取消弹窗
    // 或者
    // await dialog.accept(); // 接受弹窗
});

注意事项

性能：Puppeteer 可能会消耗大量资源，特别是在处理大量请求时。
安全性：确保你访问的网站允许自动化测试。
维护性：随着网站结构的变化，测试脚本可能需要定期更新。

希望这些信息对你有所帮助！如果你有更具体的需求或问题，请随时告诉我。

phonegap100 1楼

Puppeteer就像是给你的Node.js项目配备了一个隐形的超级英雄助手，专门帮你搞定网页上的各种复杂任务。想象一下，你只需输入几行代码，这位“英雄”就能自动打开浏览器，导航到指定的网页，填写表单，点击按钮，甚至还能截图或生成PDF文件！

比如，你想测试一个登录功能是否正常工作，你可以这样写：

const puppeteer = require('puppeteer');

async function loginTest() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // 打开登录页面
    await page.goto('http://example.com/login');
    
    // 填写用户名和密码
    await page.type('#username', 'testUser');
    await page.type('#password', 'testPass');
    
    // 点击登录按钮
    await page.click('#loginBtn');
    
    // 等待页面加载完成，检查是否成功登录
    await page.waitForNavigation();
    console.log(await page.title());
    
    // 关闭浏览器
    await browser.close();
}

loginTest().catch(console.error);

这样，你就可以轻松地自动化测试你的应用了，而且还能避免重复劳动，提高效率！

nodeper 2楼

Puppeteer 是一个 Node 库，它提供了一组高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。Puppeteer 可以用来生成网页的屏幕截图、PDF、爬取 SPA (单页应用) 并生成相关的性能指标。

Puppeteer 的安装

首先你需要安装 Node.js 环境，然后在你的项目中安装 Puppeteer：

npm install puppeteer

基本使用

1. 打开一个网页

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

这段代码会启动一个浏览器实例，打开一个新的页面，访问 https://example.com，并截取当前页面的屏幕快照保存为 example.png，最后关闭浏览器。

2. 页面操作

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 访问页面
  await page.goto('https://example.com');

  // 填写表单
  await page.type('#inputField', 'Hello, Puppeteer!');

  // 点击按钮
  await page.click('#submitButton');

  // 等待结果加载
  await page.waitForSelector('#result');

  // 截图
  await page.screenshot({path: 'example.png'});

  // 关闭浏览器
  await browser.close();
})();

这段代码展示了如何填写表单、点击按钮和等待某个元素出现后进行截图的基本操作。