codeceptjs 3.2.3 → 3.3.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +50 -0
  2. package/docs/advanced.md +0 -4
  3. package/docs/api.md +227 -188
  4. package/docs/build/ApiDataFactory.js +13 -6
  5. package/docs/build/Appium.js +36 -36
  6. package/docs/build/GraphQL.js +11 -0
  7. package/docs/build/JSONResponse.js +297 -0
  8. package/docs/build/Nightmare.js +48 -48
  9. package/docs/build/Playwright.js +261 -146
  10. package/docs/build/Puppeteer.js +76 -67
  11. package/docs/build/REST.js +36 -0
  12. package/docs/build/TestCafe.js +44 -44
  13. package/docs/build/WebDriver.js +69 -69
  14. package/docs/helpers/ApiDataFactory.md +7 -0
  15. package/docs/helpers/Appium.md +3 -3
  16. package/docs/helpers/JSONResponse.md +230 -0
  17. package/docs/helpers/Playwright.md +282 -218
  18. package/docs/helpers/Puppeteer.md +9 -1
  19. package/docs/helpers/REST.md +30 -9
  20. package/docs/installation.md +2 -0
  21. package/docs/internal-api.md +265 -0
  22. package/docs/playwright.md +70 -15
  23. package/docs/plugins.md +125 -29
  24. package/docs/puppeteer.md +24 -8
  25. package/docs/quickstart.md +2 -3
  26. package/docs/reports.md +43 -2
  27. package/docs/translation.md +1 -1
  28. package/docs/videos.md +2 -2
  29. package/docs/webdriver.md +90 -2
  30. package/lib/command/init.js +5 -15
  31. package/lib/config.js +17 -13
  32. package/lib/helper/ApiDataFactory.js +13 -6
  33. package/lib/helper/Appium.js +3 -3
  34. package/lib/helper/GraphQL.js +11 -0
  35. package/lib/helper/JSONResponse.js +297 -0
  36. package/lib/helper/Playwright.js +199 -84
  37. package/lib/helper/Puppeteer.js +12 -3
  38. package/lib/helper/REST.js +36 -0
  39. package/lib/helper/extras/Console.js +8 -0
  40. package/lib/helper/extras/PlaywrightRestartOpts.js +35 -0
  41. package/lib/interfaces/bdd.js +3 -1
  42. package/lib/plugin/allure.js +12 -0
  43. package/lib/plugin/eachElement.js +127 -0
  44. package/lib/utils.js +20 -0
  45. package/package.json +24 -23
  46. package/translations/pt-BR.js +8 -0
  47. package/typings/index.d.ts +2 -0
  48. package/typings/types.d.ts +237 -11
package/docs/plugins.md CHANGED
@@ -58,6 +58,21 @@ const allure = codeceptjs.container.plugins('allure');
58
58
  - `addAttachment(name, buffer, type)` - add an attachment to current test / suite
59
59
  - `addLabel(name, value)` - adds a label to current test
60
60
  - `addParameter(kind, name, value)` - adds a parameter to current test
61
+ - `createStep(name, stepFunc)` - create a step, stepFunc could consist an attachment
62
+ Example of usage:
63
+
64
+ ```js
65
+ allure.createStep('New created step', () => {
66
+ allure.addAttachment(
67
+ 'Request params',
68
+ '{"clientId":123, "name":"Tom", "age":29}',
69
+ 'application/json'
70
+ );
71
+ });
72
+ ```
73
+
74
+ ![Created Step Image][3]
75
+
61
76
  - `severity(value)` - adds severity label
62
77
  - `epic(value)` - adds epic label
63
78
  - `feature(value)` - adds feature label
@@ -434,7 +449,7 @@ Possible config options:
434
449
 
435
450
  ## customLocator
436
451
 
437
- Creates a [custom locator][3] by using special attributes in HTML.
452
+ Creates a [custom locator][4] by using special attributes in HTML.
438
453
 
439
454
  If you have a convention to use `data-test-id` or `data-qa` attributes to mark active elements for e2e tests,
440
455
  you can enable this plugin to simplify matching elements with these attributes:
@@ -501,11 +516,76 @@ I.click('=sign-up'); // matches => [data-qa=sign-up]
501
516
 
502
517
  - `config`
503
518
 
