如何使用Playwright为Angular2应用编写小型组件测试？有示例吗？

当然有，Playwright的组件测试功能已经支持Angular很久了，很多开发者都用它替代部分 Karma+Jasmine 的测试场景，尤其适合需要验证真实浏览器交互、样式渲染的组件测试需求。

前置配置 #

• 环境要求：Angular 14+，Playwright 1.30+，低于该版本可能存在适配问题
• 依赖安装：在你的Angular项目根目录执行命令npm init playwright@latest -- --ct，交互提示选择框架时选Angular，工具会自动生成适配配置，无需手动修改angular.json或其他配置文件

基础测试示例 #

以最常用的自定义按钮组件ButtonComponent为例，测试文件命名为button.component.ct.spec.ts（ct后缀用来和原有的单元测试文件区分，也可以沿用原命名规则），测试代码如下：

import { test, expect } from '@playwright/experimental-ct-angular';
import { ButtonComponent } from './button.component';

test('组件正确渲染传入的label属性', async ({ mount }) => {
  // 挂载组件并传入props
  const button = await mount(ButtonComponent, {
    props: {
      label: '确认提交',
      type: 'primary'
    }
  });
  // 断言文本渲染正确
  await expect(button).toHaveText('确认提交');
  // 断言样式类正确绑定
  await expect(button).toHaveClass(/btn-primary/);
});

test('禁用状态下按钮不触发click事件', async ({ mount }) => {
  let isClicked = false;
  const button = await mount(ButtonComponent, {
    props: {
      label: '确认提交',
      disabled: true,
      onClick: () => isClicked = true
    }
  });

  await button.click();
  // 断言事件未触发
  expect(isClicked).toBe(false);
  await expect(button).toBeDisabled();
});

常用场景处理 #

• 依赖注入配置：如果组件依赖了服务，可以在mount的时候传入providers替换原有依赖，方便做mock

import { UserService } from '../services/user.service';
import { UserCardComponent } from './user-card.component';

test('用户卡正确展示用户信息', async ({ mount }) => {
  const card = await mount(UserCardComponent, {
    providers: [
      {
        provide: UserService,
        useValue: {
          getLoggedInUser: () => ({
            name: '张三',
            role: '管理员'
          })
        }
      }
    ]
  });
  await expect(card.getByText('张三')).toBeVisible();
  await expect(card.getByText('管理员')).toBeVisible();
});

• 视觉回归测试：直接调用截图比对API即可验证组件渲染一致性

test('按钮不同状态样式符合预期', async ({ mount }) => {
  const normalBtn = await mount(ButtonComponent, { props: { label: '提交' } });
  await expect(normalBtn).toHaveScreenshot('button-normal.png');

  const disabledBtn = await mount(ButtonComponent, { props: { label: '提交', disabled: true } });
  await expect(disabledBtn).toHaveScreenshot('button-disabled.png');
});

• 表单组件测试：用Playwright原生交互API模拟用户输入即可，和端到端测试写法完全一致

import { InputComponent } from './input.component';

test('输入框双向绑定正常', async ({ mount }) => {
  let inputValue = '';
  const input = await mount(InputComponent, {
    props: {
      value: inputValue,
      valueChange: (val: string) => inputValue = val
    }
  });

  await input.fill('测试内容');
  expect(inputValue).toBe('测试内容');
});

测试执行 #

• 执行所有组件测试：运行命令npm run test-ct
• 打开可视化调试界面：运行命令npm run test-ct -- --ui，可以直观看到组件渲染结果，单步调试测试用例

内容的提问来源于stack exchange，提问作者Julian Ivan