Skip to content

Commit ebde32e

Browse files
benmonroalexkrolick
authored andcommitted
Add testcafe-testing-library (#88)
* Create intro.md * doc: added testcafe-testing-library docs * doc: cleaned up some little details * added note for container
1 parent 351ce1a commit ebde32e

File tree

2 files changed

+65
-0
lines changed

2 files changed

+65
-0
lines changed
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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

website/sidebars.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"vue-testing-library/intro",
3636
"angular-testing-library/intro",
3737
"pptr-testing-library/intro",
38+
"testcafe-testing-library/intro",
3839
{
3940
"type": "subcategory",
4041
"label": "ReasonReact Testing Library",

0 commit comments

Comments
 (0)