You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+54-28Lines changed: 54 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,6 +11,7 @@
11
11
1.[Getting Started](#getting-started)
12
12
-[Install the packages](#install-the-packages)
13
13
-[Write a test](#write-a-test)
14
+
-[Use with Typescript](#use-with-typescript)
14
15
-[Visual testing with Argos](#visual-testing-with-argos)
15
16
2.[Recipes](#recipes)
16
17
-[Enhance testing with `expect-puppeteer` lib](#enhance-testing-with-expect-puppeteer-lib)
@@ -64,6 +65,59 @@ describe("Google", () => {
64
65
});
65
66
```
66
67
68
+
### Use with TypeScript
69
+
70
+
TypeScript is natively supported from v8.0.0, for previous versions, you have to use [community-provided types](https://github.com/DefinitelyTyped/DefinitelyTyped).
71
+
72
+
_Note : If you have upgraded to version v10.1.2 or above, we strongly recommend that you uninstall them :_
Native types definitions are available whether you use `@types/jest` or `@jest/globals` for [jest types](https://jestjs.io/docs/getting-started#type-definitions).
79
+
80
+
Once setup, import the jest-puppeteer modules in your test file, then write your test logic the same way you would in Javascript.
81
+
82
+
- If using `@types/jest` :
83
+
84
+
```ts
85
+
// import jest-puppeteer globals
86
+
import"jest-puppeteer";
87
+
import"expect-puppeteer";
88
+
89
+
describe("Google", ():void=> {
90
+
beforeAll(async ():Promise<void> => {
91
+
awaitpage.goto("https://google.com");
92
+
});
93
+
94
+
it('should display "google" text on page', async ():Promise<void> => {
95
+
awaitexpect(page).toMatchTextContent("google");
96
+
});
97
+
});
98
+
```
99
+
100
+
- If using `@jest/globals` :
101
+
102
+
```ts
103
+
// import jest types
104
+
import { expect, describe, beforeAll, it } from"@jest/globals";
105
+
106
+
// import jest-puppeteer globals
107
+
import"jest-puppeteer";
108
+
import"expect-puppeteer";
109
+
110
+
describe("Google", ():void=> {
111
+
beforeAll(async ():Promise<void> => {
112
+
awaitpage.goto("https://google.com");
113
+
});
114
+
115
+
it('should display "google" text on page', async ():Promise<void> => {
116
+
awaitexpect(page).toMatchTextContent("google");
117
+
});
118
+
});
119
+
```
120
+
67
121
### Visual testing with Argos
68
122
69
123
[Argos](https://argos-ci.com) is a powerful visual testing tool that allows to review visual changes introduced by each pull request.
@@ -486,34 +540,6 @@ beforeEach(async () => {
486
540
487
541
## Troubleshooting
488
542
489
-
### TypeScript
490
-
491
-
TypeScript is natively supported from v8.0.0, for previous versions, you have to use [community-provided types](https://github.com/DefinitelyTyped/DefinitelyTyped).
492
-
493
-
Note though that it still requires installation of the [type definitions for jest](https://www.npmjs.com/package/@types/jest) :
494
-
495
-
```bash
496
-
npm install --save-dev @types/jest
497
-
```
498
-
499
-
Once setup, import the modules to enable types resolution for the exposed globals, then write your test logic [the same way you would in Javascript](#recipes).
500
-
501
-
```ts
502
-
// import globals
503
-
import"jest-puppeteer";
504
-
import"expect-puppeteer";
505
-
506
-
describe("Google", ():void=> {
507
-
beforeAll(async ():Promise<void> => {
508
-
awaitpage.goto("https://google.com");
509
-
});
510
-
511
-
it('should display "google" text on page', async ():Promise<void> => {
512
-
awaitexpect(page).toMatchTextContent("google");
513
-
});
514
-
});
515
-
```
516
-
517
543
### CI Timeout
518
544
519
545
Most Continuous Integration (CI) platforms restrict the number of threads you can use. If you run multiple test suites, the tests may timeout due to Jest attempting to run Puppeteer in parallel, and the CI platform being unable to process all parallel jobs in time.
Copy file name to clipboardExpand all lines: packages/expect-puppeteer/README.md
+19-18Lines changed: 19 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,7 @@ Modify your Jest configuration:
24
24
25
25
Writing integration test is very hard, especially when you are testing a Single Page Applications. Data are loaded asynchronously and it is difficult to know exactly when an element will be displayed in the page.
26
26
27
-
[Puppeteer API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md) is great, but it is low level and not designed for integration testing.
27
+
[Puppeteer API](https://pptr.dev/api) is great, but it is low level and not designed for integration testing.
-`selector` <[string]|[MatchSelector](#MatchSelector)> A [selector] or a [MatchSelector](#MatchSelector) to match field
116
116
-`value` <[string]> Value to fill
117
117
-`options` <[Object]> Optional parameters
118
118
-`delay` <[number]> delay to pass to [the puppeteer `element.type` API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#elementhandletypetext-options)
-`selector` <[string]|[MatchSelector](#MatchSelector)> A [selector] or a [MatchSelector](#MatchSelector) to match form
130
130
-`values` <[Object]> Values to fill
131
131
-`options` <[Object]> Optional parameters
132
132
-`delay` <[number]> delay to pass to [the puppeteer `element.type` API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#elementhandletypetext-options)
-`matcher` <[string]|[RegExp]> A text or a RegExp to match in page
147
147
-`options` <[Object]> Optional parameters
148
148
-`polling` <[string]|[number]> An interval at which the `pageFunction` is executed, defaults to `raf`. If `polling` is a number, then it is treated as an interval in milliseconds at which the function would be executed. If `polling` is a string, then it can be one of the following values:
-`selector` <[string]|[MatchSelector](#MatchSelector)> A [selector] or a [MatchSelector](#MatchSelector) to match element
167
167
-`options` <[Object]> Optional parameters
168
168
-`polling` <[string]|[number]> An interval at which the `pageFunction` is executed, defaults to `raf`. If `polling` is a number, then it is treated as an interval in milliseconds at which the function would be executed. If `polling` is a string, then it can be one of the following values:
169
169
-`raf` - to constantly execute `pageFunction` in `requestAnimationFrame` callback. This is the tightest polling mode which is suitable to observe styling changes.
0 commit comments