\n\n\n\n#### Component test harnesses\n\n> 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.\n\n[More info...](https://material.angular.io/cdk/test-harnesses/overview)\n\n\n\n## Installation\n\n```sh\nnpm install @badisi/wdio-harness --save-dev\n```\n\n```sh\nyarn add @badisi/wdio-harness --dev\n```\n\n\n## Usage\n\n__Methods__\n\n- `createHarnessEnvironment(rootElement)` - gets a HarnessLoader instance from a given element (defaults to body)\n- `getHarness(harnessType, element)` - searches for an harness instance from a given ComponentHarness class and element\n- `getHarness(harnessType)` - searches for an harness instance from a given ComponentHarness class\n- `getHarness(query)` - searches for an harness instance from a given HarnessPredicate\n- `getAllHarnesses(query)` - acts like getHarness, but returns an array of harness instances\n- `waitForAngular()` - waits for Angular to finish bootstrapping\n\n__Example__\n\n```ts\nimport '@angular/compiler'; // required since Angular v21\nimport { MatDatepickerInputHarness } from '@angular/material/datepicker/testing';\nimport { getHarness } from '@badisi/wdio-harness';\n\ndescribe('Angular Material Harness', () => {\n beforeEach(async () => {\n await browser.url('http://localhost:4200');\n });\n\n it('MatDatePicker', async () => {\n const datepicker = await getHarness(MatDatepickerInputHarness.with({ selector: '#demo-datepicker-input' }));\n\n await datepicker.setValue('9/27/1954');\n expect(await datepicker.getValue()).withContext('Date should be 9/27/1954').toBe('9/27/1954');\n\n await datepicker.openCalendar();\n const calendar = await datepicker.getCalendar();\n await calendar.next();\n await calendar.selectCell({ text: '20' });\n expect(await datepicker.getValue()).withContext('Date should be 10/20/1954').toBe('10/20/1954');\n });\n});\n```\n\nMore examples [here][examples].\n\n\n## Development\n\nSee the [developer docs][developer].\n\n\n## Contributing\n\n#### > Want to Help ?\n\nWant to file a bug, contribute some code or improve documentation ? Excellent!\n\nBut please read up first on the guidelines for [contributing][contributing], and learn about submission process, coding rules and more.\n\n#### > Code of Conduct\n\nPlease read and follow the [Code of Conduct][codeofconduct] and help me keep this project open and inclusive.\n\n\n\n\n[developer]: https://github.com/Badisi/wdio-harness/blob/main/DEVELOPER.md\n[contributing]: https://github.com/Badisi/wdio-harness/blob/main/CONTRIBUTING.md\n[codeofconduct]: https://github.com/Badisi/wdio-harness/blob/main/CODE_OF_CONDUCT.md\n[examples]: https://github.com/Badisi/wdio-harness/blob/main/projects/tests-e2e/harness.e2e.ts\n","readmeFilename":"README.md"}
![\"npm](\"https://img.shields.io/npm/v/@badisi/wdio-harness.svg?color=blue&logo=npm\")
\n \n ![\"npm](\"https://img.shields.io/npm/dw/@badisi/wdio-harness.svg?color=7986CB&logo=npm\")
\n \n ![\"license\"](\"https://img.shields.io/npm/l/@badisi/wdio-harness.svg?color=ff69b4\")
\n![\"build](\"https://img.shields.io/github/actions/workflow/status/badisi/wdio-harness/ci_tests.yml?logo=github\")
![\"PRs](\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\"){kind=icon}