codeceptjs.github.io/custom-locators-playwright.html at master · codeceptjs/codeceptjs.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Custom Locator Strategies - Playwright Helper | 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 &amp; 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/47.6ad1fa63.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/30.f9c83925.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/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="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-&amp;-Plugins" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
  Plugins &amp; 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-&amp;-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&amp;utm_medium=top_menu&amp;utm_term=link&amp;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-&amp;-Plugins" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-34dbfd23>
  Plugins &amp; 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-&amp;-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&amp;utm_medium=top_menu&amp;utm_term=link&amp;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">Custom Locator Strategies - Playwright Helper</div>  <div class="post"><article><div class="theme-default-content content__default"><h1 id="custom-locator-strategies-playwright-helper"><a href="#custom-locator-strategies-playwright-helper" class="header-anchor">#</a> Custom Locator Strategies - Playwright Helper</h1> <p>This document describes how to configure and use custom locator strategies in the CodeceptJS Playwright helper.</p> <h2 id="configuration"><a href="#configuration" class="header-anchor">#</a> Configuration</h2> <p>Custom locator strategies can be configured in your <code>codecept.conf.js</code> file:</p> <div class="language-js extra-class"><pre class="language-js"><code>exports<span class="token punctuation">.</span>config <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">helpers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">Playwright</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://localhost:3000'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">browser</span><span class="token operator">:</span> <span class="token string">'chromium'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">customLocatorStrategies</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">byRole</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[role=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">byTestId</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[data-testid=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">byDataQa</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> elements <span class="token operator">=</span> root<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[data-qa=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
          <span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>elements<span class="token punctuation">)</span> <span class="token comment">// Return array for multiple elements</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">byAriaLabel</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[aria-label=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">byPlaceholder</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[placeholder=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></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>
    <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><h2 id="usage"><a href="#usage" class="header-anchor">#</a> Usage</h2> <p>Once configured, custom locator strategies can be used with the same syntax as other locator types:</p> <h3 id="basic-usage"><a href="#basic-usage" class="header-anchor">#</a> Basic Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Find and interact with elements</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">byRole</span><span class="token operator">:</span> <span class="token string">'button'</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">fillField</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byTestId</span><span class="token operator">:</span> <span class="token string">'username'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'john_doe'</span><span class="token punctuation">)</span>
<span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">see</span><span class="token punctuation">(</span><span class="token string">'Welcome'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">byAriaLabel</span><span class="token operator">:</span> <span class="token string">'greeting'</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">seeElement</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byDataQa</span><span class="token operator">:</span> <span class="token string">'navigation'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="advanced-usage"><a href="#advanced-usage" class="header-anchor">#</a> Advanced Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Use with within() blocks</span>
<span class="token function">within</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byRole</span><span class="token operator">:</span> <span class="token string">'form'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</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">byTestId</span><span class="token operator">:</span> <span class="token string">'email'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'test@example.com'</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">byRole</span><span class="token operator">:</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">// Mix with standard locators</span>
<span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">seeElement</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byRole</span><span class="token operator">:</span> <span class="token string">'main'</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">seeElement</span><span class="token punctuation">(</span><span class="token string">'#sidebar'</span><span class="token punctuation">)</span> <span class="token comment">// Standard CSS selector</span>
<span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">seeElement</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=&quot;content&quot;]'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// Standard XPath</span>

