强大的自动化工具，Playwright与Xray的模块化测试

1. 为什么选择Playwright？

1.1 关键特性

• 跨浏览器支持：支持Chromium、WebKit和Firefox，涵盖Chrome、Edge、Firefox、Opera和Safari。

• 跨平台执行：可以在Windows、Linux和macOS上运行。

• 多语言支持：支持JavaScript、TypeScript、Python、.NET、C#和Java。

• 自动等待机制：内置智能断言，元素查找时会自动重试，同时可追踪日志、视频和截图。

• 现代架构：可无缝操作多页面、多标签网站，并轻松处理框架和浏览器事件。

• 并行测试：支持并行运行测试，速度比其他自动化工具更快。

• 集成POM：支持可扩展的页面对象模型。

1.2 缺点

• 作为新工具，API还在不断演变中。

• 不支持IE浏览器和原生移动应用。

• 社区支持相对不足，但正在改善。

2. 快速上手

2.1 环境设置

要在项目中设置Playwright或创建新测试项目非常简单：

确保已安装Node.js。 安装代码编辑器，推荐使用Visual Studio Code。

安装 在项目根目录下运行以下命令：

npm init playwright@latest

或者创建一个新项目：

npm init playwright@latest new-project

接下来安装依赖和浏览器：

npx playwright install

2.2. 编写测试

Playwright提供了自动测试生成器。运行codegen并与浏览器交互，Playwright将为用户的操作生成代码。

创建tests/example.spec.ts文件，编写以下测试代码：

import { test, expect } from '@playwright/test';

test('基本测试', async ({ page }) => {
    await page.goto('https://playwright.dev/');
    const title = page.locator('.navbar__inner .navbar__title');
    await expect(title).toHaveText('Playwright');
});

2.3 执行测试

使用以下命令执行Playwright测试，假设测试文件在tests目录下：

• 运行所有测试：

npx playwright test

• 运行单个测试文件：

npx playwright test tests/example.spec.ts

3. 创建可维护的自动化测试

3.1 页面对象模型（POM）

页面对象模型是简化与多个测试中网页交互的一种常用模式。我们将创建一个PlaywrightDevPage辅助类，以封装playwright.dev页面的常见操作。

// playwright-dev-page.ts
import { expect, Locator, Page } from '@playwright/test';

export class PlaywrightDevPage {
  private readonly page: Page;
  readonly getStartedLink: Locator;
  readonly gettingStartedHeader: Locator;
  readonly pomLink: Locator;
  readonly tocList: Locator;

  constructor(page: Page) {
    this.page = page;
    this.getStartedLink = page.locator('a', { hasText: 'Get started' });
    this.gettingStartedHeader = page.locator('h1', { hasText: 'Getting started' });
    this.pomLink = page.locator('li', { hasText: 'Playwright Test' }).locator('a', { hasText: 'Page Object Model' });
    this.tocList = page.locator('article div.markdown ul > li > a');
  }

  async goto() {
    await this.page.goto('https://playwright.dev');
  }

  async getStarted() {
    await this.getStartedLink.first().click();
    await expect(this.gettingStartedHeader).toBeVisible();
  }

  async pageObjectModel() {
    await this.getStarted();
    await this.pomLink.click();
  }
}

运行不同环境下的测试 为了方便管理不同的测试环境（如开发、QA和生产环境），可以使用.env文件。

在playwright.config.ts中添加如下代码：

import dotenv from 'dotenv';

if (process.env.test_env) {
    dotenv.config({
        path: `.env.${process.env.test_env}`,
        override: true
    });
} else {
    dotenv.config({
        path: `.env.development`,
        override: true
    });
}

// 配置内容...

在package.json中添加以下命令以便于运行：

"test-dev": "cross-env test_env=development npx playwright test",
"test-qa": "cross-env test_env=qa npx playwright test",
"test-prod": "cross-env test_env=prod npx playwright test"

小结论

Playwright是一款功能强大的自动化测试工具，适用于各类项目。其现代架构、跨浏览器和跨平台支持，使其成为测试开发者的理想选择。希望通过文章，能帮助你更好地理解和使用Playwright进行自动化测试。

 

模块化测试是一种将测试编写和组织结合的模式。在模块化测试中，测试以小的功能为基础进行编写，并在测试套件中执行。每个特定功能的测试都提供了特定的用户行为。通过模块化测试方法，我们可以通过重用已创建的测试模块来节省时间，避免QA团队重复编写相同的场景。此外，在一个地方的变更会影响相关的测试用例。

 