519
+ ## eachElement
520
+
521
+ Provides `eachElement` global function to iterate over found elements to perform actions on them.
522
+
523
+ `eachElement` takes following args:
524
+
525
+ - `purpose` - the goal of an action. A comment text that will be displayed in output.
526
+ - `locator` - a CSS/XPath locator to match elements
527
+ - `fn(element, index)` - **asynchronous** function which will be executed for each matched element.
528
+
529
+ Example of usage:
530
+
531
+ ```js
532
+ // this example works with Playwright and Puppeteer helper
533
+ await eachElement('click all checkboxes', 'form input[type=checkbox]', async (el) => {
534
+ await el.click();
535
+ });
536
+ ```
537
+
538
+ Click odd elements:
539
+
540
+ ```js
541
+ // this example works with Playwright and Puppeteer helper
542
+ await eachElement('click odd buttons', '.button-select', async (el, index) => {
543
+ if (index % 2) await el.click();
544
+ });
545
+ ```
546
+
547
+ Check all elements for visibility:
548
+
549
+ ```js
550
+ // this example works with Playwright and Puppeteer helper
551
+ const assert = require('assert');
552
+ await eachElement('check all items are visible', '.item', async (el) => {
553
+ assert(await el.isVisible());
554
+ });
555
+ ```
556
+
557
+ This method works with WebDriver, Playwright, Puppeteer, Appium helpers.
558
+
559
+ Function parameter `el` represents a matched element.
560
+ Depending on a helper API of `el` can be different. Refer to API of corresponding browser testing engine for a complete API list:
561
+
562
+ - [Playwright ElementHandle][5]
563
+ - [Puppeteer][6]
564
+ - [webdriverio element][7]
565
+
566
+ #### Configuration
567
+
568
+ - `registerGlobal` - to register `eachElement` function globally, true by default
569
+
570
+ If `registerGlobal` is false you can use eachElement from the plugin:
571
+
572
+ ```js
573
+ const eachElement = codeceptjs.container.plugins('eachElement');
574
+ ```
575
+
576
+ ### Parameters
577
+
578
+ - `purpose` **[string][8]**
579
+ - `locator` **CodeceptJS.LocatorOrString**
580
+ - `fn` **[Function][9]**
581
+
582
+ Returns **([Promise][10]<any> | [undefined][11])**
583
+
504
584
  ## fakerTransform
505
585
 
506
- Use the [faker.js][4] package to generate fake data inside examples on your gherkin tests
586
+ Use the [faker.js][12] package to generate fake data inside examples on your gherkin tests
507
587
 
508
- ![Faker.js][5]
588
+ ![Faker.js][13]
509
589
 
510
590
  #### Usage
511
591
 
@@ -543,7 +623,7 @@ Scenario Outline: ...
543
623
 
544
624
  ## pauseOnFail
545
625
 
546
- Automatically launches [interactive pause][6] when a test fails.
626
+ Automatically launches [interactive pause][14] when a test fails.
547
627
 
548
628
  Useful for debugging flaky tests on local environment.
549
629
  Add this plugin to config file:
@@ -726,14 +806,14 @@ Possible config options:
726
806
 
727
807
  ## selenoid
728
808
 
729
- [Selenoid][7] plugin automatically starts browsers and video recording.
809
+ [Selenoid][15] plugin automatically starts browsers and video recording.
730
810
  Works with WebDriver helper.
731
811
 
732
812
  ### Prerequisite
733
813
 
734
814
  This plugin **requires Docker** to be installed.
735
815
 
736
- > If you have issues starting Selenoid with this plugin consider using the official [Configuration Manager][8] tool from Selenoid
816
+ > If you have issues starting Selenoid with this plugin consider using the official [Configuration Manager][16] tool from Selenoid
737
817
 
738
818
  ### Usage
739
819
 
@@ -762,7 +842,7 @@ plugins: {
762
842
  }
