-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
image-compare.html
416 lines (412 loc) · 50.7 KB
/
image-compare.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
<!doctype html>
<html lang="en" dir="ltr" class="plugin-pages plugin-id-default" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<title data-rh="true">WebdriverIO · Next-gen browser and mobile automation test framework for Node.js | WebdriverIO
</title>
<meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1">
<meta data-rh="true" property="og:image" content="https://webdriver.io/img/logo-webdriver-io.png">
<meta data-rh="true" name="twitter:image" content="https://webdriver.io/img/logo-webdriver-io.png">
<meta data-rh="true" property="og:url" content="https://webdriver.io/">
<meta data-rh="true" property="og:locale" content="en">
<meta data-rh="true" name="twitter:card" content="summary">
<meta data-rh="true" property="og:title"
content="WebdriverIO · Next-gen browser and mobile automation test framework for Node.js | WebdriverIO">
<link data-rh="true" rel="icon" href="images/favicon.png">
<link data-rh="true" rel="canonical" href="index.html">
<link data-rh="true" rel="alternate" href="index.html" hreflang="en">
<link data-rh="true" rel="alternate" href="index.html" hreflang="x-default">
<link rel="icon" href="images/logo-webdriver-io.png">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="rgb(234, 90, 7)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#000">
<link rel="apple-touch-icon" href="images/logo-webdriver-io.png">
<link rel="mask-icon" href="https://webdriver.io/img/logo-webdriver-io.svg" color="rgb(234, 90, 7)">
<meta name="msapplication-TileImage" content="/img/logo-webdriver-io.png">
<meta name="msapplication-TileColor" content="#000">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=block">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=block">
<script src="https://buttons.github.io/buttons.js"></script>
<link rel="stylesheet" href="css/image-compare.css">
</head>
<body class="navigation-with-keyboard">
<div id="__docusaurus">
<nav aria-label="Main" class="navbar navbar--fixed-top">
<div class="navbar__inner">
<div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false"
class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30"
aria-hidden="true">
<path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"
d="M4 7h22M4 15h22M4 23h22"></path>
</svg></button><a class="navbar__brand" href="#">
<div class="navbar__logo"><img
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+TG9nbyBSZWd1bGFyPC90aXRsZT4KICAgIDxnIGlkPSJMb2dvLVJlZ3VsYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNFQTU5MDYiIHg9IjAiIHk9IjAiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgcng9IjUiPjwvcmVjdD4KICAgICAgICA8cGF0aCBkPSJNOCwxNiBMOCw0OCBMNiw0OCBMNiwxNiBMOCwxNiBaIE00MywxNiBDNTEuODM2NTU2LDE2IDU5LDIzLjE2MzQ0NCA1OSwzMiBDNTksNDAuODM2NTU2IDUxLjgzNjU1Niw0OCA0Myw0OCBDMzQuMTYzNDQ0LDQ4IDI3LDQwLjgzNjU1NiAyNywzMiBDMjcsMjMuMTYzNDQ0IDM0LjE2MzQ0NCwxNiA0MywxNiBaIE0yNywxNiBMMTQuMTA2LDQ3Ljk5OTIwNzggTDExLjk5OSw0Ny45OTkyMDc4IEwyNC44OTQsMTYgTDI3LDE2IFogTTQzLDE4IEMzNS4yNjgwMTM1LDE4IDI5LDI0LjI2ODAxMzUgMjksMzIgQzI5LDM5LjczMTk4NjUgMzUuMjY4MDEzNSw0NiA0Myw0NiBDNTAuNzMxOTg2NSw0NiA1NywzOS43MzE5ODY1IDU3LDMyIEM1NywyNC4yNjgwMTM1IDUwLjczMTk4NjUsMTggNDMsMTggWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg=="
alt="WebdriverIO" class="themedComponent_mlkZ themedComponent--light_NVdE"><img
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+TG9nbyBSZWd1bGFyPC90aXRsZT4KICAgIDxnIGlkPSJMb2dvLVJlZ3VsYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNFQTU5MDYiIHg9IjAiIHk9IjAiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgcng9IjUiPjwvcmVjdD4KICAgICAgICA8cGF0aCBkPSJNOCwxNiBMOCw0OCBMNiw0OCBMNiwxNiBMOCwxNiBaIE00MywxNiBDNTEuODM2NTU2LDE2IDU5LDIzLjE2MzQ0NCA1OSwzMiBDNTksNDAuODM2NTU2IDUxLjgzNjU1Niw0OCA0Myw0OCBDMzQuMTYzNDQ0LDQ4IDI3LDQwLjgzNjU1NiAyNywzMiBDMjcsMjMuMTYzNDQ0IDM0LjE2MzQ0NCwxNiA0MywxNiBaIE0yNywxNiBMMTQuMTA2LDQ3Ljk5OTIwNzggTDExLjk5OSw0Ny45OTkyMDc4IEwyNC44OTQsMTYgTDI3LDE2IFogTTQzLDE4IEMzNS4yNjgwMTM1LDE4IDI5LDI0LjI2ODAxMzUgMjksMzIgQzI5LDM5LjczMTk4NjUgMzUuMjY4MDEzNSw0NiA0Myw0NiBDNTAuNzMxOTg2NSw0NiA1NywzOS43MzE5ODY1IDU3LDMyIEM1NywyNC4yNjgwMTM1IDUwLjczMTk4NjUsMTggNDMsMTggWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg=="
alt="WebdriverIO" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div>
</a><a class="navbar__item navbar__link" href="#">Docs</a><a class="navbar__item navbar__link"
href="#">API</a><a class="navbar__item navbar__link" href="#">Blog</a><a
class="navbar__item navbar__link" href="#">Contribute</a><a class="navbar__item navbar__link"
href="#">Community</a><a class="navbar__item navbar__link" href="#">Sponsor</a></div>
<div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="#">v8</a>
<div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#"
aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link"><svg
viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" class="iconLanguage_nlXk">
<path fill="currentColor"
d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z">
</path>
</svg>English</a>
<ul class="dropdown__menu">
<li><a href="#" class="dropdown__link dropdown__link--active" lang="en">English</a></li>
<li><a href="#" class="dropdown__link" lang="de">Deutsch</a></li>
<li><a href="#" class="dropdown__link" lang="es">Español</a></li>
<li><a href="#" class="dropdown__link" lang="hi">हिन्दी</a></li>
<li><a href="#" class="dropdown__link" lang="fr">Français</a></li>
<li><a href="#" class="dropdown__link" lang="uk">Українська</a></li>
<li><a href="#" class="dropdown__link" lang="fa">فارس ی</a></li>
<li><a href="#" class="dropdown__link" lang="ta">தமிழ்</a></li>
<li>
<hr style="margin: 0.3rem 0;">
</li>
<li><a href="#" rel="noopener noreferrer" class="dropdown__link">Help Us Translate<svg
width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"
class="iconExternalLink_nPIU">
<path fill="currentColor"
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
</path>
</svg></a></li>
</ul>
</div><a href="#" class="navbar__item navbar__link header-github-link"
aria-label="GitHub repository"></a><a href="#"
class="navbar__item navbar__link header-twitter-link"
aria-label="@webdriverio on Twitter"></a><a href="#" target="_blank" rel="noopener noreferrer"
class="navbar__item navbar__link header-youtube-link"
aria-label="@webdriverio on YouTube"></a><a href="#" rel="noopener noreferrer"
class="navbar__item navbar__link header-discord-link" aria-label="Support Chat on Discord"></a>
<div class="toggle_vylO colorModeToggle_DEke"><button
class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled=""
title="Switch between dark and light mode (currently light mode)"
aria-label="Switch between dark and light mode (currently light mode)"
aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24"
class="lightToggleIcon_pyhR">
<path fill="currentColor"
d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z">
</path>
</svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR">
<path fill="currentColor"
d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z">
</path>
</svg></button></div>
</div>
</div>
<div role="presentation" class="navbar-sidebar__backdrop"></div>
</nav>
<div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
<header class="hero hero--primary heroBanner_UJJx">
<div class="container">
<h1 class="hero__title">
<img src="images/wdio-logo.png" alt="WebdriverIO" class="hero__title-logo" />
</h1>
<p class="hero__subtitle">Next-gen browser and mobile automation test framework for Node.js</p>
<div class="buttons_pzbO"><a
class="button button--outline button--secondary button--lg getStarted_Sjon" href="#">Get
Started</a><a class="button button--outline button--secondary button--lg getStarted_Sjon"
href="#">Why WebdriverIO?</a><a href="#"
class="button button--outline button--secondary button--lg getStarted_Sjon">View on
GitHub</a><a href="#" rel="noopener noreferrer"
class="button button--outline button--secondary button--lg getStarted_Sjon">Watch on
YouTube</a></div>
<div class="features_vqN4">
<div class="feature_G9wp">
<div class="icon_cOHH">🌎</div>
<h3>Test in Real Environments</h3>
<p>WebdriverIO allows you to test in actual browser or mobile devices used by your users.
</p>
</div>
<div class="feature_G9wp">
<div class="icon_cOHH">🔩</div>
<h3>Versatile and Feature Rich</h3>
<p>Use WebdriverIO for full e2e or unit and component testing in the browser.</p>
</div>
<div class="feature_G9wp">
<div class="icon_cOHH">💤</div>
<h3>Auto Wait</h3>
<p>WebdriverIO automatically waits for elements to appear before interacting with them.</p>
</div>
<div class="feature_G9wp">
<div class="icon_cOHH">📒</div>
<h3>Based on Web Standards</h3>
<p>Cross browser support via automation through <a href="#" target="_blank"
rel="noopener noreferrer">WebDriver</a> and <a href="#"
rel="noopener noreferrer">WebDriver Bidi</a>.</p>
</div>
<div class="feature_G9wp">
<div class="icon_cOHH">📱</div>
<h3>Native Mobile Support</h3>
<p>Run WebdriverIO on real mobile devices, smart TVs or other IoT devices through <a
href="#">Appium</a>.</p>
</div>
<div class="feature_G9wp">
<div class="icon_cOHH">🫂</div>
<h3>Committed Community</h3>
<p>Running a <a href="#" rel="noopener noreferrer">support channel</a> with over 8k members
and a rich
ecosystem of community maintained plugins.</p>
</div>
</div>
</div>
</header>
<main>
<section class="highlightSection darkSection_RPTb darkSection">
<div class="container">
<div class="row">
<div class="col col--6 featureImage_ZbBX">
<div class="language-js codeBlockContainer_Ckt0 theme-code-block"
style="--prism-color:#393A34;--prism-background-color:#f6f8fa">
<div class="codeBlockContent_biex">
<pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar"
style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> $</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> expect </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@wdio/globals'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> render </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/vue'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">HelloWorld</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'../../src/components/HelloWorld.vue'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">describe</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Component Testing'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">it</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'increments value on click'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByText </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token maybe-class-name">HelloWorld</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> btn </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByText</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'count is 0'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// transform into WebdriverIO element</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> button </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">$</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">btn</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// interact with element like a real user</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> button</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">click</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> button</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">click</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByText</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'count is 2'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre>
<div class="buttonGroup__atx"><button type="button"
aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span
class="copyButtonIcons_eSgA" aria-hidden="true"><svg
viewBox="0 0 24 24" class="copyButtonIcon_y97N">
<path fill="currentColor"
d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z">
</path>
</svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
<path fill="currentColor"
d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z">
</path>
</svg></span></button></div>
</div>
</div>
</div>
<div class="col col--6 featureContent_iVgh">
<h3 class="featureTitle_r_DH">E2E and Unit / Component Testing in real Browser!</h3>
<p>WebdriverIO is an <b>all in one</b> framework for your web app development. It
enables you to run small and lightweight component tests as well as running e2e test
scenarios in the browser or on a mobile device. This guarantees that you to do the
testing in an environment <b>used by your users</b>.</p>
<p>It comes with smart selector strategies that simplify interacting e.g. with <b>React
components</b> or running deep selector queries with nested shadow DOM trees. As
interactions happen through a standardized automation protocol it is guaranteed they
behave natively and aren't just JavaScript emulated.</p>
<div>
<h4>Easy setup for web component testing with:</h4><a href="#"
class="frameworkLogos_QXHq"><img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K"
alt=""></a><a href="#" class="frameworkLogos_QXHq"><img
src="images/icons/vue.png" alt="Vue.js"></a><a href="#"
class="frameworkLogos_QXHq"><img src="images/icons/nuxt.svg" alt="Nuxt"></a><a
href="#" class="frameworkLogos_QXHq"><img src="images/icons/svelte.png"
alt="Svelte"></a><a href="#" class="frameworkLogos_QXHq"><img
src="images/icons/preact.png" alt="Preact"></a><a href="#"
class="frameworkLogos_QXHq"><img src="images/icons/solidjs.svg"
alt="SolidJS"></a><a href="#" class="frameworkLogos_QXHq"><img
src="images/icons/lit.svg" alt="Lit"></a><a href="#"
class="frameworkLogos_QXHq"><img src="images/icons/stencil.svg"
alt="Stencil"></a>
</div>
</div>
</div>
</div>
</section>
<section class="highlightSection">
<div class="container">
<div class="row">
<div class="col col--6 featureContent_iVgh featureContentReversed_rsLZ">
<h3 class="featureTitle_r_DH">Get Started With WebdriverIO within Seconds</h3>
<p>The WebdriverIO testrunner comes with a command line interface that provides a
powerful configuration utility and helps you to create your test setup in less than
a minute. It lets you pick from available test framework integrations and easily
allows to add all supported reporter and service plugins!<br><br>With just one
simple command you can set up a complete test suite:</p>
<div>
<div class="bash codeBlockContainer_Ckt0 theme-code-block"
style="--prism-color:#393A34;--prism-background-color:#f6f8fa">
<div class="codeBlockContent_biex">
<pre tabindex="0"
class="prism-code language-text codeBlock_bY9V thin-scrollbar"
style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ npm init wdio@latest ./</span><br></span></code></pre>
<div class="buttonGroup__atx"><button type="button"
aria-label="Copy code to clipboard" title="Copy"
class="clean-btn"><span class="copyButtonIcons_eSgA"
aria-hidden="true"><svg viewBox="0 0 24 24"
class="copyButtonIcon_y97N">
<path fill="currentColor"
d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z">
</path>
</svg><svg viewBox="0 0 24 24"
class="copyButtonSuccessIcon_LjdS">
<path fill="currentColor"
d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z">
</path>
</svg></span></button></div>
</div>
</div>
</div>
<p>Start learning more about WebdriverIO and how to get started <a href="#"
target="_blank" rel="noopener noreferrer">on YouTube</a>.</p>
</div>
<div class="col col--6 featureImage_ZbBX featureImageReversed_K3up">
<img src="images/create-wdio.png" alt="Create WebdriverIO Demo"
style="margin: 0px auto; display: block;">
</div>
</div>
</div>
</section>
<section class="highlightSection darkSection_RPTb darkSection">
<div class="container">
<div class="row">
<div class="col col--6 featureImage_ZbBX">
<img src="images/youtube.jpeg" width="560" height="315" />
</div>
<div class="col col--6 featureContent_iVgh">
<h3 class="featureTitle_r_DH">Watch Talks about WebdriverIO</h3>
<p>The community around WebdriverIO is actively speaking on various user groups or
conferences about specific topics around automated testing with WebdriverIO. Check
out this talk on <a href="#" target="_blank" rel="noopener noreferrer">My favourite
features of
WebdriverIO</a> by <a href="#" rel="noopener noreferrer">Julia Pottinger</a> at
<a href="#" rel="noopener noreferrer">Open Quality Conference</a>.
</p>
<p>There is also many YouTube Channels with useful tutorials by community members such
as <a href="#" target="_blank" rel="noopener noreferrer">Klamping</a>, <a href="#"
rel="noopener noreferrer">Seventeenth Sep</a> or <a href="#" target="_blank"
rel="noopener noreferrer">Automation Bro</a>.</p>
</div>
</div>
</div>
</section>
<section class="highlightSection">
<div class="container">
<div class="row">
<div class="col col--6 featureContent_iVgh featureContentReversed_rsLZ">
<h3 class="featureTitle_r_DH">Google Lighthouse Integration</h3>
<p>WebdriverIO not only runs automation based on the WebDriver protocol, it also
leverages native browser APIs to enable integrations to popular developer tools such
as <a href="#" rel="noopener noreferrer">Chrome DevTools</a> or <a href="#"
rel="noopener noreferrer">Google Lighthouse</a>. With the <a
href="#"><code>@wdio/devtools-service</code></a>
plugin you have access to commands for validating if you app is a valid PWA
application as well as to commands for capturing frontend performance metrics such
as `speedIndex` and others.</p>
<div>
<h4>Integration to developer tools such as:</h4><a href="#"
class="frameworkLogos_QXHq"><img src="images/icons/devtools.png"
alt="Chrome DevTools"></a><a href="#" class="frameworkLogos_QXHq"><img
src="images/icons/lighthouse-logo.svg" alt="Google Lighthouse"></a><a
href="#" class="frameworkLogos_QXHq"><img src="images/icons/axe.png"
alt="Axe Accessibility Engine"></a>
</div>
</div>
<div class="col col--6 featureImage_ZbBX featureImageReversed_K3up">
<div class="language-js codeBlockContainer_Ckt0 theme-code-block"
style="--prism-color:#393A34;--prism-background-color:#f6f8fa">
<div class="codeBlockContent_biex">
<pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar"
style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">emulateDevice</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'iPhone X'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">enablePerformanceAudits</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">networkThrottling</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'Good 3G'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">cacheEnabled</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">formFactor</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'mobile'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// open application under test</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">url</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'https://localhost:3000'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">expect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getMetrics</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">firstMeaningfulPaint</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">toBeBelow</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">2500</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> pwaCheckResult </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">checkPWA</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">expect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">pwaCheckResult</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">passed</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">toBe</span><span class="token punctuation" style="color:#393A34">(</span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre>
<div class="buttonGroup__atx"><button type="button"
aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span
class="copyButtonIcons_eSgA" aria-hidden="true"><svg
viewBox="0 0 24 24" class="copyButtonIcon_y97N">
<path fill="currentColor"
d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z">
</path>
</svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
<path fill="currentColor"
d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z">
</path>
</svg></span></button></div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<footer class="footer footer--dark">
<div class="container container-fluid">
<div class="row footer__links">
<div class="col footer__col">
<div class="footer__title">Docs</div>
<ul class="footer__items clean-list">
<li class="footer__item"><a class="footer__link-item" href="#">Getting Started</a></li>
<li class="footer__item"><a class="footer__link-item" href="#">API Reference</a></li>
<li class="footer__item"><a class="footer__link-item" href="#">Contribute</a></li>
<li class="footer__item"><a class="footer__link-item" href="#">Help</a></li>
</ul>
</div>
<div class="col footer__col">
<div class="footer__title">Community</div>
<ul class="footer__items clean-list">
<li class="footer__item"><a href="#" target="_blank" rel="noopener noreferrer"
class="footer__link-item">Stack
Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24"
class="iconExternalLink_nPIU">
<path fill="currentColor"
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
</path>
</svg></a></li>
<li class="footer__item"><a href="#" rel="noopener noreferrer"
class="footer__link-item">Support Chat<svg width="13.5" height="13.5"
aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
<path fill="currentColor"
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
</path>
</svg></a></li>
<li class="footer__item"><a href="#" target="_blank" rel="noopener noreferrer"
class="footer__link-item">Slack<svg width="13.5" height="13.5" aria-hidden="true"
viewBox="0 0 24 24" class="iconExternalLink_nPIU">
<path fill="currentColor"
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
</path>
</svg></a></li>
<li class="footer__item"><a href="#" rel="noopener noreferrer"
class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true"
viewBox="0 0 24 24" class="iconExternalLink_nPIU">
<path fill="currentColor"
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
</path>
</svg></a></li>
</ul>
</div>
<div class="col footer__col">
<div class="footer__title">More</div>
<ul class="footer__items clean-list">
<li class="footer__item"><a class="footer__link-item" href="#">Blog</a></li>
<li class="footer__item"><a class="footer__link-item" href="#">Sponsor</a></li>
<li class="footer__item"><a href="#" target="_blank" rel="noopener noreferrer"
class="footer__link-item">Team<svg width="13.5" height="13.5" aria-hidden="true"
viewBox="0 0 24 24" class="iconExternalLink_nPIU">
<path fill="currentColor"
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
</path>
</svg></a></li>
<li class="footer__item"><a href="#" rel="noopener noreferrer"
class="footer__link-item">YouTube<svg width="13.5" height="13.5" aria-hidden="true"
viewBox="0 0 24 24" class="iconExternalLink_nPIU">
<path fill="currentColor"
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
</path>
</svg></a></li>
</ul>
</div>
</div>
<div class="footer__bottom text--center">
<div class="margin-bottom--sm"><a href="#" class="footerLogoLink_BH7S"><img
src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color-dark_background.svg"
alt="OpenJS Foundation Logo"
class="footer__logo themedComponent_mlkZ themedComponent--light_NVdE"><img
src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color-dark_background.svg"
alt="OpenJS Foundation Logo"
class="footer__logo themedComponent_mlkZ themedComponent--dark_xIcU"></a></div>
<div class="footer__copyright">Copyright © 2023 OpenJS Foundation</div>
</div>
</div>
</footer>
</div>
</body>
</html>