支援 Angular 組件測試 Harness 的服務

@badisi/wdio-harness 是一個第三方套件，如需更多資訊，請參閱 GitHub | npm

@badisi/wdio-harness

🔬 WebdriverIO 支援 Angular 組件測試 Harness。

---

組件測試 Harness

組件 Harness 是一個類別，可讓測試透過支援的 API 與組件互動。每個 Harness 的 API 都以使用者相同的方式與組件互動。透過使用 Harness API，測試可以隔離自己，以防組件內部更新，例如變更其 DOM 結構。組件 Harness 的概念來自於常用於整合測試的 PageObject 模式。

更多資訊

---

安裝

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

yarn add @badisi/wdio-harness --dev

使用方式

方法

• createHarnessEnvironment(rootElement) - 從給定的元素取得 HarnessLoader 實例 (預設為 body)
• getHarness(harnessType, element) - 從給定的 ComponentHarness 類別和元素搜尋 Harness 實例
• getHarness(harnessType) - 從給定的 ComponentHarness 類別搜尋 Harness 實例
• getHarness(query) - 從給定的 HarnessPredicate 搜尋 Harness 實例
• getAllHarnesses(query) - 作用類似 getHarness，但會傳回 Harness 實例的陣列
• 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');
    });
});

更多範例請參考這裡。

開發

請參閱開發人員文件。

貢獻

> 想幫忙嗎？

想回報錯誤、貢獻一些程式碼或改善文件嗎？太棒了！

但請先閱讀關於貢獻的指南，並了解提交程序、程式碼規則等等。

> 行為準則

請閱讀並遵循行為準則，並協助我保持此專案的開放和包容性。