763
843
  ```
764
844
 
765
- When `autoCreate` is enabled it will pull the [latest Selenoid from DockerHub][9] and start Selenoid automatically.
845
+ When `autoCreate` is enabled it will pull the [latest Selenoid from DockerHub][17] and start Selenoid automatically.
766
846
  It will also create `browsers.json` file required by Selenoid.
767
847
 
768
848
  In automatic mode the latest version of browser will be used for tests. It is recommended to specify exact version of each browser inside `browsers.json` file.
@@ -774,10 +854,10 @@ In automatic mode the latest version of browser will be used for tests. It is re
774
854
  While this plugin can create containers for you for better control it is recommended to create and launch containers manually.
775
855
  This is especially useful for Continous Integration server as you can configure scaling for Selenoid containers.
776
856
 
777
- > Use [Selenoid Configuration Manager][8] to create and start containers semi-automatically.
857
+ > Use [Selenoid Configuration Manager][16] to create and start containers semi-automatically.
778
858
 
779
859
  1. Create `browsers.json` file in the same directory `codecept.conf.js` is located
780
- [Refer to Selenoid documentation][10] to know more about browsers.json.
860
+ [Refer to Selenoid documentation][18] to know more about browsers.json.
781
861
 
782
862
  _Sample browsers.json_
783
863
 
@@ -802,7 +882,7 @@ _Sample browsers.json_
802
882
 
803
883
  2. Create Selenoid container
804
884
 
805
- Run the following command to create a container. To know more [refer here][11]
885
+ Run the following command to create a container. To know more [refer here][19]
806
886
 
807
887
  ```bash
808
888
  docker create \
@@ -835,7 +915,7 @@ When `allure` plugin is enabled a video is attached to report automatically.
835
915
  | enableVideo | Enable video recording and use `video` folder of output (default: false) |
836
916
  | enableLog | Enable log recording and use `logs` folder of output (default: false) |
837
917
  | deletePassed | Delete video and logs of passed tests (default : true) |
838
- | additionalParams | example: `additionalParams: '--env TEST=test'` [Refer here][12] to know more |
918
+ | additionalParams | example: `additionalParams: '--env TEST=test'` [Refer here][20] to know more |
839
919
 
840
920
  ### Parameters
841
921
 
@@ -843,7 +923,7 @@ When `allure` plugin is enabled a video is attached to report automatically.
843
923
 
844
924
  ## stepByStepReport
845
925
 
846
- ![step-by-step-report][13]
926
+ ![step-by-step-report][21]
847
927
 
848
928
  Generates step by step report for a test.
849
929
  After each step in a test a screenshot is created. After test executed screenshots are combined into slideshow.
@@ -1024,7 +1104,7 @@ This plugin allows to run webdriverio services like:
1024
1104
  - browserstack
1025
1105
  - appium
1026
1106
 
1027
- A complete list of all available services can be found on [webdriverio website][14].
1107
+ A complete list of all available services can be found on [webdriverio website][22].
1028
1108
 
1029
1109
  #### Setup
1030
1110
 
@@ -1036,7 +1116,7 @@ See examples below:
1036
1116
 
1037
1117
  #### Selenium Standalone Service
1038
1118
 
1039
- Install `@wdio/selenium-standalone-service` package, as [described here][15].
1119
+ Install `@wdio/selenium-standalone-service` package, as [described here][23].
1040
1120
  It is important to make sure it is compatible with current webdriverio version.
1041
1121
 
1042
1122
  Enable `wdio` plugin in plugins list and add `selenium-standalone` service:
@@ -1055,7 +1135,7 @@ Please note, this service can be used with Protractor helper as well!
1055
1135
 
1056
1136
  #### Sauce Service
1057
1137
 
1058
- Install `@wdio/sauce-service` package, as [described here][16].
1138
+ Install `@wdio/sauce-service` package, as [described here][24].
1059
1139
  It is important to make sure it is compatible with current webdriverio version.
1060
1140
 
1061
1141
  Enable `wdio` plugin in plugins list and add `sauce` service:
@@ -1089,30 +1169,46 @@ In the same manner additional services from webdriverio can be installed, enable
1089
1169
 
1090
1170
  [2]: https://github.com/allure-framework/allure2/blob/master/plugins/screen-diff-plugin/README.md
1091
1171
 
