你有没有在项目后期被密密麻麻的回归测试折磨得死去活来？或者眼睁睁看着开发提了一个小小的改动，却要花费大量时间去验证那些“没变”的功能？这些场景，想必是许多测试工程师的心头痛。在软件开发的快节奏时代，手动测试的效率瓶颈越来越明显，也更容易出错。而自动化测试，正是我们摆脱这些困境的利器。它不仅能解放我们的双手，还能极大地提高测试效率和质量，让我们可以把精力投入到更有价值的探索性测试和设计优化上。那么，对于想迈入自动化大门的你，该如何快速搭建一个基础的自动化测试框架呢？

自动化测试：到底测什么？

简单来说，自动化测试就是用代码来模拟人工操作，对软件进行测试。它不是简单地把手动步骤搬到机器上跑，更重要的是通过精心设计的测试脚本，实现快速、重复、可靠的验证。自动化测试主要侧重于以下几个方面：

  • 回归测试：这是自动化测试最核心的价值。当代码发生改动时，可以快速运行所有已有的自动化测试用例，确保新功能没有破坏旧功能。
  • 功能测试：验证软件的各项功能是否符合预期，例如用户登录、数据提交、页面跳转等。
  • 性能初期验证：虽然有专业的性能测试工具，但自动化测试也能在一定程度上帮助我们做一些接口级别的性能或页面加载速度的初步验证。
  • 跨浏览器/设备兼容性测试：通过自动化工具，可以轻松地在不同浏览器或设备上运行同一套测试用例，确保用户体验的一致性。

它就像你拥有了一支不知疲倦的机器人大军，可以不分昼夜、准确无误地执行你指定的任务。

工具选择：新手上路，哪个更趁手？

市面上的自动化测试工具琳琅满目，比如老牌劲旅Selenium，新兴力量Cypress、Playwright，还有移动端的Appium等。对于初学者而言，选择一个上手快、社区活跃、功能强大的工具至关重要。

近年来，微软推出的Playwright表现亮眼，迅速成为自动化测试领域的新宠。为什么推荐它呢？

  • 多浏览器支持：Playwright一个API就能搞定 Chromium、Firefox 和 WebKit（Safari的核心引擎）三大主流浏览器，还能支持像 Edge 这样基于 Chromium 的浏览器。这意味着你一套代码就能跑遍大多数用户的浏览器环境。
  • 自带自动等待：Playwright 会自动等待元素准备就绪，比如等待元素可见、可点击等，这大大减少了因为元素加载时序问题导致的测试失败，让你的脚本更稳定，编写更简单。
  • 强大的调试能力：提供了强大的调试工具，比如codegen可以自动生成测试脚本，playwright show-trace可以查看详细的测试执行轨迹，帮助你快速定位问题。
  • 支持多种语言：它支持 JavaScript、TypeScript、Python、Java 和 .NET，这让不同背景的开发者和测试工程师都能轻松上手。

考虑到其现代化的设计和对前端技术的良好支持，我们将以 Playwright (基于 Node.js/TypeScript) 为例，带你搭建一个基础的自动化测试框架。

动手搭建第一个自动化测试框架

一个好的自动化测试框架，不仅仅是写几行脚本，更重要的是它能让你高效地组织测试代码，让测试用例易于维护和扩展。我们会采用经典的Page Object Model (POM) 设计模式。

1. 环境准备

首先，你需要安装 Node.js。建议安装LTS（长期支持）版本，因为它的稳定性更好。你可以从 Node.js 官网下载安装包。

安装完成后，打开命令行工具（如终端或CMD），输入以下命令验证：

node -v
npm -v

如果能看到版本号，说明Node.js和npm（Node.js的包管理器）都安装成功了。

2. 项目初始化

选择一个你喜欢的目录，创建一个新的项目文件夹，例如 my-playwright-tests，然后进入该文件夹。

mkdir my-playwright-tests
cd my-playwright-tests

接着，使用npm初始化Playwright项目：

npm init playwright@latest

这个命令会引导你完成一系列配置，比如选择要支持的浏览器（全选即可）、是否添加GitHub Actions CI等。按照提示一步步确认，Playwright会自动为你安装所需的依赖，并创建一些示例文件。

初始化完成后，你的项目结构可能类似这样：

my-playwright-tests/
├── tests/
│   └── example.spec.ts  # 示例测试文件
├── playwright.config.ts # Playwright 配置文件
├── package.json         # npm 配置文件
└── package-lock.json

3. Page Object Model (POM) 实践

Page Object Model 是一种设计模式，它将每个页面的UI元素和操作封装成一个独立的类。这样做的好处是：

  • 提高可维护性：如果页面UI有改动，只需要修改对应的Page Object类，而不需要修改所有引用了该元素的测试用例。
  • 减少代码重复：页面操作封装成方法，可以在多个测试用例中复用。
  • 提高可读性：测试用例只关注业务逻辑，代码更清晰易懂。

