跳至主要内容

Angular 组件测试工具 Service 支持

@badisi/wdio-harness 是一个第三方包,更多信息请参见GitHub | npm

@badisi/wdio-harness

🔬 WebdriverIO 支持 Angular 组件测试工具。

npm versionnpm donwloadslicense

build statusPRs welcome


组件测试工具

组件工具是一个类,它允许测试通过支持的 API 与组件进行交互。每个工具的 API 都以用户相同的方式与组件交互。通过使用工具 API,测试可以避免组件内部更新(例如更改其 DOM 结构)带来的影响。组件工具的想法来自页面对象模式,该模式通常用于集成测试。

更多信息


安装

npm install @badisi/wdio-harness --save-dev
yarn add @badisi/wdio-harness --dev

用法

方法

  • createHarnessEnvironment(rootElement) - 从给定元素(默认为 body)获取 HarnessLoader 实例
  • getHarness(harnessType, element) - 从给定的 ComponentHarness 类和元素中搜索工具实例
  • getHarness(harnessType) - 从给定的 ComponentHarness 类中搜索工具实例
  • getHarness(query) - 从给定的 HarnessPredicate 中搜索工具实例
  • getAllHarnesses(query) - 与 getHarness 类似,但返回一个工具实例数组
  • waitForAngular() - 等待 Angular 完成引导

示例

import { MatDatepickerInputHarness } from '@angular/material/datepicker/testing';
import { getHarness } from '@badisi/wdio-harness';

describe('Angular Material Harness', () => {
beforeEach(async () => {
await browser.url('https://127.0.0.1:4200');
});

it('MatDatePicker', async () => {
const datepicker = await getHarness(MatDatepickerInputHarness.with({ selector: '#demo-datepicker-input' }));

await datepicker.setValue('9/27/1954');
expect(await datepicker.getValue()).withContext('Date should be 9/27/1954').toBe('9/27/1954');

await datepicker.openCalendar();
const calendar = await datepicker.getCalendar();
await calendar.next();
await calendar.selectCell({ text: '20' });
expect(await datepicker.getValue()).withContext('Date should be 10/20/1954').toBe('10/20/1954');
});
});

更多示例此处

开发

请参阅开发人员文档

贡献

> 想帮忙?

想提交错误报告、贡献代码或改进文档?太棒了!

但请先阅读有关贡献的指南,并了解提交流程、编码规则等。

> 行为准则

请阅读并遵循行为准则,并帮助我保持这个项目的开放和包容性。

欢迎!我如何帮助您?

WebdriverIO AI Copilot