-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
127 lines (119 loc) · 59.5 KB
/
index.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Locating Shadow Dom Elements | CodeceptJS</title>
<meta name="generator" content="VuePress 1.9.10">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon/favicon.ico">
<link rel="manifest" href="/favicon/site.webmanifest">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#805ad5">
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P98R7LQ');</script>
<meta name="description" content="SuperCharged End 2 End Testing with WebDriver & Puppeteer">
<meta name="theme-color" content="#805ad5">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<link rel="preload" href="/assets/css/0.styles.1a6b889a.css" as="style"><link rel="preload" href="/assets/js/app.6cba3458.js" as="script"><link rel="preload" href="/assets/js/5.ff420ac6.js" as="script"><link rel="preload" href="/assets/js/1.c70685ea.js" as="script"><link rel="preload" href="/assets/js/95.6de81df3.js" as="script"><link rel="prefetch" href="/assets/js/100.fc075d43.js"><link rel="prefetch" href="/assets/js/101.cae6b813.js"><link rel="prefetch" href="/assets/js/102.8956f5c5.js"><link rel="prefetch" href="/assets/js/103.ce0ce5f0.js"><link rel="prefetch" href="/assets/js/104.bec09b01.js"><link rel="prefetch" href="/assets/js/105.92a77d38.js"><link rel="prefetch" href="/assets/js/106.f2491291.js"><link rel="prefetch" href="/assets/js/107.31d86252.js"><link rel="prefetch" href="/assets/js/108.6c8414a1.js"><link rel="prefetch" href="/assets/js/109.18923d9f.js"><link rel="prefetch" href="/assets/js/110.48ecea85.js"><link rel="prefetch" href="/assets/js/111.2c4c3078.js"><link rel="prefetch" href="/assets/js/112.9c76c571.js"><link rel="prefetch" href="/assets/js/113.5aea4985.js"><link rel="prefetch" href="/assets/js/114.97801e45.js"><link rel="prefetch" href="/assets/js/115.88b021d8.js"><link rel="prefetch" href="/assets/js/116.d0cfbba6.js"><link rel="prefetch" href="/assets/js/117.730543d6.js"><link rel="prefetch" href="/assets/js/12.a1725f6f.js"><link rel="prefetch" href="/assets/js/13.a6782b38.js"><link rel="prefetch" href="/assets/js/14.ea43b50c.js"><link rel="prefetch" href="/assets/js/15.df9825da.js"><link rel="prefetch" href="/assets/js/16.25cbe1cc.js"><link rel="prefetch" href="/assets/js/17.4f8def75.js"><link rel="prefetch" href="/assets/js/18.17f8f9c7.js"><link rel="prefetch" href="/assets/js/19.76e3b2e8.js"><link rel="prefetch" href="/assets/js/2.89a92fa3.js"><link rel="prefetch" href="/assets/js/20.e54653ad.js"><link rel="prefetch" href="/assets/js/21.7d54624c.js"><link rel="prefetch" href="/assets/js/22.e65379f3.js"><link rel="prefetch" href="/assets/js/23.a59d4566.js"><link rel="prefetch" href="/assets/js/24.683f87fe.js"><link rel="prefetch" href="/assets/js/25.97e55767.js"><link rel="prefetch" href="/assets/js/26.52d000b1.js"><link rel="prefetch" href="/assets/js/27.8d189b77.js"><link rel="prefetch" href="/assets/js/28.a0ec19a0.js"><link rel="prefetch" href="/assets/js/29.25166714.js"><link rel="prefetch" href="/assets/js/3.188649f0.js"><link rel="prefetch" href="/assets/js/30.f52df054.js"><link rel="prefetch" href="/assets/js/31.18843188.js"><link rel="prefetch" href="/assets/js/32.d39aa3cb.js"><link rel="prefetch" href="/assets/js/33.5dfd09f2.js"><link rel="prefetch" href="/assets/js/34.ff30141f.js"><link rel="prefetch" href="/assets/js/35.db84cbc0.js"><link rel="prefetch" href="/assets/js/36.722e0c70.js"><link rel="prefetch" href="/assets/js/37.f287aa22.js"><link rel="prefetch" href="/assets/js/38.6527e5dc.js"><link rel="prefetch" href="/assets/js/39.cddbef30.js"><link rel="prefetch" href="/assets/js/4.64d49130.js"><link rel="prefetch" href="/assets/js/40.42bb2686.js"><link rel="prefetch" href="/assets/js/41.fa23a2a0.js"><link rel="prefetch" href="/assets/js/42.78eb1abc.js"><link rel="prefetch" href="/assets/js/43.89496a6b.js"><link rel="prefetch" href="/assets/js/44.bc71b893.js"><link rel="prefetch" href="/assets/js/45.c66af0c7.js"><link rel="prefetch" href="/assets/js/46.1dcd8f21.js"><link rel="prefetch" href="/assets/js/47.a0e71afd.js"><link rel="prefetch" href="/assets/js/48.7dbf7c4a.js"><link rel="prefetch" href="/assets/js/49.2c966b62.js"><link rel="prefetch" href="/assets/js/50.577eae98.js"><link rel="prefetch" href="/assets/js/51.226daa48.js"><link rel="prefetch" href="/assets/js/52.b396ae9b.js"><link rel="prefetch" href="/assets/js/53.a5f33c23.js"><link rel="prefetch" href="/assets/js/54.43e74b32.js"><link rel="prefetch" href="/assets/js/55.3c124a47.js"><link rel="prefetch" href="/assets/js/56.8e1e8455.js"><link rel="prefetch" href="/assets/js/57.c18e88f8.js"><link rel="prefetch" href="/assets/js/58.b24af6b8.js"><link rel="prefetch" href="/assets/js/59.8b7ae1ea.js"><link rel="prefetch" href="/assets/js/6.7d4294fe.js"><link rel="prefetch" href="/assets/js/60.0e683874.js"><link rel="prefetch" href="/assets/js/61.43202682.js"><link rel="prefetch" href="/assets/js/62.92fee4c5.js"><link rel="prefetch" href="/assets/js/63.8c60fbef.js"><link rel="prefetch" href="/assets/js/64.51495e96.js"><link rel="prefetch" href="/assets/js/65.91c21c0a.js"><link rel="prefetch" href="/assets/js/66.b4ea49f8.js"><link rel="prefetch" href="/assets/js/67.0455b8bc.js"><link rel="prefetch" href="/assets/js/68.1054e301.js"><link rel="prefetch" href="/assets/js/69.4bfad59e.js"><link rel="prefetch" href="/assets/js/7.f6967540.js"><link rel="prefetch" href="/assets/js/70.40233151.js"><link rel="prefetch" href="/assets/js/71.9fb0ff20.js"><link rel="prefetch" href="/assets/js/72.095a2c59.js"><link rel="prefetch" href="/assets/js/73.3f0e2517.js"><link rel="prefetch" href="/assets/js/74.a6aa0a50.js"><link rel="prefetch" href="/assets/js/75.a5870449.js"><link rel="prefetch" href="/assets/js/76.749e3911.js"><link rel="prefetch" href="/assets/js/77.32b17a1d.js"><link rel="prefetch" href="/assets/js/78.d18fa0ec.js"><link rel="prefetch" href="/assets/js/79.e91b9835.js"><link rel="prefetch" href="/assets/js/8.0aa39b43.js"><link rel="prefetch" href="/assets/js/80.1a88d7fd.js"><link rel="prefetch" href="/assets/js/81.9c7f8280.js"><link rel="prefetch" href="/assets/js/82.00553b67.js"><link rel="prefetch" href="/assets/js/83.f600bcd6.js"><link rel="prefetch" href="/assets/js/84.29322aeb.js"><link rel="prefetch" href="/assets/js/85.6a3d521a.js"><link rel="prefetch" href="/assets/js/86.9379f88e.js"><link rel="prefetch" href="/assets/js/87.4d50fb05.js"><link rel="prefetch" href="/assets/js/88.1d58fa7c.js"><link rel="prefetch" href="/assets/js/89.169e9324.js"><link rel="prefetch" href="/assets/js/9.c74c342b.js"><link rel="prefetch" href="/assets/js/90.ff6adb89.js"><link rel="prefetch" href="/assets/js/91.4b898147.js"><link rel="prefetch" href="/assets/js/92.085c368c.js"><link rel="prefetch" href="/assets/js/93.6261148a.js"><link rel="prefetch" href="/assets/js/94.31bc941b.js"><link rel="prefetch" href="/assets/js/96.320f2ad2.js"><link rel="prefetch" href="/assets/js/97.933c36a0.js"><link rel="prefetch" href="/assets/js/98.fca57a33.js"><link rel="prefetch" href="/assets/js/99.17da4d4d.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.ea45d38c.js">
<link rel="stylesheet" href="/assets/css/0.styles.1a6b889a.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 448 512" class="icon"><path fill="#fff" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.svg" alt="CodeceptJS" class="logo"> <span class="site-name can-hide">CodeceptJS</span></a> <div class="links"><a target="_blank" rel="nofollow" href="https://opencollective.com/codeceptjs" class="can-hide">💖 Support Us</a>
<form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/quickstart.html" class="nav-link" data-v-34dbfd23>Quickstart</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Guides" class="dropdown-title"><span class="title">Guides</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/basics.html" class="nav-link" data-v-34dbfd23>Getting Started</a></li><li class="dropdown-subitem"><a href="/tutorial.html" class="nav-link" data-v-34dbfd23>Tutorial</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/playwright.html" class="nav-link" data-v-34dbfd23>Using Playwright</a></li><li class="dropdown-subitem"><a href="/webdriver.html" class="nav-link" data-v-34dbfd23>Using WebDriver</a></li><li class="dropdown-subitem"><a href="/puppeteer.html" class="nav-link" data-v-34dbfd23>Using Puppeteer</a></li><li class="dropdown-subitem"><a href="/api.html" class="nav-link" data-v-34dbfd23>API Testing</a></li><li class="dropdown-subitem"><a href="/testcafe.html" class="nav-link" data-v-34dbfd23>Using TestCafe</a></li><li class="dropdown-subitem"><a href="/mobile.html" class="nav-link" data-v-34dbfd23>Mobile Testing</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/locators.html" class="nav-link" data-v-34dbfd23>Locators</a></li><li class="dropdown-subitem"><a href="/pageobjects.html" class="nav-link" data-v-34dbfd23>Page Objects</a></li><li class="dropdown-subitem"><a href="/bdd.html" class="nav-link" data-v-34dbfd23>Behavior Driven Development</a></li><li class="dropdown-subitem"><a href="/typescript.html" class="nav-link" data-v-34dbfd23>TypeScript</a></li><li class="dropdown-subitem"><a href="/data.html" class="nav-link" data-v-34dbfd23>Data Management</a></li><li class="dropdown-subitem"><a href="/parallel.html" class="nav-link" data-v-34dbfd23>Parallel Execution</a></li><li class="dropdown-subitem"><a href="/heal.html" class="nav-link" data-v-34dbfd23>Self-Healing Tests</a></li><li class="dropdown-subitem"><a href="/ai.html" class="nav-link" data-v-34dbfd23>AI Testing 🪄</a></li><li class="dropdown-subitem"><a href="/reports.html" class="nav-link" data-v-34dbfd23>Reports</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pageobjects.html" class="nav-link" data-v-34dbfd23>Organizing Tests...</a></li><li class="dropdown-subitem"><a href="/advanced.html" class="nav-link" data-v-34dbfd23>Advanced Usage...</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Helpers" class="dropdown-title"><span class="title">Helpers</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><div class="dropdown-item-title">Web Testing</div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/helpers/Playwright.html" class="nav-link" data-v-34dbfd23>Playwright</a></li><li class="dropdown-subitem"><a href="/helpers/WebDriver.html" class="nav-link" data-v-34dbfd23>WebDriver</a></li><li class="dropdown-subitem"><a href="/helpers/Puppeteer.html" class="nav-link" data-v-34dbfd23>Puppeteer</a></li><li class="dropdown-subitem"><a href="/helpers/TestCafe.html" class="nav-link" data-v-34dbfd23>TestCafe</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title">Mobile Testing</div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/helpers/Appium.html" class="nav-link" data-v-34dbfd23>Appium</a></li><li class="dropdown-subitem"><a href="/helpers/Detox.html" class="nav-link" data-v-34dbfd23>Detox</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title">API Helpers</div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/helpers/REST.html" class="nav-link" data-v-34dbfd23>REST</a></li><li class="dropdown-subitem"><a href="/helpers/ApiDataFactory.html" class="nav-link" data-v-34dbfd23>ApiDataFactory</a></li><li class="dropdown-subitem"><a href="/helpers/GraphQL.html" class="nav-link" data-v-34dbfd23>GraphQL</a></li><li class="dropdown-subitem"><a href="/helpers/GraphQLDataFactory.html" class="nav-link" data-v-34dbfd23>GraphQLDataFactory</a></li><li class="dropdown-subitem"><a href="/helpers/JSONResponse.html" class="nav-link" data-v-34dbfd23>JSONResponse</a></li><li class="dropdown-subitem"><a href="/helpers/MockRequest.html" class="nav-link" data-v-34dbfd23>MockRequest</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title">Other Helpers</div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/helpers/OpenAI.html" class="nav-link" data-v-34dbfd23>OpenAI</a></li><li class="dropdown-subitem"><a href="/helpers/FileSystem.html" class="nav-link" data-v-34dbfd23>FileSystem</a></li><li class="dropdown-subitem"><a href="/helpers/Expect.html" class="nav-link" data-v-34dbfd23>Expect</a></li><li class="dropdown-subitem"><a href="/helpers/SoftExpectHelper.html" class="nav-link" data-v-34dbfd23>Soft Expect</a></li><li class="dropdown-subitem"><a href="/helpers/MockServer.html" class="nav-link" data-v-34dbfd23>MockServer</a></li><li class="dropdown-subitem"><a href="/community-helpers.html" class="nav-link" data-v-34dbfd23>Community Helpers</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/plugins.html" class="nav-link" data-v-34dbfd23>Plugins</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="API" class="dropdown-title"><span class="title">API</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/installation.html" class="nav-link" data-v-34dbfd23>Installation</a></li><li class="dropdown-item"><!----> <a href="/commands.html" class="nav-link" data-v-34dbfd23>Commands</a></li><li class="dropdown-item"><!----> <a href="/configuration.html" class="nav-link" data-v-34dbfd23>Configuration</a></li><li class="dropdown-item"><!----> <a href="/docker.html" class="nav-link" data-v-34dbfd23>Docker</a></li></ul></div></div><div class="nav-item"><a href="/changelog.html" class="nav-link" data-v-34dbfd23>Releases</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community" class="dropdown-title"><span class="title">Community</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/codeceptjs/CodeceptJS" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
GitHub
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/codeceptjs/CodeceptJS/discussions" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Discussions
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://bit.ly/codeceptjs-slack" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Slack Chat
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://codecept.discourse.group/" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Forum
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://twitter.com/codeceptjs" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Twitter
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://stackoverflow.com/questions/tagged/codeceptjs" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Stack Overflow
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/codeceptjs/CodeceptJS/wiki/Community-Helpers-&-Plugins" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Plugins & Helpers
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/codeceptjs/CodeceptJS/wiki/Examples" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Examples
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/codeceptjs/CodeceptJS/wiki/Videos" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Videos
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/Codeception/CodeceptJS/wiki/Books-&-Posts" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Posts
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://sdclabs.com/" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Commercial Support
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://sdclabs.com/trainings/web-automation-codeceptjs?utm_source=codecept.io&utm_medium=top_menu&utm_term=link&utm_campaign=reference" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Trainings
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://opencollective.com/codeceptjs" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Support us via OpenCollective!
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav></div></header> <header class="sub-bar"><div class="message"><a target="_blank" href="https://stand-with-ukraine.pp.ua">🇺🇦 CodeceptJS was created in Ukraine.
#StandWithUkraine</a> <p></p></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/quickstart.html" class="nav-link" data-v-34dbfd23>Quickstart</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Guides" class="dropdown-title"><span class="title">Guides</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/basics.html" class="nav-link" data-v-34dbfd23>Getting Started</a></li><li class="dropdown-subitem"><a href="/tutorial.html" class="nav-link" data-v-34dbfd23>Tutorial</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/playwright.html" class="nav-link" data-v-34dbfd23>Using Playwright</a></li><li class="dropdown-subitem"><a href="/webdriver.html" class="nav-link" data-v-34dbfd23>Using WebDriver</a></li><li class="dropdown-subitem"><a href="/puppeteer.html" class="nav-link" data-v-34dbfd23>Using Puppeteer</a></li><li class="dropdown-subitem"><a href="/api.html" class="nav-link" data-v-34dbfd23>API Testing</a></li><li class="dropdown-subitem"><a href="/testcafe.html" class="nav-link" data-v-34dbfd23>Using TestCafe</a></li><li class="dropdown-subitem"><a href="/mobile.html" class="nav-link" data-v-34dbfd23>Mobile Testing</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/locators.html" class="nav-link" data-v-34dbfd23>Locators</a></li><li class="dropdown-subitem"><a href="/pageobjects.html" class="nav-link" data-v-34dbfd23>Page Objects</a></li><li class="dropdown-subitem"><a href="/bdd.html" class="nav-link" data-v-34dbfd23>Behavior Driven Development</a></li><li class="dropdown-subitem"><a href="/typescript.html" class="nav-link" data-v-34dbfd23>TypeScript</a></li><li class="dropdown-subitem"><a href="/data.html" class="nav-link" data-v-34dbfd23>Data Management</a></li><li class="dropdown-subitem"><a href="/parallel.html" class="nav-link" data-v-34dbfd23>Parallel Execution</a></li><li class="dropdown-subitem"><a href="/heal.html" class="nav-link" data-v-34dbfd23>Self-Healing Tests</a></li><li class="dropdown-subitem"><a href="/ai.html" class="nav-link" data-v-34dbfd23>AI Testing 🪄</a></li><li class="dropdown-subitem"><a href="/reports.html" class="nav-link" data-v-34dbfd23>Reports</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pageobjects.html" class="nav-link" data-v-34dbfd23>Organizing Tests...</a></li><li class="dropdown-subitem"><a href="/advanced.html" class="nav-link" data-v-34dbfd23>Advanced Usage...</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Helpers" class="dropdown-title"><span class="title">Helpers</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><div class="dropdown-item-title">Web Testing</div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/helpers/Playwright.html" class="nav-link" data-v-34dbfd23>Playwright</a></li><li class="dropdown-subitem"><a href="/helpers/WebDriver.html" class="nav-link" data-v-34dbfd23>WebDriver</a></li><li class="dropdown-subitem"><a href="/helpers/Puppeteer.html" class="nav-link" data-v-34dbfd23>Puppeteer</a></li><li class="dropdown-subitem"><a href="/helpers/TestCafe.html" class="nav-link" data-v-34dbfd23>TestCafe</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title">Mobile Testing</div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/helpers/Appium.html" class="nav-link" data-v-34dbfd23>Appium</a></li><li class="dropdown-subitem"><a href="/helpers/Detox.html" class="nav-link" data-v-34dbfd23>Detox</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title">API Helpers</div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/helpers/REST.html" class="nav-link" data-v-34dbfd23>REST</a></li><li class="dropdown-subitem"><a href="/helpers/ApiDataFactory.html" class="nav-link" data-v-34dbfd23>ApiDataFactory</a></li><li class="dropdown-subitem"><a href="/helpers/GraphQL.html" class="nav-link" data-v-34dbfd23>GraphQL</a></li><li class="dropdown-subitem"><a href="/helpers/GraphQLDataFactory.html" class="nav-link" data-v-34dbfd23>GraphQLDataFactory</a></li><li class="dropdown-subitem"><a href="/helpers/JSONResponse.html" class="nav-link" data-v-34dbfd23>JSONResponse</a></li><li class="dropdown-subitem"><a href="/helpers/MockRequest.html" class="nav-link" data-v-34dbfd23>MockRequest</a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title">Other Helpers</div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/helpers/OpenAI.html" class="nav-link" data-v-34dbfd23>OpenAI</a></li><li class="dropdown-subitem"><a href="/helpers/FileSystem.html" class="nav-link" data-v-34dbfd23>FileSystem</a></li><li class="dropdown-subitem"><a href="/helpers/Expect.html" class="nav-link" data-v-34dbfd23>Expect</a></li><li class="dropdown-subitem"><a href="/helpers/SoftExpectHelper.html" class="nav-link" data-v-34dbfd23>Soft Expect</a></li><li class="dropdown-subitem"><a href="/helpers/MockServer.html" class="nav-link" data-v-34dbfd23>MockServer</a></li><li class="dropdown-subitem"><a href="/community-helpers.html" class="nav-link" data-v-34dbfd23>Community Helpers</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/plugins.html" class="nav-link" data-v-34dbfd23>Plugins</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="API" class="dropdown-title"><span class="title">API</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/installation.html" class="nav-link" data-v-34dbfd23>Installation</a></li><li class="dropdown-item"><!----> <a href="/commands.html" class="nav-link" data-v-34dbfd23>Commands</a></li><li class="dropdown-item"><!----> <a href="/configuration.html" class="nav-link" data-v-34dbfd23>Configuration</a></li><li class="dropdown-item"><!----> <a href="/docker.html" class="nav-link" data-v-34dbfd23>Docker</a></li></ul></div></div><div class="nav-item"><a href="/changelog.html" class="nav-link" data-v-34dbfd23>Releases</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community" class="dropdown-title"><span class="title">Community</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/codeceptjs/CodeceptJS" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
GitHub
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/codeceptjs/CodeceptJS/discussions" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Discussions
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://bit.ly/codeceptjs-slack" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Slack Chat
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://codecept.discourse.group/" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Forum
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://twitter.com/codeceptjs" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Twitter
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://stackoverflow.com/questions/tagged/codeceptjs" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Stack Overflow
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/codeceptjs/CodeceptJS/wiki/Community-Helpers-&-Plugins" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Plugins & Helpers
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/codeceptjs/CodeceptJS/wiki/Examples" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Examples
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/codeceptjs/CodeceptJS/wiki/Videos" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Videos
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/Codeception/CodeceptJS/wiki/Books-&-Posts" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Posts
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://sdclabs.com/" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Commercial Support
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://sdclabs.com/trainings/web-automation-codeceptjs?utm_source=codecept.io&utm_medium=top_menu&utm_term=link&utm_campaign=reference" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Trainings
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><div class="dropdown-item-title"></div> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://opencollective.com/codeceptjs" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
Support us via OpenCollective!
<span data-v-34dbfd23><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><div class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Web Testing</span> <span class="arrow open"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basics/" class="sidebar-link">Getting Started</a></li><li><a href="/ui/" class="sidebar-link">CodeceptUI</a></li><li><a href="/playwright/" class="sidebar-link">Testing with Playwright</a></li><li><a href="/webdriver/" class="sidebar-link">Testing with WebDriver</a></li><li><a href="/puppeteer/" class="sidebar-link">Testing with Puppeteer</a></li><li><a href="/api/" class="sidebar-link">API Testing</a></li><li><a href="/testcafe/" class="sidebar-link">Testing with TestCafe</a></li></ul></div></li><li><div class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Mobile Testing</span> <span class="arrow"></span></p> <!----></div></li><li><div class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Organizing Tests</span> <span class="arrow"></span></p> <!----></div></li><li><div class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Advanced Usage</span> <span class="arrow"></span></p> <!----></div></li></ul> </aside> <main class="page"><div class="article-title">Locating Shadow Dom Elements</div> <div class="post"><article><div class="theme-default-content content__default"><h1 id="locating-shadow-dom-elements"><a href="#locating-shadow-dom-elements" class="header-anchor">#</a> Locating Shadow Dom Elements</h1> <blockquote><p>ℹ Shadow DOM locators is supported only in WebDriver helper</p></blockquote> <p>Shadow DOM is one of the key browser features that make up web components. Web components are a really great way to build reusable elements, and are able to scale all the way up to complete web applications. Style encapsulation, the feature that gives shadow DOM it's power, has been a bit of a pain when it comes to E2E or UI testing. Things just got a little easier though, as CodeceptJS introduced built-in support for shadow DOM via locators of type <code>shadow</code>. Let's dig into what they're all about.</p> <p>Generated HTML code may often look like this (ref: <a href="https://github.com/salesforce/lwc" target="_blank" rel="noopener noreferrer">Salesforce's Lighting Web Components<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>):</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator"><</span>body<span class="token operator">></span>
<span class="token operator"><</span>my<span class="token operator">-</span>app<span class="token operator">></span>
<span class="token operator"><</span>recipe<span class="token operator">-</span>hello<span class="token operator">></span>
<span class="token operator"><</span>button<span class="token operator">></span>Click Me<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>recipe<span class="token operator">-</span>hello<span class="token operator">></span>
<span class="token operator"><</span>recipe<span class="token operator">-</span>hello<span class="token operator">-</span>binding<span class="token operator">></span>
<span class="token operator"><</span>ui<span class="token operator">-</span>input<span class="token operator">></span>
<span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"input"</span><span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ui<span class="token operator">-</span>input<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>recipe<span class="token operator">-</span>hello<span class="token operator">-</span>binding<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>my<span class="token operator">-</span>app<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</code></pre></div><p>This uses custom elements, <code>my-app</code>, <code>recipe-hello</code>, <code>recipe-hello-binding</code> and <code>ui-input</code>. It's quite common that clickable elements are not actual <code>a</code> or <code>button</code> elements but custom elements. This way <code>I.click('Click Me!');</code> won't work, as well as <code>fillField('.input', 'value)</code>. Finding a correct locator for such cases turns to be almost impossible until <code>shadow</code> element support is added to CodeceptJS.</p> <h2 id="locate-shadow-dom"><a href="#locate-shadow-dom" class="header-anchor">#</a> Locate Shadow Dom</h2> <p>For Web Components or <a href="https://github.com/salesforce/lwc" target="_blank" rel="noopener noreferrer">Salesforce's Lighting Web Components<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> with Shadow DOM's, a special <code>shadow</code> locator is available. It allows to select an element by its shadow dom sequences and sequences are defined as an Array of <code>elements</code>. Elements defined in the array of <code>elements</code> must be in the ordered the shadow elements appear in the DOM.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span> <span class="token literal-property property">shadow</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'my-app'</span><span class="token punctuation">,</span> <span class="token string">'recipe-hello'</span><span class="token punctuation">,</span> <span class="token string">'button'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
<span class="token punctuation">{</span> <span class="token literal-property property">shadow</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'my-app'</span><span class="token punctuation">,</span> <span class="token string">'recipe-hello-binding'</span><span class="token punctuation">,</span> <span class="token string">'ui-input'</span><span class="token punctuation">,</span> <span class="token string">'input.input'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
</code></pre></div><p>In WebDriver, you can use shadow locators in any method where locator is required.</p> <p>For example, to fill value in <code>input</code> field or to click the <code>Click Me!</code> button, in above HTML code:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">fillField</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">shadow</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'my-app'</span><span class="token punctuation">,</span> <span class="token string">'recipe-hello-binding'</span><span class="token punctuation">,</span> <span class="token string">'ui-input'</span><span class="token punctuation">,</span> <span class="token string">'input.input'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">shadow</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'my-app'</span><span class="token punctuation">,</span> <span class="token string">'recipe-hello'</span><span class="token punctuation">,</span> <span class="token string">'button'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Feature</span><span class="token punctuation">(</span><span class="token string">'Shadow Dom Locators'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">Scenario</span><span class="token punctuation">(</span><span class="token string">'should fill input field within shadow elements'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span><span class="token constant">I</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// navigate to LWC webpage containing shadow dom</span>
<span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">amOnPage</span><span class="token punctuation">(</span><span class="token string">'https://recipes.lwc.dev/'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// click Click Me! button</span>
<span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">shadow</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'my-app'</span><span class="token punctuation">,</span> <span class="token string">'recipe-hello'</span><span class="token punctuation">,</span> <span class="token string">'button'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// fill the input field</span>
<span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">fillField</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">shadow</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'my-app'</span><span class="token punctuation">,</span> <span class="token string">'recipe-hello-binding'</span><span class="token punctuation">,</span> <span class="token string">'ui-input'</span><span class="token punctuation">,</span> <span class="token string">'input.input'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div></article></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/codeceptjs/codeceptjs/edit/3.x/docs/shadow.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/21/2020, 3:19:08 AM</span></div></div> <!----> <div class="banner" data-v-436508ca><a href="https://opencollective.com/codeceptjs" data-v-436508ca>CodeceptJS is on OpenCollective! Support us 💖</a></div> <footer data-v-5616cc4e><section data-v-5616cc4e><div class="col" data-v-5616cc4e><h4 data-v-5616cc4e>Docs</h4> <ul data-v-5616cc4e><li data-v-5616cc4e><a href="/quickstart" data-v-5616cc4e>Quickstart</a></li> <li data-v-5616cc4e><a href="/basics" data-v-5616cc4e>Getting Started</a></li> <li data-v-5616cc4e><a href="/playwright" data-v-5616cc4e>CodeceptJS & Playwright</a></li> <li data-v-5616cc4e><a href="/puppeteer" data-v-5616cc4e>CodeceptJS & WebDriver</a></li></ul></div> <div class="col" data-v-5616cc4e><h4 data-v-5616cc4e>Community</h4> <ul data-v-5616cc4e><li data-v-5616cc4e><a href="https://github.com/codeceptjs/CodeceptJS" data-v-5616cc4e>GitHub</a></li> <li data-v-5616cc4e><a href="https://github.com/codeceptjs/CodeceptJS/discussions" data-v-5616cc4e>GitHub discussions</a></li> <li data-v-5616cc4e><a href="https://bit.ly/chat-codeceptjs" data-v-5616cc4e>Slack Chat</a></li> <li data-v-5616cc4e><a href="https://codecept.discourse.group/" data-v-5616cc4e>Forum</a></li> <li data-v-5616cc4e><a href="https://twitter.com/codeceptjs" data-v-5616cc4e>Twitter</a></li></ul></div> <div class="col" data-v-5616cc4e><h4 class="important" data-v-5616cc4e>Commercial Support</h4> <ul data-v-5616cc4e><li data-v-5616cc4e><a href="https://sdclabs.com/codeceptjs?utm_source=codecept.io&utm_medium=footer&utm_term=link&utm_campaign=reference" data-v-5616cc4e>Consulting</a></li> <li data-v-5616cc4e><a href="https://sdclabs.com/trainings/web-automation-codeceptjs?utm_source=codecept.io&utm_medium=top_menu&utm_term=link&utm_campaign=reference" data-v-5616cc4e>Trainings</a></li> <li data-v-5616cc4e><a href="https://sdclabs.com/#services" data-v-5616cc4e>Hire Engineers</a></li></ul></div> <div class="col" data-v-5616cc4e><a href="https://testomat.io" data-v-5616cc4e><h4 data-v-5616cc4e>Try Testomat.io →</h4> <p data-v-5616cc4e>Powerful <b data-v-5616cc4e>Test Case Management</b> for CodeceptJS from its authors</p></a></div></section> <div class="copyright" data-v-5616cc4e><h5 data-v-5616cc4e>CodeceptJS - supercharged end 2 end testing framework for NodeJS</h5>
© 2025
</div></footer></main> <div class="sidebar" data-v-0dc4070a><div class="sidebar-wrapper" data-v-0dc4070a><h4 data-v-0dc4070a>More Information</h4> <p data-v-0dc4070a><a href="/videos" data-v-0dc4070a>Videos</a></p> <p data-v-0dc4070a><a href="/books" data-v-0dc4070a>Books & Posts</a></p> <p data-v-0dc4070a><a href="/examples" data-v-0dc4070a>Examples</a></p> <p data-v-0dc4070a><a href="https://codecept.discourse.group/c/cookbook" data-v-0dc4070a>Cookbook →</a></p> <hr data-v-0dc4070a> <p class="border" data-v-0dc4070a><a href="https://sdclabs.com/codeceptjs?utm_source=codecept.io&utm_medium=right&utm_term=link&utm_campaign=reference" class="dashed" data-v-0dc4070a>
Commercial Services →
</a></p> <p class="border" data-v-0dc4070a><a href="https://sdclabs.com/trainings/web-automation-codeceptjs?utm_source=codecept.io&utm_medium=rigth&utm_term=link&utm_campaign=reference" class="dashed" data-v-0dc4070a>
Trainings →
</a></p> <p class="border" data-v-0dc4070a><a href="https://testomat.io" class="dashed" data-v-0dc4070a>
Testomat.io →
</a><br data-v-0dc4070a> <small data-v-0dc4070a><b data-v-0dc4070a>Plan your end 2 end tests</b>, collaborate, synchronize with code & get reports!<br data-v-0dc4070a>
Join Testomat.io while it is in beta and get a huge discount!</small></p> <p class="border" data-v-0dc4070a><a href="https://opencollective.com/codeceptjs" class="dashed" data-v-0dc4070a>
Support us via OpenCollective!
</a></p></div></div></div><div class="global-ui"></div></div>
<script src="/assets/js/app.6cba3458.js" defer></script><script src="/assets/js/5.ff420ac6.js" defer></script><script src="/assets/js/1.c70685ea.js" defer></script><script src="/assets/js/95.6de81df3.js" defer></script>
</body>
</html>