-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathWebElement.html
More file actions
193 lines (185 loc) · 75.4 KB
/
WebElement.html
File metadata and controls
193 lines (185 loc) · 75.4 KB
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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>WebElement API | 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.76edccf7.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/30.f9c83925.js" as="script"><link rel="prefetch" href="/assets/js/100.3046625f.js"><link rel="prefetch" href="/assets/js/101.43292dd8.js"><link rel="prefetch" href="/assets/js/102.b5e9afc3.js"><link rel="prefetch" href="/assets/js/103.e82c3795.js"><link rel="prefetch" href="/assets/js/104.ce503461.js"><link rel="prefetch" href="/assets/js/105.886b8f80.js"><link rel="prefetch" href="/assets/js/106.fd52fbf3.js"><link rel="prefetch" href="/assets/js/107.d557e7ac.js"><link rel="prefetch" href="/assets/js/108.c352f781.js"><link rel="prefetch" href="/assets/js/109.3fac43b6.js"><link rel="prefetch" href="/assets/js/110.a5e66890.js"><link rel="prefetch" href="/assets/js/111.8fabdcab.js"><link rel="prefetch" href="/assets/js/112.0ab167b1.js"><link rel="prefetch" href="/assets/js/113.ae5949e5.js"><link rel="prefetch" href="/assets/js/114.4b3e17b9.js"><link rel="prefetch" href="/assets/js/115.32952a61.js"><link rel="prefetch" href="/assets/js/116.33205a9a.js"><link rel="prefetch" href="/assets/js/117.d9326ca6.js"><link rel="prefetch" href="/assets/js/118.30a9ef75.js"><link rel="prefetch" href="/assets/js/119.5439074d.js"><link rel="prefetch" href="/assets/js/12.a1725f6f.js"><link rel="prefetch" href="/assets/js/120.ca62cd15.js"><link rel="prefetch" href="/assets/js/121.9722afb2.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/31.9fb1f703.js"><link rel="prefetch" href="/assets/js/32.146fa06a.js"><link rel="prefetch" href="/assets/js/33.9e729b07.js"><link rel="prefetch" href="/assets/js/34.baa0d38d.js"><link rel="prefetch" href="/assets/js/35.f8e536ee.js"><link rel="prefetch" href="/assets/js/36.e062385f.js"><link rel="prefetch" href="/assets/js/37.45309496.js"><link rel="prefetch" href="/assets/js/38.1b9e2b51.js"><link rel="prefetch" href="/assets/js/39.4729b78a.js"><link rel="prefetch" href="/assets/js/4.64d49130.js"><link rel="prefetch" href="/assets/js/40.6b150b7b.js"><link rel="prefetch" href="/assets/js/41.0df71e85.js"><link rel="prefetch" href="/assets/js/42.d779a22b.js"><link rel="prefetch" href="/assets/js/43.4d3e9def.js"><link rel="prefetch" href="/assets/js/44.a4b72a01.js"><link rel="prefetch" href="/assets/js/45.eb733c3e.js"><link rel="prefetch" href="/assets/js/46.6286b7ec.js"><link rel="prefetch" href="/assets/js/47.6ad1fa63.js"><link rel="prefetch" href="/assets/js/48.cec93a95.js"><link rel="prefetch" href="/assets/js/49.1ee6e05f.js"><link rel="prefetch" href="/assets/js/50.828f26b1.js"><link rel="prefetch" href="/assets/js/51.1e50df10.js"><link rel="prefetch" href="/assets/js/52.6ac09324.js"><link rel="prefetch" href="/assets/js/53.94c40c08.js"><link rel="prefetch" href="/assets/js/54.ecdc93cc.js"><link rel="prefetch" href="/assets/js/55.ec55a810.js"><link rel="prefetch" href="/assets/js/56.b21c4277.js"><link rel="prefetch" href="/assets/js/57.76133b28.js"><link rel="prefetch" href="/assets/js/58.9fd7863a.js"><link rel="prefetch" href="/assets/js/59.aeb6233e.js"><link rel="prefetch" href="/assets/js/6.7d4294fe.js"><link rel="prefetch" href="/assets/js/60.a3ce0976.js"><link rel="prefetch" href="/assets/js/61.89486d5a.js"><link rel="prefetch" href="/assets/js/62.5cd4ff88.js"><link rel="prefetch" href="/assets/js/63.9802b476.js"><link rel="prefetch" href="/assets/js/64.813c12df.js"><link rel="prefetch" href="/assets/js/65.2831929e.js"><link rel="prefetch" href="/assets/js/66.2a93c6aa.js"><link rel="prefetch" href="/assets/js/67.cbcb6667.js"><link rel="prefetch" href="/assets/js/68.b243e80c.js"><link rel="prefetch" href="/assets/js/69.22340a29.js"><link rel="prefetch" href="/assets/js/7.f6967540.js"><link rel="prefetch" href="/assets/js/70.33ae53a0.js"><link rel="prefetch" href="/assets/js/71.bdf73aab.js"><link rel="prefetch" href="/assets/js/72.582428e5.js"><link rel="prefetch" href="/assets/js/73.cd04454d.js"><link rel="prefetch" href="/assets/js/74.572b65c0.js"><link rel="prefetch" href="/assets/js/75.3ebfccef.js"><link rel="prefetch" href="/assets/js/76.f4f47c10.js"><link rel="prefetch" href="/assets/js/77.ecff3508.js"><link rel="prefetch" href="/assets/js/78.73d01f5e.js"><link rel="prefetch" href="/assets/js/79.9124cb8f.js"><link rel="prefetch" href="/assets/js/8.0aa39b43.js"><link rel="prefetch" href="/assets/js/80.c088d7fe.js"><link rel="prefetch" href="/assets/js/81.556b9a69.js"><link rel="prefetch" href="/assets/js/82.7002841b.js"><link rel="prefetch" href="/assets/js/83.ec9d0e1c.js"><link rel="prefetch" href="/assets/js/84.52a34abd.js"><link rel="prefetch" href="/assets/js/85.630f12e7.js"><link rel="prefetch" href="/assets/js/86.23b12ee0.js"><link rel="prefetch" href="/assets/js/87.e924c445.js"><link rel="prefetch" href="/assets/js/88.647c1042.js"><link rel="prefetch" href="/assets/js/89.74ce559d.js"><link rel="prefetch" href="/assets/js/9.c74c342b.js"><link rel="prefetch" href="/assets/js/90.90450657.js"><link rel="prefetch" href="/assets/js/91.dfd3cf09.js"><link rel="prefetch" href="/assets/js/92.0757930d.js"><link rel="prefetch" href="/assets/js/93.18e80b5f.js"><link rel="prefetch" href="/assets/js/94.b12be38c.js"><link rel="prefetch" href="/assets/js/95.e1a27114.js"><link rel="prefetch" href="/assets/js/96.b8d8b40e.js"><link rel="prefetch" href="/assets/js/97.b4a41d97.js"><link rel="prefetch" href="/assets/js/98.0d08f15a.js"><link rel="prefetch" href="/assets/js/99.ae10f854.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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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">WebElement API</div> <div class="post"><article><div class="theme-default-content content__default"><h1 id="webelement-api"><a href="#webelement-api" class="header-anchor">#</a> WebElement API</h1> <p>The WebElement class provides a unified interface for interacting with elements across different CodeceptJS helpers (Playwright, WebDriver, Puppeteer). It wraps native element instances and provides consistent methods regardless of the underlying helper.</p> <h2 id="basic-usage"><a href="#basic-usage" class="header-anchor">#</a> Basic Usage</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// Get WebElement instances from any helper</span>
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">grabWebElement</span><span class="token punctuation">(</span><span class="token string">'#button'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> elements <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">grabWebElements</span><span class="token punctuation">(</span><span class="token string">'.items'</span><span class="token punctuation">)</span>
<span class="token comment">// Use consistent API across all helpers</span>
<span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> isVisible <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">isVisible</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span>
<span class="token comment">// Find child elements</span>
<span class="token keyword">const</span> childElement <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.child-selector'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> childElements <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.child-items'</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="api-methods"><a href="#api-methods" class="header-anchor">#</a> API Methods</h2> <h3 id="element-properties"><a href="#element-properties" class="header-anchor">#</a> Element Properties</h3> <h4 id="gettext"><a href="#gettext" class="header-anchor">#</a> <code>getText()</code></h4> <p>Get the text content of the element.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token comment">// "Button Text"</span>
</code></pre></div><h4 id="getattribute-name"><a href="#getattribute-name" class="header-anchor">#</a> <code>getAttribute(name)</code></h4> <p>Get the value of a specific attribute.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> className <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="getproperty-name"><a href="#getproperty-name" class="header-anchor">#</a> <code>getProperty(name)</code></h4> <p>Get the value of a JavaScript property.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">getProperty</span><span class="token punctuation">(</span><span class="token string">'value'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> checked <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">getProperty</span><span class="token punctuation">(</span><span class="token string">'checked'</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="getinnerhtml"><a href="#getinnerhtml" class="header-anchor">#</a> <code>getInnerHTML()</code></h4> <p>Get the inner HTML content of the element.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> html <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">getInnerHTML</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span> <span class="token comment">// "<span>Content</span>"</span>
</code></pre></div><h4 id="getvalue"><a href="#getvalue" class="header-anchor">#</a> <code>getValue()</code></h4> <p>Get the value of input elements.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> inputValue <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="element-state"><a href="#element-state" class="header-anchor">#</a> Element State</h3> <h4 id="isvisible"><a href="#isvisible" class="header-anchor">#</a> <code>isVisible()</code></h4> <p>Check if the element is visible.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> visible <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">isVisible</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>visible<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Element is visible'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="isenabled"><a href="#isenabled" class="header-anchor">#</a> <code>isEnabled()</code></h4> <p>Check if the element is enabled (not disabled).</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> enabled <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">isEnabled</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>enabled<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="exists"><a href="#exists" class="header-anchor">#</a> <code>exists()</code></h4> <p>Check if the element exists in the DOM.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> exists <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">exists</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>exists<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Element exists'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="getboundingbox"><a href="#getboundingbox" class="header-anchor">#</a> <code>getBoundingBox()</code></h4> <p>Get the element's bounding box (position and size).</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> box <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">getBoundingBox</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>box<span class="token punctuation">)</span> <span class="token comment">// { x: 100, y: 200, width: 150, height: 50 }</span>
</code></pre></div><h3 id="element-interactions"><a href="#element-interactions" class="header-anchor">#</a> Element Interactions</h3> <h4 id="click-options"><a href="#click-options" class="header-anchor">#</a> <code>click(options)</code></h4> <p>Click the element.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// With options (Playwright/Puppeteer)</span>
<span class="token keyword">await</span> element<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">button</span><span class="token operator">:</span> <span class="token string">'right'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="type-text-options"><a href="#type-text-options" class="header-anchor">#</a> <code>type(text, options)</code></h4> <p>Type text into the element.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span>
<span class="token comment">// With options (Playwright/Puppeteer)</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">delay</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="child-element-search"><a href="#child-element-search" class="header-anchor">#</a> Child Element Search</h3> <h4 id="locator"><a href="#locator" class="header-anchor">#</a> <code>$(locator)</code></h4> <p>Find the first child element matching the locator.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> childElement <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.child-class'</span><span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>childElement<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">await</span> childElement<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="locator-2"><a href="#locator-2" class="header-anchor">#</a> <code>$$(locator)</code></h4> <p>Find all child elements matching the locator.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> childElements <span class="token operator">=</span> <span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.child-items'</span><span class="token punctuation">)</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> child <span class="token keyword">of</span> childElements<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token keyword">await</span> child<span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="native-access"><a href="#native-access" class="header-anchor">#</a> Native Access</h3> <h4 id="getnativeelement"><a href="#getnativeelement" class="header-anchor">#</a> <code>getNativeElement()</code></h4> <p>Get the original native element instance.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> nativeElement <span class="token operator">=</span> element<span class="token punctuation">.</span><span class="token function">getNativeElement</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// For Playwright: ElementHandle</span>
<span class="token comment">// For WebDriver: WebElement</span>
<span class="token comment">// For Puppeteer: ElementHandle</span>
</code></pre></div><h4 id="gethelper"><a href="#gethelper" class="header-anchor">#</a> <code>getHelper()</code></h4> <p>Get the helper instance that created this WebElement.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> helper <span class="token operator">=</span> element<span class="token punctuation">.</span><span class="token function">getHelper</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>helper<span class="token punctuation">.</span>constructor<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token comment">// "Playwright", "WebDriver", or "Puppeteer"</span>
</code></pre></div><h2 id="locator-support"><a href="#locator-support" class="header-anchor">#</a> Locator Support</h2> <p>The <code>$()</code> and <code>$$()</code> methods support various locator formats:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// CSS selectors</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.class-name'</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#element-id'</span><span class="token punctuation">)</span>
<span class="token comment">// CodeceptJS locator objects</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token string">'.my-class'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">xpath</span><span class="token operator">:</span> <span class="token string">'//div[@class="test"]'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'element-id'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'field-name'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'my-class'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="cross-helper-compatibility"><a href="#cross-helper-compatibility" class="header-anchor">#</a> Cross-Helper Compatibility</h2> <p>The same WebElement code works across all supported helpers:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// This code works identically with Playwright, WebDriver, and Puppeteer</span>
<span class="token keyword">const</span> loginForm <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">grabWebElement</span><span class="token punctuation">(</span><span class="token string">'#login-form'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> usernameField <span class="token operator">=</span> <span class="token keyword">await</span> loginForm<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'[name="username"]'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> passwordField <span class="token operator">=</span> <span class="token keyword">await</span> loginForm<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'[name="password"]'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> submitButton <span class="token operator">=</span> <span class="token keyword">await</span> loginForm<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'button[type="submit"]'</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> usernameField<span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string">'user@example.com'</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> passwordField<span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string">'password123'</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> submitButton<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="migration-from-native-elements"><a href="#migration-from-native-elements" class="header-anchor">#</a> Migration from Native Elements</h2> <p>If you were previously using native elements, you can gradually migrate:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// Old way - helper-specific</span>
<span class="token keyword">const</span> nativeElements <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">grabWebElements</span><span class="token punctuation">(</span><span class="token string">'.items'</span><span class="token punctuation">)</span>
<span class="token comment">// Different API for each helper</span>
<span class="token comment">// New way - unified</span>
<span class="token keyword">const</span> webElements <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">grabWebElements</span><span class="token punctuation">(</span><span class="token string">'.items'</span><span class="token punctuation">)</span>
<span class="token comment">// Same API across all helpers</span>
<span class="token comment">// Backward compatibility</span>
<span class="token keyword">const</span> nativeElement <span class="token operator">=</span> webElements<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">getNativeElement</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// Use native methods if needed</span>
</code></pre></div><h2 id="error-handling"><a href="#error-handling" class="header-anchor">#</a> Error Handling</h2> <p>WebElement methods will throw appropriate errors when operations fail:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">grabWebElement</span><span class="token punctuation">(</span><span class="token string">'#nonexistent'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Element not found'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">await</span> element<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Click failed:'</span><span class="token punctuation">,</span> error<span class="token punctuation">.</span>message<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="http://github.com/codeceptjs/codeceptjs/edit/3.x/docs/WebElement.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">9/22/2025, 11:13:53 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="http://github.com/codeceptjs/CodeceptJS" data-v-5616cc4e>GitHub</a></li> <li data-v-5616cc4e><a href="http://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>
© 2026
</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.76edccf7.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/30.f9c83925.js" defer></script>
</body>
</html>