1092
- [3]: https://codecept.io/locators#custom-locators
1172
+ [3]: https://user-images.githubusercontent.com/63167966/139339384-e6e70a62-3638-406d-a224-f32473071428.png
1173
+
1174
+ [4]: https://codecept.io/locators#custom-locators
1175
+
1176
+ [5]: https://playwright.dev/docs/api/class-elementhandle
1177
+
1178
+ [6]: https://pptr.dev/#?product=Puppeteer&show=api-class-elementhandle
1179
+
1180
+ [7]: https://webdriver.io/docs/api
1181
+
1182
+ [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
1183
+
1184
+ [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
1185
+
1186
+ [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise
1187
+
1188
+ [11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined
1093
1189
 
1094
- [4]: https://www.npmjs.com/package/faker
1190
+ [12]: https://www.npmjs.com/package/faker
1095
1191
 
1096
- [5]: https://raw.githubusercontent.com/Marak/faker.js/master/logo.png
1192
+ [13]: https://raw.githubusercontent.com/Marak/faker.js/master/logo.png
1097
1193
 
1098
- [6]: /basics/#pause
1194
+ [14]: /basics/#pause
1099
1195
 
1100
- [7]: https://aerokube.com/selenoid/
1196
+ [15]: https://aerokube.com/selenoid/
1101
1197
 
1102
- [8]: https://aerokube.com/cm/latest/
1198
+ [16]: https://aerokube.com/cm/latest/
1103
1199
 
1104
- [9]: https://hub.docker.com/u/selenoid
1200
+ [17]: https://hub.docker.com/u/selenoid
1105
1201
 
1106
- [10]: https://aerokube.com/selenoid/latest/#_prepare_configuration
1202
+ [18]: https://aerokube.com/selenoid/latest/#_prepare_configuration
1107
1203
 
1108
- [11]: https://aerokube.com/selenoid/latest/#_option_2_start_selenoid_container
1204
+ [19]: https://aerokube.com/selenoid/latest/#_option_2_start_selenoid_container
1109
1205
 
1110
- [12]: https://docs.docker.com/engine/reference/commandline/create/
1206
+ [20]: https://docs.docker.com/engine/reference/commandline/create/
1111
1207
 
1112
- [13]: https://codecept.io/img/codeceptjs-slideshow.gif
1208
+ [21]: https://codecept.io/img/codeceptjs-slideshow.gif
1113
1209
 
1114
- [14]: https://webdriver.io
1210
+ [22]: https://webdriver.io
1115
1211
 
1116
- [15]: https://webdriver.io/docs/selenium-standalone-service.html
1212
+ [23]: https://webdriver.io/docs/selenium-standalone-service.html
1117
1213
 
1118
- [16]: https://webdriver.io/docs/sauce-service.html
1214
+ [24]: https://webdriver.io/docs/sauce-service.html
package/docs/puppeteer.md CHANGED
@@ -110,7 +110,6 @@ Tests consist with a scenario of user's action taken on a page. The most widely
110
110
  All actions which interact with elements **support CSS and XPath locators**. Actions like `click` or `fillField` by locate elements by their name or value on a page:
111
111
 
112
112
  ```js
113
-
114
113
  // search for link or button
115
114
  I.click('Login');
116
115
  // locate field by its label
@@ -172,8 +171,10 @@ If you need to get element's value inside a test you can use `grab*` methods. Th
172
171
  ```js
173
172
  const assert = require('assert');
174
173
  Scenario('get value of current tasks', async ({ I }) => {
175
- I.createTodo('do 1');
176
- I.createTodo('do 2');
174
+ I.fillField('.todo', 'my first item');
175
+ I.pressKey('Enter')
176
+ I.fillField('.todo', 'my second item');
177
+ I.pressKey('Enter')
177
178
  let numTodos = await I.grabTextFrom('.todo-count strong');
178
179
  assert.equal(2, numTodos);
179
180
  });
@@ -185,20 +186,35 @@ In case some actions should be taken inside one element (a container or modal wi
185
186
  Please take a note that you can't use within inside another within in Puppeteer helper:
186
187
 
187
188
  ```js
188
- within('.todoapp', () => {
189
- I.createTodo('my new item');
189
+ await within('.todoapp', () => {
190
+ I.fillField('.todo', 'my new item');
191
+ I.pressKey('Enter')
190
192
  I.see('1 item left', '.todo-count');
191
193
  I.click('.todo-list input.toggle');
192
194
  });
193
195
  I.see('0 items left', '.todo-count');
194
196
  ```
195
197
 
196
- > [▶ Learn more about basic commands](/basics#writing-tests)
198
+ ### Each Element <Badge text="Since 3.3" type="warning"/>
199
+
200
+ Usually, CodeceptJS performs an action on the first matched element.
201
+ In case you want to do an action on each element found, use the special function `eachElement` which comes from [eachElement](https://codecept.io/plugins/#eachelement) plugin.
202
+
203
+ `eachElement` function matches all elements by locator and performs a callback on each of those element. A callback function receives [ElementHandle instance](https://pptr.dev/#?product=Puppeteer&show=api-class-elementhandle) from Puppeteer API. `eachElement` may perform arbitrary actions on a page, so the first argument should by a description of the actions performed. This description will be used for logging purposes.
197
204
 
198
- CodeceptJS allows you to implement custom actions like `I.createTodo` or use **PageObjects**. Learn how to improve your tests in [PageObjects](https://codecept.io/pageobjects/) guide.
205
+ Usage example
199
206
 
200
- > [▶ Demo project is available on GitHub](https://github.com/DavertMik/codeceptjs-todomvc-puppeteer)
207
+ ```js
208
+ await eachElement(
209
+ 'click all checkboxes',
210
+ 'input.custom-checkbox',
211
+ async (el, index) => {
212
+ await el.click();
213
+ });
214
+ );
215
+ ```
201
216
 
217
+ > ℹ Learn more about [eachElement plugin](/plugins/#eachelement)
202
218
 
203
219
  ## Mocking Requests
204
220
 
@@ -37,9 +37,6 @@ TestCafe provides cross-browser support without Selenium. TestCafe tests are fas
37
37
 
38
38
  # Quickstart
39
39
 
40
- > CodeceptJS supports various engines for running browser tests. By default we recommend using **Playwright** which is cross-browser and performant solution.
41
-
42
-
43
40
 
44
41
  Use [CodeceptJS all-in-one installer](https://github.com/codeceptjs/create-codeceptjs) to get CodeceptJS, a demo project, and Playwright.
45
42
 
@@ -47,6 +44,8 @@ Use [CodeceptJS all-in-one installer](https://github.com/codeceptjs/create-codec
47
44
  npx create-codeceptjs .
48
45
  ```
49
46
 
47
+ If you prefer not to use Playwright see other [installation options](/installation/).
48
+
50
49
  ![Installation](/img/codeceptinstall.gif)
51
50
 
52
51
  > To install codeceptjs into a different folder, like `tests` use `npx create-codeceptjs tests`
package/docs/reports.md CHANGED
@@ -141,9 +141,50 @@ npx codecepjs dry-run --debug
141
141
 
142
142
  > ℹ If you use custom JavaScript code inside tests, or rely on values from `grab*` commands, dry-run may produce error output.
143
143
 
144
+
145
+ ## Testomat.io
146
+
147
+ [Testomat.io](https://testomat.io) is a modern test management tool focused on CodeceptJS and **created by CodeceptJS team**.
148
+ Testomat.io is commercial SaaS service that can receive run reports from local runs or CI. Out of box Testomat.io supports parallel runs, uploading of screenshots and videos.
149
+
150
+ ![](https://user-images.githubusercontent.com/220264/151728836-b52d2b2b-56e1-4640-8d3a-b39de817b1fd.png)
151
+
152
+ > 😻 **Testomat.io is free** for small teams, so you can use its reporting features with CodeceptJS.
153
+
154
+ To receive run reports you should:
155
+
156
+ * [Sign up](https://app.testomat.io/users/sign_up) at Testomat.io
157
+ * Create a new "Classical" project (select "BDD" project if you use CodeceptJS in BDD mode)
158
+ * Select "Import from Source Code"
159
+ * Select "CodeceptJS" as testing framework and JavaScript or TypeScript as a language. If you use BDD select "Gherkin" as language.
160
+ * Execute provided command in a terminal with your project. This will be "check-tests" or "check-cucmber" command. It scans all your test files and imports them into Testomat.io. This way all your e2e tests will be visible in one UI.
161
+ * After tests are imported, go to Runs tab and select "Setup automated tests".
162
+ * Follow the instructions:
163
+
164
+
165
+ ![image](https://user-images.githubusercontent.com/77803888/151834217-5da44d92-a59a-458d-8856-64ce61bf3a38.png)
166
+
167
+ * You will need to install `@testomatio/reporter` package and enable it as a plugin in codeceptjs config:
168
+
169
+ ```js
170
+ plugins: {
171
+ testomatio: {
172
+ enabled: true,
173
+ require: '@testomatio/reporter/lib/adapter/codecept',
174
+ apiKey: process.env.TESTOMATIO,
175
+ }
176
+ }
177
+ ```
178
+
179
+ * Run tests with `TESTOMATIO=` env variable and API key provided by Testomat.io
180
+ * See the run report is created and updated in realtime.
181
+
182
+
183
+ [Testomat.io](https://testomat.io) reporter works in the cloud, so it doesn't require you to install additional software. It can be integrated with your CI service to rerun only failed tests, launch new runs from UI, and send report notifications by email or in Slack, MS Teams, or create issue in Jira.
184
+
185
+
144
186
  ## Allure
145
187
 
146
- > ℹ We recommend using Allure reports on CI. Allure is one of the best open-source reporters designed to collect and show test reports in nicest way.
147
188
 
148
189
  [Allure reporter](https://allure.qatools.ru/#) is a tool to store and display test reports.
149
190
  It provides nice web UI which contains all important information on test execution.
@@ -201,7 +242,7 @@ npx codeceptjs dry-run --debug -p allure
201
242
 
202
243
  ## ReportPortal
203
244
 
204
- Allure is a great reporting tool, however, if you are running tests on different machines it is hard to merge its XML result files to build a proper report. So, for enterprise grade reporting we recommend using [ReportPortal](https://reportportal.io).
245
+ For enterprise grade we reporting we recommend using [ReportPortal](https://reportportal.io).
205
246
 
206
247
  ![](https://camo.githubusercontent.com/6550c0365f1d0ce1e29c53f1860b12957d1fc529/68747470733a2f2f692e6962622e636f2f516d353247306e2f53637265656e73686f742d323031392d30342d31312d61742d31352d35372d34302e706e67)
207
248
 
@@ -57,7 +57,7 @@ To write your tests in portuguese you can enable the portuguese translation in c
57
57
  Now you can write test like this:
58
58
 
59
59
  ```js
60
- Scenario('Efetuar login', ({ Eu }) => {
60
+ Cenário('Efetuar login', ({ Eu }) => {
61
61
  Eu.estouNaPagina('http://minhaAplicacao.com.br');
62
62
  Eu.preenchoOCampo("login", "usuario@minhaAplicacao.com.br");
63
63
  Eu.preenchoOCampo("senha", "123456");
package/docs/videos.md CHANGED
@@ -7,7 +7,7 @@ editLink: false
7
7
  ---
8
8
 
9
9
  > Add your own videos to our [Wiki Page](https://github.com/codeceptjs/CodeceptJS/wiki/Videos)
10
- [![](http://i3.ytimg.com/vi/BRMWstiOTks/maxresdefault.jpg)](https://www.youtube.com/watch?v=BRMWstiOTks)
10
+ [![](https://i3.ytimg.com/vi/BRMWstiOTks/maxresdefault.jpg)](https://www.youtube.com/watch?v=BRMWstiOTks)
11
11
 
12
12
  ## [An Introduction, Getting started and working with CodeceptJS & Puppeteer (EAWeekend)](https://www.youtube.com/watch?v=BRMWstiOTks)
13
13
 
@@ -15,7 +15,7 @@ editLink: false
15
15
 
16
16
  ## [Introductory Videos](https://www.youtube.com/watch?v=FPFG1rBNJ64&list=PLcFXthgti9Lt4SjSvL1ALDg6dOeTC0TvT)
17
17
 
18
- Free educational videos provided by our community member **[@ontytoom](http://github.com/ontytoom)**.
18
+ Free educational videos provided by our community member **[@ontytoom](https://github.com/ontytoom)**.
19
19
 
20
20
  1. [Installation](https://www.youtube.com/watch?v=FPFG1rBNJ64)
21
21
  1. [Creating a Test](https://www.youtube.com/watch?v=mdQZjL3h9d0)
package/docs/webdriver.md CHANGED
@@ -203,8 +203,6 @@ Scenario('login test', ({ I }) => {
203
203
  I.see('Welcome, John');
204
204
  });
205
205
  ```
206
- > ▶ Actions like `amOnPage`, `click`, `fillField` are not limited to WebDriver only. They work similarly for all available helpers. [Go to Basics guide to learn them](/basics#writing-tests).
207
-
208
206
 
209
207
  An empty test case can be created with `npx codeceptjs gt` command.
210
208
 
@@ -212,6 +210,43 @@ An empty test case can be created with `npx codeceptjs gt` command.
212
210
  npx codeceptjs gt
213
211
  ```
214
212
 
213
+
214
+ ### Actions
215
+
216
+ Tests consist with a scenario of user's action taken on a page. The most widely used ones are:
217
+
218
+ * `amOnPage` - to open a webpage (accepts relative or absolute url)
219
+ * `click` - to locate a button or link and click on it
220
+ * `fillField` - to enter a text inside a field
221
+ * `selectOption`, `checkOption` - to interact with a form
222
+ * `wait*` to wait for some parts of page to be fully rendered (important for testing SPA)
223
+ * `grab*` to get values from page sources
224
+ * `see`, `dontSee` - to check for a text on a page
225
+ * `seeElement`, `dontSeeElement` - to check for elements on a page
226
+
227
+ > ℹ All actions are listed in [WebDriver helper reference](https://codecept.io/helpers/WebDriver/).*
228
+
229
+ All actions which interact with elements **support CSS and XPath locators**. Actions like `click` or `fillField` by locate elements by their name or value on a page:
230
+
231
+ ```js
232
+ // search for link or button
233
+ I.click('Login');
234
+ // locate field by its label
235
+ I.fillField('Name', 'Miles');
236
+ // we can use input name
237
+ I.fillField('user[email]','miles@davis.com');
238
+ ```
239
+
240
+ You can also specify the exact locator type with strict locators:
241
+
242
+ ```js
243
+ I.click({css: 'button.red'});
244
+ I.fillField({name: 'user[email]'},'miles@davis.com');
245
+ I.seeElement({xpath: '//body/header'});
246
+ ```
247
+
248
+ ### Interactive Pause
249
+
215
250
  It's easy to start writing a test if you use [interactive pause](/basics#debug). Just open a web page and pause execution.
216
251
 
217
252
  ```js
@@ -268,6 +303,59 @@ Scenario('create todo item', ({ I }) => {
268
303
 
269
304
  WebDriver helper supports standard [CSS/XPath and text locators](/locators) as well as non-trivial [React locators](/react) and [Shadow DOM](/shadow).
270
305
 
306
+ ### Grabbers
307
+
308
+ If you need to get element's value inside a test you can use `grab*` methods. They should be used with `await` operator inside `async` function:
309
+
310
+ ```js
311
+ const assert = require('assert');
312
+ Scenario('get value of current tasks', async ({ I }) => {
313
+ I.fillField('.todo', 'my first item');
314
+ I.pressKey('Enter')
315
+ I.fillField('.todo', 'my second item');
316
+ I.pressKey('Enter')
317
+ let numTodos = await I.grabTextFrom('.todo-count strong');
318
+ assert.equal(2, numTodos);
319
+ });
320
+ ```
321
+
322
+ ### Within
323
+
324
+ In case some actions should be taken inside one element (a container or modal window or iframe) you can use `within` block to narrow the scope.
325
+ Please take a note that you can't use within inside another within in Puppeteer helper:
326
+
327
+ ```js
328
+ await within('.todoapp', () => {
329
+ I.fillField('.todo', 'my new item');
330
+ I.pressKey('Enter')
331
+ I.see('1 item left', '.todo-count');
332
+ I.click('.todo-list input.toggle');
333
+ });
334
+ I.see('0 items left', '.todo-count');
335
+ ```
336
+
337
+ ### Each Element <Badge text="Since 3.3" type="warning"/>
338
+
339
+ Usually, CodeceptJS performs an action on the first matched element.
340
+ In case you want to do an action on each element found, use the special function `eachElement` which comes from [eachElement](https://codecept.io/plugins/#eachelement) plugin.
341
+
342
+ `eachElement` function matches all elements by locator and performs a callback on each of those element. A callback function receives element of webdriverio. `eachElement` may perform arbitrary actions on a page, so the first argument should by a description of the actions performed. This description will be used for logging purposes.
343
+
344
+ Usage example
345
+
346
+ ```js
347
+ await eachElement(
348
+ 'click all checkboxes',
349
+ 'input.custom-checkbox',
350
+ async (el, index) => {
351
+ await el.click();
352
+ });
353
+ );
354
+ ```
355
+
356
+ > ℹ Learn more about [eachElement plugin](/plugins/#eachelement)
357
+
358
+
271
359
  ## Waiting
272
360
 
273
361
  Web applications do not always respond instantly. That's why WebDriver protocol has methods to wait for changes on a page. CodeceptJS provides such commands prefixed with `wait*` so you could explicitly define what effects we wait for.
@@ -22,7 +22,7 @@ const defaultConfig = {
22
22
  mocha: {},
23
23
  };
24
24
 
25
- const helpers = ['Playwright', 'WebDriver', 'Puppeteer', 'TestCafe', 'Protractor', 'Nightmare', 'Appium'];
25
+ const helpers = ['Playwright', 'WebDriver', 'Puppeteer', 'REST', 'GraphQL', 'Appium', 'TestCafe', 'Nightmare'];
26
26
  const translations = Object.keys(require('../../translations'));
27
27
 
28
28
  const noTranslation = 'English (no localization)';
@@ -30,12 +30,15 @@ translations.unshift(noTranslation);
30
30
 
31
31
  let packages;
32
32
 
33
- const configHeader = `const { setHeadlessWhen } = require('@codeceptjs/configure');
33
+ const configHeader = `const { setHeadlessWhen, setCommonPlugins } = require('@codeceptjs/configure');
34
34
 
35
35
  // turn on headless mode when running with HEADLESS=true environment variable
36
36
  // export HEADLESS=true && npx codeceptjs run
37
37
  setHeadlessWhen(process.env.HEADLESS);
38
38
 
39
+ // enable all common plugins https://github.com/codeceptjs/configure#setcommonplugins
40
+ setCommonPlugins();
41
+
39
42
  `;
40
43
 
41
44
  const defaultActor = `// in this file you can append custom step methods to 'I' object
@@ -150,19 +153,6 @@ module.exports = function (initPath) {
150
153
  config.include.I = stepFile;
151
154
  print(`Steps file created at ${stepFile}`);
152
155
 
153
- config.plugins = {
154
- pauseOnFail: {},
155
- retryFailedStep: {
156
- enabled: true,
157
- },
158
- tryTo: {
159
- enabled: true,
160
- },
161
- screenshotOnFail: {
162
- enabled: true,
163
- },
164
- };
165
-
166
156
  let configSource = beautify(`exports.config = ${inspect(config, false, 4, false)}`);
167
157
 
168
158
  if (require.resolve('@codeceptjs/configure') && isLocal && !initPath) {
package/lib/config.js CHANGED
@@ -38,6 +38,14 @@ const defaultConfig = {
38
38
  let hooks = [];
39
39
  let config = {};
40
40
 
41
+ const configFileNames = [
42
+ 'codecept.config.js',
43
+ 'codecept.conf.js',
44
+ 'codecept.json',
45
+ 'codecept.config.ts',
46
+ 'codecept.conf.ts',
47
+ ];
48
+
41
49
  /**
42
50
  * Current configuration
43
51
  */
@@ -59,6 +67,7 @@ class Config {
59
67
  * If js file provided: require it and get .config key
60
68
  * If json file provided: load and parse JSON
61
69
  * If directory provided:
70
+ * * try to load `codecept.config.js` from it
62
71
  * * try to load `codecept.conf.js` from it
63
72
  * * try to load `codecept.json` from it
64
73
  * If none of above: fail.
@@ -78,23 +87,18 @@ class Config {
78
87
  return loadConfigFile(configFile);
79
88
  }
80
89
 
81
- // is path to directory
82
- const jsConfig = path.join(configFile, 'codecept.conf.js');
83
- if (isFile(jsConfig)) {
84
- return loadConfigFile(jsConfig);
85
- }
90
+ for (const name of configFileNames) {
91
+ // is path to directory
92
+ const jsConfig = path.join(configFile, name);
86
93
 
87
- const jsonConfig = path.join(configFile, 'codecept.json');
88
- if (isFile(jsonConfig)) {
89
- return loadConfigFile(jsonConfig);
94
+ if (isFile(jsConfig)) {
95
+ return loadConfigFile(jsConfig);
96
+ }
90
97
  }
91
98
 
92
- const tsConfig = path.join(configFile, 'codecept.conf.ts');
93
- if (isFile(tsConfig)) {
94
- return loadConfigFile(tsConfig);
95
- }
99
+ const configPaths = configFileNames.map(name => path.join(configFile, name)).join(' or ');
96
100
 
97
- throw new Error(`Can not load config from ${jsConfig} or ${jsonConfig} or ${tsConfig}\nCodeceptJS is not initialized in this dir. Execute 'codeceptjs init' to start`);
101
+ throw new Error(`Can not load config from ${configPaths}\nCodeceptJS is not initialized in this dir. Execute 'codeceptjs init' to start`);
98
102
  }
99
103
 
100
104
  /**