Skip to content

Commit 260eabb

Browse files
hawkeyexlhawkeyexl
committed
2 parents 14701b5 + cc3a85c commit 260eabb

File tree

10 files changed

+852
-172
lines changed

10 files changed

+852
-172
lines changed

‎docs/get-started/tutorials/TestExamples.zip‎

7.38 KB
Binary file not shown.

‎docs/get-started/tutorials/capture-screenshot.md‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
---
2+
description: Run a test that fills all fields in a form, then captures a screenshot of the result.
3+
---
4+
5+
# Capture screenshot
6+
7+
This example fills in all of the fields on the Watson and Holmes Intake Form, then captures a screenshot of the result for posterity.
8+
9+
To run the test:
10+
11+
1. Download the [TestExamples.zip](./TestExamples.zip) file and expand it on your local drive.
12+
2. In a terminal window, navigate to the `TestExamples` directory.
13+
3. Start your local server.
14+
15+
```shell
16+
live-server
17+
```
18+
19+
4. Enter the command
20+
21+
```shell
22+
npx doc-detective@dev -i form-filler2.json
23+
```
24+
25+
While the form is too large to fit on the computer screen, increasing the window and viewport settings allows you to capture the entire form in a single image.
26+
27+
![All fields completed.](./img/form-filled-2-complete.png)
28+
29+
## Code walkthrough
30+
31+
These are the notable additions to the script used in the [Fill in fields](fill-fields) tutorial.
32+
33+
To capture the full form, this example runs in _headless_ mode. The screenshot can then capture the entire virtual viewport.
34+
35+
```json
36+
"browsers": {
37+
"name": "chrome",
38+
"headless": true,
39+
"window": {
40+
"width": 1200,
41+
"height": 1500
42+
},
43+
"viewport": {
44+
"width": 1180,
45+
"height": 1480
46+
}
47+
}
48+
```
49+
50+
Filling in most of the fields is the same as filling in the First and Last Name values in the previous example. You find an element by its label, click the element, then type a value.
51+
52+
```json
53+
{
54+
"description": "Type in the Street Address",
55+
"find": {
56+
"elementText": "Street Address:",
57+
"click": true,
58+
"type": "123 Broadberry Lane"
59+
}
60+
},
61+
```
62+
63+
You use the same syntax to enter the value in a drop-down menu; for example, the Type of Case.
64+
65+
```json
66+
{
67+
"description": "Select the Type of Case",
68+
"find": {
69+
"elementText": "Type of Case:",
70+
"click": true,
71+
"type": "Blackmail"
72+
}
73+
},
74+
```
75+
76+
You can click a radio button directly by name.
77+
78+
```json
79+
{
80+
"description": "Click the Postal Mail button",
81+
"click": "Postal Mail"
82+
},
83+
```
84+
85+
Use the screenshot action with an output path to capture the state of the form once the fields are complete.
86+
87+
```json
88+
89+
{
90+
"description": "Capture a screenshot of the completed form.",
91+
"screenshot": "./output/form-filled-2-complete.png"
92+
},
93+
```
94+
95+
96+
## Complete code sample
97+
98+
```json
99+
{
100+
"tests": [
101+
{
102+
"runOn": [
103+
{
104+
"platforms": [
105+
"windows",
106+
"mac",
107+
"linux"
108+
],
109+
"browsers": {
110+
"name": "chrome",
111+
"headless": true,
112+
"window": {
113+
"width": 1200,
114+
"height": 1500
115+
},
116+
"viewport": {
117+
"width": 1180,
118+
"height": 1480
119+
}
120+
}
121+
}
122+
],
123+
"steps": [
124+
{
125+
"description": "Go to the specified URL",
126+
"goTo": "http://localhost:8080/watson_and_holmes_intake_form.html"
127+
},
128+
{
129+
"description": "Type in the First Name",
130+
"find": {
131+
"elementText": "First Name:",
132+
"click": true,
133+
"type": "Alphie"
134+
}
135+
},
136+
{
137+
"description": "Type in the Last Name",
138+
"find": {
139+
"elementText": "Last Name:",
140+
"click": true,
141+
"type": "Betaux"
142+
}
143+
},
144+
{
145+
"description": "Type in the Street Address",
146+
"find": {
147+
"elementText": "Street Address:",
148+
"click": true,
149+
"type": "123 Broadberry Lane"
150+
}
151+
},
152+
{
153+
"description": "Type in the City",
154+
"find": {
155+
"elementText": "City:",
156+
"click": true,
157+
"type": "London"
158+
}
159+
},
160+
{
161+
"description": "Type in the State/Province",
162+
"find": {
163+
"elementText": "State/Province:",
164+
"click": true,
165+
"type": "Greater London"
166+
}
167+
},
168+
{
169+
"description": "Type in the Postal Code",
170+
"find": {
171+
"elementText": "Postal Code:",
172+
"click": true,
173+
"type": "E1 6AN"
174+
}
175+
},
176+
{
177+
"description": "Type in the Country",
178+
"find": {
179+
"elementText": "Country:",
180+
"click": true,
181+
"type": "United Kingdom"
182+
}
183+
},
184+
{
185+
"description": "Type in the Email Address",
186+
"find": {
187+
"elementText": "Email Address:",
188+
"click": true,
189+
"type": "[email protected]"
190+
}
191+
},
192+
{
193+
"description": "Type in the Phone Number",
194+
"find": {
195+
"elementText": "Phone Number:",
196+
"click": true,
197+
"type": "020 7123 4567"
198+
}
199+
},
200+
{
201+
"description": "Select the Type of Case",
202+
"find": {
203+
"elementText": "Type of Case:",
204+
"click": true,
205+
"type": "Blackmail"
206+
}
207+
},
208+
{
209+
"description": "Type in the Case Description",
210+
"find": {
211+
"elementText": "Brief Description of Case:",
212+
"click": true,
213+
"type": "A mysterious case that needs solving."
214+
}
215+
},
216+
{
217+
"description": "Click the Postal Mail button",
218+
"click": "Postal Mail"
219+
},
220+
{
221+
"description": "Type in the Date of Inquiry",
222+
"find": {
223+
"elementText": "Date of Inquiry:",
224+
"click": true,
225+
"type": "02/18/1901"
226+
}
227+
},
228+
{
229+
"description": "Capture a screenshot of the completed form.",
230+
"screenshot": "./output/form-filled-2-complete.png"
231+
},
232+
{
233+
"description": "Pause long enough to see the changes.",
234+
"wait": 10000
235+
}
236+
]
237+
}
238+
]
239+
}
240+
```
241+
242+
Next step: [Record video](./record-video)

0 commit comments

Comments
 (0)