<span class="token comment">// Use with grabbing methods</span>
<span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">grabTextFrom</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byTestId</span><span class="token operator">:</span> <span class="token string">'status'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">grabValueFrom</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byPlaceholder</span><span class="token operator">:</span> <span class="token string">'Enter email'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// Use with waiting methods</span>
<span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">waitForElement</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byRole</span><span class="token operator">:</span> <span class="token string">'alert'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span>
<span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">waitForVisible</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byDataQa</span><span class="token operator">:</span> <span class="token string">'loading-spinner'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="locator-function-requirements"><a href="#locator-function-requirements" class="header-anchor">#</a> Locator Function Requirements</h2> <p>Custom locator functions must follow these requirements:</p> <h3 id="function-signature"><a href="#function-signature" class="header-anchor">#</a> Function Signature</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> HTMLElement <span class="token operator">|</span> HTMLElement<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token keyword">null</span>
</code></pre></div><ul><li><strong>selector</strong>: The selector value passed to the locator</li> <li><strong>root</strong>: The DOM element to search within (usually <code>document</code> or a parent element)</li> <li><strong>Return</strong>: Single element, array of elements, or null/undefined if not found</li></ul> <h3 id="example-functions"><a href="#example-functions" class="header-anchor">#</a> Example Functions</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">customLocatorStrategies</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token comment">// Single element selector</span>
  <span class="token function-variable function">byRole</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[role=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></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">// Multiple elements selector (returns first for interactions)</span>
  <span class="token function-variable function">byDataQa</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> elements <span class="token operator">=</span> root<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[data-qa=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>elements<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// Complex selector with validation</span>
  <span class="token function-variable function">byCustomAttribute</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>selector<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[data-custom=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></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">warn</span><span class="token punctuation">(</span><span class="token string">'Invalid selector:'</span><span class="token punctuation">,</span> selector<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token keyword">null</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">// Case-insensitive text search</span>
  <span class="token function-variable function">byTextIgnoreCase</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> elements <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>root<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> elements<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">el</span> <span class="token operator">=&gt;</span>
      el<span class="token punctuation">.</span>textContent <span class="token operator">&amp;&amp;</span>
      el<span class="token punctuation">.</span>textContent<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>selector<span class="token punctuation">.</span><span class="token function">toLowerCase</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>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="error-handling"><a href="#error-handling" class="header-anchor">#</a> Error Handling</h2> <p>The framework provides graceful error handling:</p> <h3 id="undefined-strategies"><a href="#undefined-strategies" class="header-anchor">#</a> Undefined Strategies</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// This will throw an error</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">undefinedStrategy</span><span class="token operator">:</span> <span class="token string">'value'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// Error: Please define &quot;customLocatorStrategies&quot; as an Object and the Locator Strategy as a &quot;function&quot;.</span>
</code></pre></div><h3 id="malformed-functions"><a href="#malformed-functions" class="header-anchor">#</a> Malformed Functions</h3> <p>If a custom locator function throws an error, it will be caught and logged:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function-variable function">byBrokenLocator</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'This locator is broken'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// Usage will log warning but not crash the test:</span>
<span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">seeElement</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byBrokenLocator</span><span class="token operator">:</span> <span class="token string">'test'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// Logs warning, returns null</span>
</code></pre></div><h2 id="best-practices"><a href="#best-practices" class="header-anchor">#</a> Best Practices</h2> <h3 id="_1-naming-conventions"><a href="#_1-naming-conventions" class="header-anchor">#</a> 1. Naming Conventions</h3> <p>Use descriptive names that clearly indicate what the locator does:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Good</span>
<span class="token function-variable function">byRole</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[role=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function-variable function">byTestId</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[data-testid=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>

<span class="token comment">// Avoid</span>
<span class="token function-variable function">by1</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[role=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function-variable function">custom</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[data-testid=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre></div><h3 id="_2-error-handling"><a href="#_2-error-handling" class="header-anchor">#</a> 2. Error Handling</h3> <p>Always include error handling in your custom functions:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function-variable function">byRole</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>selector <span class="token operator">||</span> <span class="token operator">!</span>root<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">null</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[role=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></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">warn</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Error in byRole locator:</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> error<span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token keyword">null</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_3-multiple-elements"><a href="#_3-multiple-elements" class="header-anchor">#</a> 3. Multiple Elements</h3> <p>For selectors that may return multiple elements, return an array:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function-variable function">byClass</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> elements <span class="token operator">=</span> root<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>elements<span class="token punctuation">)</span> <span class="token comment">// Convert NodeList to Array</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_4-performance"><a href="#_4-performance" class="header-anchor">#</a> 4. Performance</h3> <p>Keep locator functions simple and fast:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Good - simple querySelector</span>
<span class="token function-variable function">byTestId</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> root<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[data-testid=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selector<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>

<span class="token comment">// Avoid - complex DOM traversal</span>
<span class="token function-variable function">byComplexSearch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> root</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// Avoid complex searches that iterate through many elements</span>
  <span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>root<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">el</span> <span class="token operator">=&gt;</span> <span class="token comment">/* complex condition */</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="testing-custom-locators"><a href="#testing-custom-locators" class="header-anchor">#</a> Testing Custom Locators</h2> <h3 id="unit-testing"><a href="#unit-testing" class="header-anchor">#</a> Unit Testing</h3> <p>Test your custom locator functions independently:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'Custom Locators'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'should find elements by role'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> mockRoot <span class="token operator">=</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">querySelector</span><span class="token operator">:</span> sinon<span class="token punctuation">.</span><span class="token function">stub</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">returns</span><span class="token punctuation">(</span>mockElement<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">const</span> result <span class="token operator">=</span> customLocatorStrategies<span class="token punctuation">.</span><span class="token function">byRole</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">,</span> mockRoot<span class="token punctuation">)</span>
    <span class="token function">expect</span><span class="token punctuation">(</span>mockRoot<span class="token punctuation">.</span>querySelector<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span>have<span class="token punctuation">.</span>been<span class="token punctuation">.</span><span class="token function">calledWith</span><span class="token punctuation">(</span><span class="token string">'[role=&quot;button&quot;]'</span><span class="token punctuation">)</span>
    <span class="token function">expect</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span>mockElement<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><h3 id="integration-testing"><a href="#integration-testing" class="header-anchor">#</a> Integration Testing</h3> <p>Create acceptance tests that verify the locators work with real DOM:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Scenario</span><span class="token punctuation">(</span><span class="token string">'should use custom locators'</span><span class="token punctuation">,</span> <span class="token parameter"><span class="token constant">I</span></span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</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">'/test-page'</span><span class="token punctuation">)</span>
  <span class="token constant">I</span><span class="token punctuation">.</span><span class="token function">seeElement</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byRole</span><span class="token operator">:</span> <span class="token string">'navigation'</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">byTestId</span><span class="token operator">:</span> <span class="token string">'submit-button'</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">see</span><span class="token punctuation">(</span><span class="token string">'Success'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">byAriaLabel</span><span class="token operator">:</span> <span class="token string">'status-message'</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="migration-from-other-helpers"><a href="#migration-from-other-helpers" class="header-anchor">#</a> Migration from Other Helpers</h2> <p>If you're migrating from WebDriver helper that already supports custom locators, the syntax is identical:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// WebDriver and Playwright both support this syntax:</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">byTestId</span><span class="token operator">:</span> <span class="token string">'submit'</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">fillField</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">byRole</span><span class="token operator">:</span> <span class="token string">'textbox'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'value'</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="troubleshooting"><a href="#troubleshooting" class="header-anchor">#</a> Troubleshooting</h2> <h3 id="common-issues"><a href="#common-issues" class="header-anchor">#</a> Common Issues</h3> <ol><li><p><strong>Locator not recognized</strong>: Ensure the strategy is defined in <code>customLocatorStrategies</code> and is a function.</p></li> <li><p><strong>Elements not found</strong>: Check that your locator function returns the correct element or null.</p></li> <li><p><strong>Multiple elements</strong>: If your function returns an array, interactions will use the first element.</p></li> <li><p><strong>Timing issues</strong>: Custom locators work with all waiting methods (<code>waitForElement</code>, etc.).</p></li></ol> <h3 id="debug-mode"><a href="#debug-mode" class="header-anchor">#</a> Debug Mode</h3> <p>Enable debug mode to see locator resolution:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// In codecept.conf.js</span>
exports<span class="token punctuation">.</span>config <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">helpers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">Playwright</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// ... other config</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">stepByStepReport</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">true</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>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="verbose-logging"><a href="#verbose-logging" class="header-anchor">#</a> Verbose Logging</h3> <p>Custom locator registration is logged when the helper starts:</p> <div class="language- extra-class"><pre class="language-text"><code>Playwright: registering custom locator strategy: byRole
Playwright: registering custom locator strategy: byTestId
</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/custom-locators-playwright.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 &amp; Playwright</a></li> <li data-v-5616cc4e><a href="/puppeteer" data-v-5616cc4e>CodeceptJS &amp; 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>
    © 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 &amp; 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 &amp; 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/47.6ad1fa63.js" defer></script>
  </body>
</html>