打造稳定可靠的 Node + TS + Puppeteer E2E 前端自动化测试

前端

2023-11-21 01:05:53

使用 Node.js、TypeScript 和 Puppeteer 构建 E2E 前端自动化测试框架

在当今瞬息万变的科技环境中，自动化测试已成为软件开发的基石。它不仅加快了开发流程，还提高了代码的质量和可靠性。对于前端工程师而言，E2E（端到端）测试尤其重要，因为它模拟真实用户的操作，确保应用程序从头到尾的平稳运行。

本文将引导您使用 Node.js、TypeScript 和 Puppeteer 构建一套强大的 E2E 前端自动化测试框架。

Node.js、TypeScript 和 Puppeteer：强大组合

Node.js： 一种轻量级、跨平台的 JavaScript 运行时，用于服务器端开发。
TypeScript： 一种超集 JavaScript，添加了静态类型，从而提高了代码的可维护性和安全性。
Puppeteer： 一个用于 Puppeteer 的无头 Chromium 浏览器，用于自动化浏览器交互。

先决条件

在开始之前，请确保安装了以下软件：

Node.js
TypeScript
Puppeteer

项目初始化

创建项目：

mkdir e2e-testing-project
cd e2e-testing-project
npm init -y

安装依赖项：

npm install --save-dev typescript ts-node puppeteer

配置 TypeScript： 创建一个 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist"
  }
}

编写测试脚本

创建 test.ts 文件：

// 导入 Puppeteer
import { Browser, Page } from "puppeteer";

// 测试函数
async function runTest() {
  // 启动浏览器
  const browser: Browser = await puppeteer.launch();

  // 新建页面
  const page: Page = await browser.newPage();

  // 导航到百度
  await page.goto("https://www.baidu.com");

  // 等待加载完成
  await page.waitForSelector("#kw");

  // 输入关键词
  await page.type("#kw", "puppeteer");

  // 点击搜索
  await page.click("#su");

  // 等待搜索完成
  await page.waitForSelector(".result");

  // 获取结果数量
  const results = await page.$(".result");

  // 打印结果数量
  console.log(`搜索结果数量：${results.length}`);

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

// 运行测试
runTest();