4. Xray中的模块化测试

    为每个模块编写相同的测试用例总是繁琐的。这不仅浪费时间，也浪费精力。测试用例应该是可重用的。模块化测试设计技术允许我们在多个项目和模块中重用测试用例，常用于端到端测试。例如，在电商应用中测试“添加到购物车”功能时，用户必须先登录。之前已经编写的登录测试用例可以直接在添加产品到购物车的测试中调用，从而避免重复工作，这正是Xray测试用例管理工具的优势所在。

5. 重用测试用例的优势

    与其在多个项目和模块中更新多个测试用例，不如在功能变更时只更新一次。这将减少维护成本。测试用例针对特定功能编写，而不是整个项目，从而使得对每个功能的关注度提高，测试也更为稳健。

6. 使用Playwright进行模块化测试

    Playwright是一个免费的开源自动化测试框架。我们可以使用页面对象模型模式和测试夹具创建模块化测试。

    页面对象模型 页面对象模型是一种常用模式，它为网页应用页面引入抽象，简化了在多个测试中的交互。

    我们将创建一个PlaywrightDevPage辅助类，封装playwright.dev页面的常见操作。

// playwright-dev-page.ts
import { expect, Locator, Page } from '@playwright/test';

export class PlaywrightDevPage {
    readonly page: Page;
    readonly getStartedLink: Locator;
    readonly gettingStartedHeader: Locator;
    readonly pomLink: Locator;
    readonly tocList: Locator;

    constructor(page: Page) {
        this.page = page;
        this.getStartedLink = page.locator('a', { hasText: 'Get started' });
        this.gettingStartedHeader = page.locator('h1', { hasText: 'Getting started' });
        this.pomLink = page.locator('li', { hasText: 'Playwright Test' }).locator('a', { hasText: 'Page Object Model' });
        this.tocList = page.locator('article div.markdown ul > li > a');
    }

    async goto() {
        await this.page.goto('https://playwright.dev');
    }

    async getStarted() {
        await this.getStartedLink.first().click();
        await expect(this.gettingStartedHeader).toBeVisible();
    }

    async pageObjectModel() {
        await this.getStarted();
        await this.pomLink.click();
    }
}

现在我们可以在测试中使用PlaywrightDevPage类。

// example.spec.ts
import { test, expect } from '@playwright/test';
import { PlaywrightDevPage } from './playwright-dev-page';

test('getting started should contain table of contents', async ({ page }) => {
    const playwrightDev = new PlaywrightDevPage(page);
    await playwrightDev.goto();
    await playwrightDev.getStarted();
    await expect(playwrightDev.tocList).toHaveText([
        'Installation',
        'First test',
        'Configuration file',
        'Writing assertions',
        'Using test fixtures',
        'Using test hooks',
        'VS Code extension',
        'Command line',
        'Configure NPM scripts',
        'Release notes'
    ]);
});

test('should show Page Object Model article', async ({ page }) => {
    const playwrightDev = new PlaywrightDevPage(page);
    await playwrightDev.goto();
    await playwrightDev.pageObjectModel();
    await expect(page.locator('article')).toContainText('Page Object Model is a common pattern');
});

7. 测试夹具

    Playwright测试基于测试夹具的概念。测试夹具用于为每个测试建立环境，提供测试所需的一切，而不多余。夹具在测试间是隔离的，可以根据意义对测试进行分组。

以下是一些常用的预定义夹具：

夹具	类型	描述
Page	Page	此次测试运行的隔离页面
context	BrowserContext	此次测试运行的隔离上下文
browser	Browser	在测试间共享的浏览器，优化资源

8. 创建夹具

    要创建自定义夹具，使用test.extend(fixtures)创建一个新的测试对象。

// my-test.ts
import { test as base } from '@playwright/test';
import { TodoPage } from './todo-page';

type MyFixtures = {
    todoPage: TodoPage;
};

export const test = base.extend({
    todoPage: async ({ page }, use) => {
        const todoPage = new TodoPage(page);
        await todoPage.goto();
        await todoPage.addToDo('item1');
        await todoPage.addToDo('item2');
        await use(todoPage);
        await todoPage.removeAll();
    },
});

9. 使用夹具

    只需在测试函数参数中提及夹具，测试运行器将处理一切。夹具在钩子和其他夹具中也可用。

import { test, expect } from './my-test';

test.beforeEach(async ({ settingsPage }) => {
    await settingsPage.switchToDarkMode();
});

test('basic test', async ({ todoPage, page }) => {
    await todoPage.addToDo('something nice');
    await expect(page.locator('.todo-item')).toContainText(['something nice']);
});

结论

    使用Playwright和Xray进行模块化测试，可以显著提升测试的效率和维护性，使测试工作更为灵活和可重用。通过合理利用页面对象模型和测试夹具，您可以构建出更加稳健的自动化测试解决方案。