|
| 1 | +--- |
| 2 | +id: intro |
| 3 | +title: Testcafe Testing Library |
| 4 | +--- |
| 5 | + |
| 6 | +[`testcafe-testing-library`][gh] allows the use of dom-testing queries within |
| 7 | +[Testcafe](https://devexpress.github.io/testcafe/) cross-browser end-to-end web |
| 8 | +testing. |
| 9 | + |
| 10 | +``` |
| 11 | +npm install --save-dev testcafe testcafe-testing-library |
| 12 | +``` |
| 13 | + |
| 14 | +- [testcafe-testing-library on GitHub][gh] |
| 15 | + |
| 16 | +## Usage |
| 17 | + |
| 18 | +`testcafe-testing-library` provides custom Selectors allowing you to query the |
| 19 | +dom. |
| 20 | + |
| 21 | +Add `testcafe-testing-library` to your test fixture's `beforeEach` hook: |
| 22 | + |
| 23 | +```javascript |
| 24 | +import { |
| 25 | + getByText, //or any other queries you want |
| 26 | + addTestcafeTestingLibrary, |
| 27 | +} from 'testcafe-testing-library' |
| 28 | + |
| 29 | +fixture`selectors`.beforeEach(addTestcafeTestingLibrary) |
| 30 | + .page`http://localhost:13370` |
| 31 | +``` |
| 32 | + |
| 33 | +You can now import & use `getBy`, `getAllBy`, `queryBy` and `queryAllBy` |
| 34 | +selectors in your tests. |
| 35 | +[See `dom-testing-library` API for reference](dom-testing-library/api-queries.md) |
| 36 | + |
| 37 | +## Examples |
| 38 | + |
| 39 | +To show some simple examples (from |
| 40 | +[https://github.com/benmonro/testcafe-testing-library/blob/master/tests/testcafe/selectors.js](https://github.com/benmonro/testcafe-testing-library/blob/master/tests/testcafe/selectors.js)): |
| 41 | + |
| 42 | +```javascript |
| 43 | +test('getByPlaceHolderText', async t => { |
| 44 | + await t.typeText( |
| 45 | + getByPlaceholderText('Placeholder Text'), |
| 46 | + 'Hello Placeholder' |
| 47 | + ) |
| 48 | +}) |
| 49 | +test('getByText', async t => { |
| 50 | + await t.click(getByText('getByText')) |
| 51 | +}) |
| 52 | + |
| 53 | +test('getByLabelText', async t => { |
| 54 | + await t.typeText( |
| 55 | + getByLabelText('Label For Input Labelled By Id'), |
| 56 | + 'Hello Input Labelled By Id' |
| 57 | + ) |
| 58 | +}) |
| 59 | +``` |
| 60 | + |
| 61 | +**_Note:_** The selectors come pre-bound to `document.body`, so no need to |
| 62 | +provide a container. |
| 63 | + |
| 64 | +[gh]: https://github.com/benmonro/testcafe-testing-library |
0 commit comments