我们以一个简单的登录页面为例。

首先，在项目根目录下创建一个 pages 文件夹，用于存放所有的页面对象：

mkdir pages

接着，在 pages 文件夹下创建一个 LoginPage.ts 文件：

// pages/LoginPage.ts
import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly usernameInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.usernameInput = page.locator('#username'); // 假设用户名字段的ID是username
    this.passwordInput = page.locator('#password'); // 假设密码字段的ID是password
    this.loginButton = page.locator('button:has-text("Login")'); // 假设登录按钮的文本是Login
    this.errorMessage = page.locator('.error-message'); // 假设错误消息的class是error-message
  }

  async navigateToLoginPage() {
    await this.page.goto('https://your-test-website.com/login'); // 替换为你的登录页面URL
  }

  async login(username: string, password_val: string) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password_val);
    await this.loginButton.click();
  }

  async getErrorMessageText(): Promise<string | null> {
    return this.errorMessage.textContent();
  }
}

这里我们定义了一个 LoginPage 类，包含了登录页面上的元素定位器（Locator）和相关操作方法。

4. 编写第一个测试用例

现在我们来编写一个使用 LoginPage 的测试用例。在 tests 文件夹下创建一个 login.spec.ts 文件。

// tests/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage'; // 引入我们刚刚创建的页面对象

test.describe('Login Functionality', () => { // 使用 test.describe 可以组织相关的测试用例
  let loginPage: LoginPage; // 声明一个 LoginPage 实例

  test.beforeEach(async ({ page }) => { // 在每个测试用例运行前执行
    loginPage = new LoginPage(page);
    await loginPage.navigateToLoginPage(); // 导航到登录页面
  });

  test('should allow a user to log in successfully', async ({ page }) => {
    // 调用 LoginPage 的 login 方法
    await loginPage.login('testuser', 'password123');

    // 断言登录成功后的页面状态，例如跳转到首页，或者某个元素可见
    // 假设登录成功后会跳转到 /dashboard 页面
    await expect(page).toHaveURL('https://your-test-website.com/dashboard'); 
    console.log('登录成功！');
  });

  test('should display an error message for invalid credentials', async ({ page }) => {
    await loginPage.login('invaliduser', 'wrongpassword');

    // 断言错误消息是否正确显示
    await expect(loginPage.errorMessage).toBeVisible();
    const errorMessageText = await loginPage.getErrorMessageText();
    expect(errorMessageText).toContain('Invalid credentials'); // 假设错误消息包含 "Invalid credentials"
    console.log(`登录失败，错误消息：${errorMessageText}`);
  });
});

请注意：在实际使用时，请将 https://your-test-website.com/login 和 https://your-test-website.com/dashboard 替换为你实际的测试环境URL，并根据你网站的实际元素ID、class或文本来调整 LoginPage.ts 中的定位器。

5. 运行与报告

万事俱备，现在可以运行你的第一个自动化测试了！在项目根目录下打开命令行，输入：

npx playwright test

Playwright 会自动启动浏览器，并运行你的测试用例。执行完成后，它会显示测试结果。

如果你想看到更详细的HTML测试报告，可以使用：

npx playwright show-report

这会在浏览器中打开一个漂亮的报告页面，详细展示每个测试用例的执行情况、截图、视频等，方便你分析测试结果。

进阶思考：框架的未来与拓展

这个基础框架只是一个起点。随着你的自动化测试用例越来越多，你会发现更多可以优化和拓展的地方：

  • 数据驱动测试：将测试数据（如用户名、密码等）与测试逻辑分离，从外部文件（如CSV、Excel、JSON）中读取数据，这样可以轻松地用多组数据测试同一功能。
  • 集成到 CI/CD：将自动化测试集成到持续集成/持续部署（CI/CD）流水线中，每次代码提交后自动运行测试，尽早发现问题。
  • 更完善的报告：除了Playwright自带的报告，还可以集成像Allure这样的第三方报告工具，生成更美观、更易读的测试报告。
  • 错误处理与重试机制：添加更健壮的错误处理逻辑和失败用例的重试机制，提高测试的稳定性。
  • 统一的测试配置：将测试环境URL、用户名、密码等敏感信息或可变参数集中管理。

结语

从零开始搭建自动化测试框架，听起来可能有点复杂，但其实只要理清思路，一步步跟着来，你会发现它并没有想象中那么难。我们今天只是迈出了第一步，但这一步至关重要。掌握自动化测试，不仅能提升你的工作效率，更能拓宽你的技术视野，让你在职业发展道路上更具竞争力。

自动化测试的旅程永无止境，每一次“捉虫”的成功，都是你进步的证明。希望这篇文章能给你带来一些启发，也期待你在自动化测试的道路上越走越远，成为真正的“捉虫大师”！

引用:
https://playwright.dev/
https://playwright.dev/docs/debug
https://playwright.dev/docs/languages
https://nodejs.org/en/download/package-manager

类似文章