# Support for Angular component test harnesses Service

> @badisi/wdio-harness is a 3rd party package, for more information please see [GitHub](https://github.com/Badisi/wdio-harness) | [npm](https://www.npmjs.com/package/@badisi/wdio-harness)

# @badisi/wdio-harness

🔬 *[WebdriverIO](https://webdriver.io) support for Angular component test harnesses.*<br />

[![npm version](https://img.shields.io/npm/v/@badisi/wdio-harness.svg?color=blue\&logo=npm)](https://www.npmjs.com/package/@badisi/wdio-harness)[![npm donwloads](https://img.shields.io/npm/dw/@badisi/wdio-harness.svg?color=7986CB\&logo=npm)](https://npmcharts.com/compare/@badisi/wdio-harness?minimal=true)[![license](https://img.shields.io/npm/l/@badisi/wdio-harness.svg?color=ff69b4)](https://github.com/Badisi/wdio-harness/blob/main/LICENSE)

[![build status](https://img.shields.io/github/actions/workflow/status/badisi/wdio-harness/ci_tests.yml?logo=github)](https://github.com/Badisi/wdio-harness/actions/workflows/ci_tests.yml)[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Badisi/wdio-harness/blob/main/CONTRIBUTING.md#-submitting-a-pull-request-pr)

***

#### Component test harnesses[​](#component-test-harnesses "Direct link to Component test harnesses")

> A component harness is a class that lets a test interact with a component via a supported API. Each harness's API interacts with a component the same way a user would. By using the harness API, a test insulates itself against updates to the internals of a component, such as changing its DOM structure. The idea for component harnesses comes from the [PageObject](https://martinfowler.com/bliki/PageObject.html) pattern commonly used for integration testing.

[More info...](https://material.angular.io/cdk/test-harnesses/overview)

***

## Installation[​](#installation "Direct link to Installation")

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

```
yarn add @badisi/wdio-harness --dev
```

## Usage[​](#usage "Direct link to Usage")

**Methods**

* `createHarnessEnvironment(rootElement)` - gets a HarnessLoader instance from a given element (defaults to body)
* `getHarness(harnessType, element)` - searches for an harness instance from a given ComponentHarness class and element
* `getHarness(harnessType)` - searches for an harness instance from a given ComponentHarness class
* `getHarness(query)` - searches for an harness instance from a given HarnessPredicate
* `getAllHarnesses(query)` - acts like getHarness, but returns an array of harness instances
* `waitForAngular()` - waits for Angular to finish bootstrapping

**Example**

```
import '@angular/compiler'; // required since Angular v21
import { MatDatepickerInputHarness } from '@angular/material/datepicker/testing';
import { getHarness } from '@badisi/wdio-harness';

describe('Angular Material Harness', () => {
    beforeEach(async () => {
        await browser.url('http://localhost: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');
    });
});
```

More examples [here](https://github.com/Badisi/wdio-harness/blob/main/projects/tests-e2e/harness.e2e.ts).

## Development[​](#development "Direct link to Development")

See the [developer docs](https://github.com/Badisi/wdio-harness/blob/main/DEVELOPER.md).

## Contributing[​](#contributing "Direct link to Contributing")

#### > Want to Help ?[​](#-want-to-help- "Direct link to > Want to Help ?")

Want to file a bug, contribute some code or improve documentation ? Excellent!

But please read up first on the guidelines for [contributing](https://github.com/Badisi/wdio-harness/blob/main/CONTRIBUTING.md), and learn about submission process, coding rules and more.

#### > Code of Conduct[​](#-code-of-conduct "Direct link to > Code of Conduct")

Please read and follow the [Code of Conduct](https://github.com/Badisi/wdio-harness/blob/main/CODE_OF_CONDUCT.md) and help me keep this project open and inclusive.