在 Puppeteer 中实践自动化测试的入门指南

2023-10-18 06:29:08

引言

Puppeteer 作为一款强大的自动化测试工具，赋能开发者高效完成 Web 应用的测试任务。在上一篇文章中，我们深入探讨了 Puppeteer 的基本原理和入门指南。本篇将带领大家实践一个 Puppeteer 自动化测试小案例，进一步巩固所学知识。

构建测试用例

目标：
点击一个网页上的按钮，并验证它是否正确触发了预期的动作。

场景：
我们将以一个简单的 TodoMVC 应用为例。该应用允许用户添加和删除任务。

测试步骤：

打开 TodoMVC 应用。
输入一个新任务并按 Enter 键。
验证新任务是否已成功添加到列表中。

实现自动化测试

1. 初始化 Puppeteer

const puppeteer = require('puppeteer');

2. 启动浏览器

const browser = await puppeteer.launch({headless: false});

3. 创建页面

const page = await browser.newPage();

4. 导航到 TodoMVC 应用

await page.goto('https://todomvc.com/examples/vue/');

5. 输入新任务

await page.type('input[placeholder="What needs to be done?"]', 'New task');

6. 按 Enter 键

await page.keyboard.press('Enter');

7. 验证新任务是否已添加

const newTask = await page.$('.view label');
const taskText = await page.evaluate(element => element.textContent, newTask);
expect(taskText).toBe('New task');

8. 关闭浏览器

await browser.close();

完整的测试脚本

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://todomvc.com/examples/vue/');
  await page.type('input[placeholder="What needs to be done?"]', 'New task');
  await page.keyboard.press('Enter');
  const newTask = await page.$('.view label');
  const taskText = await page.evaluate(element => element.textContent, newTask);
  expect(taskText).toBe('New task');
  await browser.close();
})();