artes 1.2.17 โ†’ 1.2.18

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 (38) hide show
  1. package/README.md +629 -629
  2. package/cucumber.config.js +171 -171
  3. package/docs/functionDefinitions.md +2401 -2401
  4. package/docs/stepDefinitions.md +391 -391
  5. package/executer.js +161 -161
  6. package/index.js +48 -48
  7. package/package.json +52 -51
  8. package/src/helper/contextManager/browserManager.js +63 -63
  9. package/src/helper/contextManager/requestManager.js +23 -23
  10. package/src/helper/controller/elementController.js +182 -182
  11. package/src/helper/controller/pomCollector.js +25 -25
  12. package/src/helper/executers/cleaner.js +19 -19
  13. package/src/helper/executers/exporter.js +15 -15
  14. package/src/helper/executers/helper.js +95 -95
  15. package/src/helper/executers/projectCreator.js +198 -198
  16. package/src/helper/executers/reportGenerator.js +58 -58
  17. package/src/helper/executers/testRunner.js +30 -30
  18. package/src/helper/executers/versionChecker.js +31 -31
  19. package/src/helper/imports/commons.js +56 -56
  20. package/src/helper/stepFunctions/APIActions.js +362 -362
  21. package/src/helper/stepFunctions/assertions.js +523 -523
  22. package/src/helper/stepFunctions/browserActions.js +22 -22
  23. package/src/helper/stepFunctions/elementInteractions.js +38 -38
  24. package/src/helper/stepFunctions/exporter.js +19 -19
  25. package/src/helper/stepFunctions/frameActions.js +50 -50
  26. package/src/helper/stepFunctions/keyboardActions.js +41 -41
  27. package/src/helper/stepFunctions/mouseActions.js +145 -145
  28. package/src/helper/stepFunctions/pageActions.js +27 -27
  29. package/src/hooks/context.js +15 -15
  30. package/src/hooks/hooks.js +257 -257
  31. package/src/stepDefinitions/API.steps.js +299 -299
  32. package/src/stepDefinitions/assertions.steps.js +861 -861
  33. package/src/stepDefinitions/browser.steps.js +7 -7
  34. package/src/stepDefinitions/frameActions.steps.js +76 -76
  35. package/src/stepDefinitions/keyboardActions.steps.js +226 -226
  36. package/src/stepDefinitions/mouseActions.steps.js +275 -275
  37. package/src/stepDefinitions/page.steps.js +71 -71
  38. package/src/stepDefinitions/random.steps.js +158 -158
package/README.md CHANGED
@@ -1,630 +1,630 @@
1
- <p align="center">
2
- <img alt="artesLogo" src="https://github.com/user-attachments/assets/e0641011-0e96-4330-8ad5-935b395b0838" width="280">
3
- </p>
4
-
5
- <h1 align="center">Artes</h1>
6
-
7
- ## ๐Ÿš€ Summary
8
-
9
- Artes is a test runner for Playwright that executes [predefined Cucumber tests](./docs/stepDefinitions.md) and can generate Allure reports for test results. It simplifies setting up Playwright with Cucumber in your automation workflow. With Artes, you can easily run tests without writing step definitions, generate reports, and customize your testing environment.
10
-
11
- ![artes demonstration](https://github.com/user-attachments/assets/c46172f7-103d-45d1-a37d-8d4267df0967)
12
-
13
- ---
14
-
15
- ## ๐ŸŒŸ Artes Benefits
16
-
17
- ### ๐Ÿš€ Fast Setup & Smooth Onboarding
18
- - Install in minutes and create a test project effortlessly
19
- - Well-structured, easy-to-follow documentation for a smooth learning curve
20
- - Designed for long-term maintainability and scalability
21
-
22
- ### ๐Ÿงฉ Powerful & Developer-Friendly Architecture
23
- - Intuitive API for writing custom step definitions
24
- - Rich set of ready-to-use step definitions to speed up test creation
25
- - Fully extensible โ€” add your own step definitions anytime
26
-
27
- ### ๐ŸŒ Advanced API Testing
28
- - Schema validation to ensure API response correctness
29
- - Rich assertion library for precise validations
30
- - Support for all HTTP methods
31
- - Environment-based API configuration for flexible testing
32
-
33
- ### ๐Ÿ” Smart Variable & Data Handling
34
- - Page Object Model (POM) support for structured data management
35
- - Save, reuse, and share variables across steps
36
- - Built-in data randomization for dynamic and realistic test data
37
- - Environment-specific variables for clean environment separation
38
-
39
- ### ๐Ÿ–ฅ๏ธ Modern UI Automation
40
- - Wide locator strategy support (CSS, XPath, text-based, and more)
41
- - Built-in browser actions
42
- - Cookie management
43
- - Local & session storage handling
44
-
45
- ### โš™๏ธ Flexible Configuration & Hooks
46
- - Environment-based configuration system
47
- - Powerful and customizable configuration files
48
- - Full hook support:
49
- - Before / After
50
- - Step-level and scenario-level hooks
51
-
52
- ### ๐Ÿงช CLI, CI/CD & Containerization
53
- - Powerful CLI for full control from the command line
54
- - Official [Artes Docker image](https://hub.docker.com/r/vahidaghayev/artes) for seamless containerized execution
55
- - CI/CD-ready โ€” integrate easily with any pipeline
56
-
57
- ### ๐Ÿ“Š Artes Reporting System
58
- - Easy installation with docker compose (For detailed info: [Artes Reporting System](https://github.com/4gayev1/artes-reporting-system))
59
- - Multiple reporting formats supported
60
- - Native Allure reporting integration
61
- - Customizable Artes Reporting System
62
-
63
- ---
64
-
65
- ## ๐Ÿง‘โ€๐Ÿ’ป Installation
66
-
67
- You can install **Artes** via npm. To install it globally **(RECOMMENDED)**, run the following command:
68
-
69
- ```bash
70
- npm install -g artes
71
- ```
72
-
73
- To install it locally in your project, run:
74
-
75
- ```bash
76
- npm install artes
77
- ```
78
-
79
- Once installed, you can run **Artes** using:
80
-
81
- ```bash
82
- npx artes [options]
83
- ```
84
-
85
- ---
86
-
87
- ## ๐Ÿ’ก Usage
88
-
89
- **Artes** has following CLI options:
90
-
91
- ```bash
92
- npx artes [options]
93
- ```
94
-
95
- ### Options
96
-
97
- | Option | Description | Usage Example |
98
- | ------------------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
99
- | ๐Ÿ†˜ `-h, --help` | Show the usage options | `artes -h` or `artes --help` |
100
- | ๐Ÿท๏ธ `-v, --version` | Show the current version of Artes | `artes -v` or `artes --version` |
101
- | ๐Ÿ—๏ธ `-c, --create` | Create an example project with Artes | `artes -c` or `artes --create` |
102
- | โœ… `-y, --yes` | Skip the confirmation prompt when creating an example project | `artes -c -y` or `artes --create --yes` |
103
- | ๐Ÿ“Š `-r, --report` | Run tests and generate Allure report | `artes -r` or `artes --report` |
104
- | `--reportSuccess` | Add screenshots and video records for also Success test cases | `artes --reportSuccess` |
105
- | `--trace` | Enable tracing | `artes --trace` |
106
- | `-rwt, --reportWithTrace` | Add trace to the report | `artes -rwt` or `artes --reportWithTrace` |
107
- | `--singleFileReport` | Generate single file allure report | `artes -r --singleFileReport` |
108
- | `--zip` | Zip the report folder after generation | `artes -r --zip` |
109
- | ๐Ÿ“ `--features` | Specify one or more feature files' relative paths to run (comma-separated) | `artes --features "tests/features/Alma,tests/features/Banan.feature"` |
110
- | ๐Ÿ“œ `--stepDef` | Specify one or more step definition files' relative paths to use (comma-separated) | `artes --stepDef "tests/steps/login.js,tests/steps/home.js"` |
111
- | ๐Ÿ”– `--tags` | Run tests with specified Cucumber tags | `artes --tags "@smoke or @wip"` |
112
- | ๐ŸŒ `--env` | Set the environment for the test run | `artes --env "dev"` |
113
- | ๐Ÿ•ถ๏ธ `--headless` | Run browser in headless mode | `artes --headless` |
114
- | โšก `--parallel` | Run tests in parallel mode | `artes --parallel 2` |
115
- | ๐Ÿ” `--retry` | Retry failed tests | `artes --retry 3` |
116
- | ๐ŸŽญ `--dryRun` | Perform a dry run without executing tests | `artes --dryRun` |
117
- | ๐Ÿ“ˆ `--percentage` | Set minimum success percentage to pass test run (default is 0) | `artes --percentage 85` |
118
- | ๐ŸŒ `--browser` | Specify browser to use (`chromium`, `firefox`, or `webkit`) | `artes --browser chromium` |
119
- | ๐Ÿ”— `--baseURL` | Set base URL for the tests | `artes --baseURL "https://example.com"` |
120
- | ๐Ÿ–ฅ๏ธ `--maxScreen` | Maximize browser window on launch | `artes --maxScreen` |
121
- | ๐Ÿ“ `--width` | Set browser width (default is 1280) | `artes --width 1920` |
122
- | ๐Ÿ“ `--height` | Set browser height (default is 720) | `artes --height 1080` |
123
- | โฑ๏ธ `--timeout` | Set timeout for each test step in seconds (default is 30 seconds) | `artes --timeout 10` |
124
- | ๐Ÿข `--slowMo` | Slow down text execution for clear view (default: 0 seconds) | `artes --slowMo 1` |
125
-
126
- \*\* To just run the tests: <br>
127
- Globally: artes <br>
128
- Locally: npx artes
129
-
130
- ---
131
-
132
- ## ๐ŸŽฏ Best Practices
133
-
134
- - **Global Installation:**
135
- For ease of use, it's recommended that Artes be installed globally. You can do this by running the following command:
136
-
137
- ```bash
138
- npm install -g artes
139
- ```
140
-
141
- - **Project Creation (Recommended):**
142
- To create a new project with Artes, use the `-c` flag. This will automatically set up the folder structure and configuration for you. Run the command:
143
-
144
- ```bash
145
- artes -c
146
- ```
147
-
148
- ๐Ÿ—‚๏ธ Example Project Structure: <br/>
149
- After running the `-c` flag to create a new project, the structure will look like this:
150
-
151
- ```
152
- /artes (Project Name)
153
- /tests
154
- /features
155
- (Your feature files here)
156
- /POMs // Optional
157
- (POM JSON file here)
158
- /steps // For custom steps
159
- (Your step definition JS files here)
160
- artes.config.js
161
- /report
162
- (Generated Allure report HTML here)
163
- ```
164
-
165
- **If you choose not to use the `-c` flag**, you can still download Artes to your testing project and use the prepared steps by running:
166
-
167
- ```bash
168
- npx artes
169
- ```
170
-
171
- You must customize the paths of features, steps, and other configurations by editing the `artes.config.js` file located inside your project folder (or create it).
172
-
173
- For example:
174
-
175
- ```javascript
176
- module.exports = {
177
- paths: ["tests/features/"], // Custom path for feature files
178
- require: ["tests/steps/*.js"], // Custom path for step definitions files
179
- pomPath: "tests/POMS/*.js", // Custom path for POM files
180
- };
181
- ```
182
-
183
- ---
184
-
185
- ## ๐Ÿ“ Writing Feature Files and POM Files
186
-
187
- Artes simplifies your test writing with structured feature files and organized Page Object Models (POM). Hereโ€™s how you can create them:
188
-
189
- ### 1. ๐Ÿ“„ Feature File Structure
190
-
191
- ```gherkin
192
- Feature: Searching on Google ๐Ÿ”
193
- Scenario Outline: Search for a term on Google
194
- Given User is on "https://www.google.com/" page
195
- When User types "alma" in "google_search_input"
196
- And User clicks "google_search_button"
197
- And User waits 10 seconds
198
- Then "google_text" should have "Alma" text
199
- ```
200
-
201
- - **Feature**: Describes the main feature being tested (e.g., Google search).
202
- - **Scenario Outline**: Defines a test case with steps.
203
- - **Steps**: Use `Given`, `When`, `And`, `Then` keywords to describe actions and expectations.
204
- - **Selectors**: The element names (e.g., `google_search_input`, `google_search_button`) map to the POM file or can be defined directly.
205
-
206
- ### 2. ๐Ÿ“‚ POM File Example
207
-
208
- ```json
209
- {
210
- "google_search_input": { "selector": "#APjFqb" },
211
- "google_search_button": {
212
- "selector": "input.gNO89b"
213
- },
214
- "google_text": {
215
- "selector": "#rso div h3",
216
- "waitTime": 5 //seconds
217
- }
218
- }
219
- ```
220
-
221
- - ๐Ÿ“‘ Using POM File is optional but it is **RECOMMENDED**
222
- - ๐Ÿ”— Using Selector in Feature File is possible
223
- ```gherkin
224
- When User types "alma" in "#APjFqb"
225
- ```
226
- - ๐Ÿ It is good to use snake_case for element names
227
- - โณ "waitTime" is to define custom wait for elements, but the feature currently under development.
228
- "selector" must be used if "waitTime" is used, but when using only selector is not needed mention in "selector"
229
-
230
- ---
231
-
232
- ## ๐Ÿ”„ Variable Management
233
-
234
- Artes provides powerful variable management capabilities that allow you to save, reuse, and share variables across test steps.
235
-
236
- ### Saving Variables from API Responses
237
-
238
- You can save variables directly from API responses, even using dot notation to extract nested values:
239
-
240
- ```gherkin
241
- When User sends GET request to "https://www.test.com" and saves "id" variables
242
- And User sends GET request to "https://www.test.com/items/{{id}}"
243
- Then User expects that response should have 200 status code
244
- ```
245
-
246
- ### Manual Variable Assignment
247
-
248
- Save variables manually using the dedicated step:
249
-
250
- ```gherkin
251
- And User saves "15" variable as "id"
252
- ```
253
-
254
- ### Variable Randomization
255
-
256
- Artes includes built-in randomization for generating dynamic test data:
257
-
258
- ```gherkin
259
- And User sets random email as "email"
260
- And User sets random 5 words as "description"
261
- And User sets random fullname as "fullName"
262
- ```
263
-
264
- ### Using Variables in Tests
265
-
266
- Reference saved variables anywhere in your tests using double curly braces:
267
-
268
- ```gherkin
269
- When User types "{{email}}" in "email_input"
270
- ```
271
-
272
- ๐Ÿ“š **For detailed information and complete step definitions**, visit the [Variable Management Documentation](https://github.com/4gayev1/Artes/blob/main/docs/stepDefinitions.md#variable-management).
273
-
274
- ---
275
-
276
- ## ๐Ÿ› ๏ธ Customization
277
-
278
- ## โœ๏ธ Writing Custom Step Definitions
279
-
280
- Artes allows you to extend its functionality by writing custom step definitions. Here's how you can do it:
281
-
282
- ### Import Required APIs
283
-
284
- ```javascript
285
- const {
286
- expect,
287
- Given,
288
- When,
289
- Then,
290
- element,
291
- context,
292
- keyboard,
293
- mouse,
294
- frame,
295
- assert,
296
- elementInteractions,
297
- } = require("artes"); // Common JS
298
- import { expect, Given, When, Then, element, context } from "artes"; // ES Modules (Do not RECOMMENDED)
299
- ```
300
-
301
- - **`Given`, `When`, `Then`**: These define your steps in Cucumber syntax. Example:
302
-
303
- ```javascript
304
- Given("User is on the login page", async () => {
305
- await context.page.navigateTo("https://example.com/login");
306
- });
307
- ```
308
-
309
- - **`page`**: Provides higher-level page actions such as navigation and waiting(Same as PlayWright). Examples:
310
- - Navigate to a URL:
311
- ```javascript
312
- await context.page.navigate("https://example.com");
313
- ```
314
- - Wait for a selector:
315
- ```javascript
316
- await context.page.waitForSelector("#loadingSpinner");
317
- ```
318
- - **`request`**: Use for sending HTTP requests. _(Note: This feature is currently under development.)_
319
-
320
- - **`element`**: Use for interacting with elements on the web page. Examples:
321
- - Clicking a button:
322
- ```javascript
323
- await element("#submitButton").click();
324
- ```
325
- - Filling an input:
326
- ```javascript
327
- await element("#username").fill("testUser");
328
- ```
329
- - **`expect`**: Use for assertions in your steps. For example:
330
- ```javascript
331
- expect(actualValue).toBe(expectedValue);
332
- expect(element("Page_Title")).toHaveText(expectedValue);
333
- ```
334
-
335
- ## ๐Ÿ“‹ Simplified Functions
336
-
337
- If you don't want to deal with Playwright methods directly, you can simply use the following predefined actions methods by import them:
338
-
339
- ```javascript
340
- const { mouse, keyboard, frame, elementInteractions, page } = require("artes");
341
- ```
342
-
343
- - **Mouse Actions:**
344
- `mouse.click(element)`
345
-
346
- - **Keyboard Actions:**
347
- `keyboard.press(key)`
348
-
349
- - **Element Interactions:**
350
- `elementInteractions.isChecked()`
351
-
352
- - **Assertions:**
353
- `assert.shouldBeTruthy(element)`
354
-
355
- - **Frame Actions:**
356
- `frame.first()`
357
-
358
- - **API Actions:**
359
- `api.post(url, payload, requestDataType)`
360
-
361
- ---
362
-
363
- For a detailed explanation of each function, please refer to the [function definitions](./docs/functionDefinitions.md).
364
-
365
- ---
366
-
367
- ### Example of Custom Step Definition
368
-
369
- ```javascript
370
- const { Given, When, Then, expect, element, page } = require("artes");
371
-
372
- Given("User is on the home page", async () => {
373
- await page.navigate("https://example.com");
374
- });
375
-
376
- When("User clicks the login button", async () => {
377
- await element("#loginButton").click();
378
- });
379
-
380
- Then("User should see the login form", async () => {
381
- expect(element("#loginForm")).toBeVisible(true);
382
- });
383
- ```
384
-
385
- ## ๐Ÿช Hooks (Lifecycle Hooks)
386
-
387
- Artes supports **hooks** that allow you to execute custom logic **before and after tests, scenarios, and steps**.
388
-
389
- Hooks are **user-defined**.
390
-
391
- ---
392
-
393
- ### ๐Ÿ“ Hooks File Location
394
-
395
- Create the following file **inside your project** (optional):
396
- ```
397
- tests/steps/hooks.js
398
- ```
399
-
400
- ---
401
-
402
- ### โœ๏ธ Writing Hooks
403
-
404
- You can define **only the hooks you need** in hooks.js under the steps folder.
405
- Undefined hooks are automatically skipped.
406
-
407
- ```js
408
- // tests/steps/hooks.js
409
-
410
- export function BeforeStep() {
411
- // hook for before each step
412
- }
413
-
414
- export function Before() {
415
- // hook for before each test
416
- }
417
-
418
- export function BeforeAll() {
419
- // hook for before all tests
420
- }
421
-
422
- export function AfterStep() {
423
- // hook for after each step
424
- }
425
-
426
- export function After() {
427
- // hook for after each test
428
- }
429
-
430
- export function AfterAll() {
431
- // hook for after all tests
432
- }
433
- ```
434
-
435
- ---
436
-
437
- ### ๐Ÿ” Supported Hook Types
438
-
439
- | Hook Name | Execution Time |
440
- | ------------ | ----------------------------- |
441
- | `BeforeAll` | Once before **all scenarios** |
442
- | `Before` | Before **each scenario** |
443
- | `BeforeStep` | Before **each step** |
444
- | `AfterStep` | After **each step** |
445
- | `After` | After **each scenario** |
446
- | `AfterAll` | Once after **all scenarios** |
447
-
448
- ---
449
-
450
- ### โ–ถ๏ธ Execution Order Example
451
-
452
- For a scenario with steps:
453
- ```
454
- BeforeAll
455
- Before
456
- BeforeStep
457
- (step executes)
458
- AfterStep
459
- After
460
- AfterAll
461
- ```
462
-
463
- ---
464
-
465
- ## โš™๏ธ Configuration
466
-
467
- You can configure Artes by editing the `artes.config.js` file. Below are the default configuration options with explanations:
468
-
469
- | **Option** | **Default Value** | **Description** |
470
- | ----------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------- |
471
- | `timeout` | `30` | Default timeout in seconds. |
472
- | `slowMo` | `0` | Default slow motion in seconds |
473
- | `paths` | `[moduleConfig.featuresPath]` | Paths to feature files. |
474
- | `require` | `[moduleConfig.stepsPath, "src/stepDefinitions/*.js", "src/hooks/hooks.js"]` | Support code paths (CommonJS). |
475
- | `pomPath` | `moduleConfig.pomPath` | Path to Page Object Models. |
476
- | `import` | `[]` | Support code paths. |
477
- | `testPercentage` | `0` | Define test coverage percentage |
478
- | `report` | `false` | Generate report |
479
- | `reportSuccess` | `false` | Add screenshots and video records for also success test cases |
480
- | `trace` | `false` | Enable trace |
481
- | `reportWithTrace` | `false` | Add trace to the report |
482
- | `format` | `["rerun:@rerun.txt", "allure-cucumberjs/reporter"]` | Formatter names/paths. |
483
- | `formatOptions` | `{ "resultsDir": "allure-result" }` | Formatter options. |
484
- | `parallel` | `1` | Number of parallel workers. |
485
- | `dryRun` | `false` | Prepare test run without execution. |
486
- | `failFast` | `false` | Stop on first test failure. |
487
- | `forceExit` | `false` | Force `process.exit()` after tests. |
488
- | `strict` | `true` | Fail on pending steps. |
489
- | `backtrace` | `false` | Show full backtrace for errors. |
490
- | `tags` | `""` | Tag expression to filter scenarios. |
491
- | `name` | `[]` | Run scenarios matching regex. |
492
- | `order` | `"defined"` | Run order (defined/random). |
493
- | `language` | `"en"` | Default feature file language. |
494
- | `loader` | `[]` | Module loader specifications. |
495
- | `requireModule` | `[]` | Transpilation module names. |
496
- | `retry` | `0` | Retry attempts for failing tests. |
497
- | `retryTagFilter` | `""` | Tag expression for retries. |
498
- | `publish` | `false` | Publish to cucumber.io. |
499
- | `worldParameters` | `{}` | Custom world parameters. |
500
-
501
- ---
502
-
503
- ## ๐ŸŒ Environment Configuration
504
-
505
- | **Option** | **Default Value** | **Description** |
506
- | ---------- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
507
- | `env` | `""` | Environment configuration. Should match the name with the baseURL object, like "dev" |
508
- | `baseURL` | `""` | Base URL for API requests. Can be object {"dev":"dev-api.com", "pre":"pre-api.com"}, or string "dev-api.com" |
509
-
510
- ### Environment Variables Configuration
511
-
512
- Artes supports environment-specific configurations through environment variables. This feature allows to manage different settings for environments.
513
-
514
- ### Setting Up Environment Variables
515
-
516
- 1. **Configure Environment in artes.config.js:**
517
- ```javascript
518
- module.exports = {
519
- baseURL: {
520
- dev: "https://dev.alma.az",
521
- pre: "https://pre.alma.az",
522
- prod: "https://api.alma.az"
523
- },
524
- env: "dev", // Specify which environment to use
525
- };
526
- ```
527
-
528
- **Alternative single URL configuration:**
529
- ```javascript
530
- module.exports = {
531
- baseURL: "https://api.alma.az", // Direct string URL
532
- };
533
- ```
534
-
535
- 2. **Create Environment Variable Files:**
536
- Create JSON files under `src/tests/environment_variables/` folder with names matching your environment:
537
-
538
- **dev.env.json:**
539
- ```json
540
- {
541
- "api_key": "dev-api-key-12345",
542
- "auth_token": "dev-auth-token",
543
- "database_url": "dev-db.example.com",
544
- "timeout": 5000,
545
- "headers": {
546
- "Authorization": "Bearer dev-token",
547
- "Content-Type": "application/json"
548
- }
549
- }
550
- ```
551
-
552
- ### How It Works
553
-
554
- 1. **Environment Detection:** When Artes runs, it reads the `env` value from `artes.config.js`
555
- 2. **Base URL Resolution:** If `baseURL` is an object, it uses the environment key to find the corresponding URL. If `baseURL` is a string, it uses it directly
556
- 3. **Variable Loading:** Artes looks for a JSON file matching the environment name in `src/tests/environment_variables/`
557
- 4. **Runtime Access:** All variables from the environment file become available during test execution
558
-
559
- ### Important Notes
560
-
561
- - โš ๏ธ **Base URLs must be defined in `artes.config.js`** - they cannot be set in the environment variable JSON files
562
- - ๐Ÿ“ Environment variable files should be placed in `src/tests/environment_variables/`
563
- - ๐Ÿท๏ธ File names must follow the format `{env}.env.json` (e.g., `dev.env.json` for `env: "dev"`)
564
- - ๐Ÿ”„ Variables are loaded into variable storage and can be accessed during test runs
565
- - ๐ŸŒ Use environment variables for headers, API keys, timeouts, and other environment-specific configurations
566
-
567
- ---
568
-
569
- ### Browser Configuration
570
-
571
- | Option | Default Value | Description |
572
- | ------------- | ------------------------------ | ------------------------------------------------------ |
573
- | `browserType` | `"chrome"` | Browser type (`"chrome"`, `"firefox"`, or `"webkit"`). |
574
- | `viewport` | `{ width: 1280, height: 720 }` | Browser viewport size. |
575
- | `headless` | `true` | Run browser in headless mode (`true` or `false`). |
576
-
577
- ## ๐Ÿ“Š Report Generation
578
-
579
- Artes can generate Allure reports. After running tests with the `-r` flag, the reports will be stored in the `report` folder in HTML format. You can view them in your browser after the tests complete.
580
-
581
- ---
582
-
583
- ## ๐Ÿณ Docker Image for CI/CD
584
-
585
- A Docker image `vahidaghayev/artes` is available for running Artes in CI/CD pipelines. This image includes:
586
-
587
- - **Playwright Browsers**: Pre-installed to support UI testing.
588
- - **Xvfb**: Enables running UI tests with video recording in a virtual display.
589
-
590
- ### Recommended Settings for Best Quality
591
-
592
- To achieve the best video recording quality, use the following command:
593
-
594
- ```bash
595
- xvfb-run -a --server-args="-screen 0 3840x1180x24" --auto-servernum npx artes --width 1600 --height 900
596
- ```
597
-
598
- ---
599
-
600
- ## ๐Ÿ‘ Good To Use
601
-
602
- If you don't use the -c or --create option that the package offers, save the file below under the `.vscode` folder:
603
-
604
- - Those configurations will help autocomplete both predefined and custom step definitions in your features file
605
-
606
- **extensions.json**
607
-
608
- ```json
609
- {
610
- "recommendations": ["CucumberOpen.cucumber-official"]
611
- }
612
- ```
613
-
614
- **settings.json**
615
-
616
- ```json
617
- {
618
- "cucumber.glue": [
619
- "tests/steps/*.{ts,js}",
620
- "node_modules/artes/src/tests/stepDefinitions/*.{ts,js}"
621
- ],
622
- "cucumber.features": ["tests/features/*.features"],
623
- "cucumberautocomplete.syncfeatures": true,
624
- "cucumberautocomplete.strictGherkinCompletion": true
625
- }
626
- ```
627
-
628
- ---
629
-
1
+ <p align="center">
2
+ <img alt="artesLogo" src="https://github.com/user-attachments/assets/e0641011-0e96-4330-8ad5-935b395b0838" width="280">
3
+ </p>
4
+
5
+ <h1 align="center">Artes</h1>
6
+
7
+ ## ๐Ÿš€ Summary
8
+
9
+ Artes is a test runner for Playwright that executes [predefined Cucumber tests](./docs/stepDefinitions.md) and can generate Allure reports for test results. It simplifies setting up Playwright with Cucumber in your automation workflow. With Artes, you can easily run tests without writing step definitions, generate reports, and customize your testing environment.
10
+
11
+ ![artes demonstration](https://github.com/user-attachments/assets/c46172f7-103d-45d1-a37d-8d4267df0967)
12
+
13
+ ---
14
+
15
+ ## ๐ŸŒŸ Artes Benefits
16
+
17
+ ### ๐Ÿš€ Fast Setup & Smooth Onboarding
18
+ - Install in minutes and create a test project effortlessly
19
+ - Well-structured, easy-to-follow documentation for a smooth learning curve
20
+ - Designed for long-term maintainability and scalability
21
+
22
+ ### ๐Ÿงฉ Powerful & Developer-Friendly Architecture
23
+ - Intuitive API for writing custom step definitions
24
+ - Rich set of ready-to-use step definitions to speed up test creation
25
+ - Fully extensible โ€” add your own step definitions anytime
26
+
27
+ ### ๐ŸŒ Advanced API Testing
28
+ - Schema validation to ensure API response correctness
29
+ - Rich assertion library for precise validations
30
+ - Support for all HTTP methods
31
+ - Environment-based API configuration for flexible testing
32
+
33
+ ### ๐Ÿ” Smart Variable & Data Handling
34
+ - Page Object Model (POM) support for structured data management
35
+ - Save, reuse, and share variables across steps
36
+ - Built-in data randomization for dynamic and realistic test data
37
+ - Environment-specific variables for clean environment separation
38
+
39
+ ### ๐Ÿ–ฅ๏ธ Modern UI Automation
40
+ - Wide locator strategy support (CSS, XPath, text-based, and more)
41
+ - Built-in browser actions
42
+ - Cookie management
43
+ - Local & session storage handling
44
+
45
+ ### โš™๏ธ Flexible Configuration & Hooks
46
+ - Environment-based configuration system
47
+ - Powerful and customizable configuration files
48
+ - Full hook support:
49
+ - Before / After
50
+ - Step-level and scenario-level hooks
51
+
52
+ ### ๐Ÿงช CLI, CI/CD & Containerization
53
+ - Powerful CLI for full control from the command line
54
+ - Official [Artes Docker image](https://hub.docker.com/r/vahidaghayev/artes) for seamless containerized execution
55
+ - CI/CD-ready โ€” integrate easily with any pipeline
56
+
57
+ ### ๐Ÿ“Š Artes Reporting System
58
+ - Easy installation with docker compose (For detailed info: [Artes Reporting System](https://github.com/4gayev1/artes-reporting-system))
59
+ - Multiple reporting formats supported
60
+ - Native Allure reporting integration
61
+ - Customizable Artes Reporting System
62
+
63
+ ---
64
+
65
+ ## ๐Ÿง‘โ€๐Ÿ’ป Installation
66
+
67
+ You can install **Artes** via npm. To install it globally **(RECOMMENDED)**, run the following command:
68
+
69
+ ```bash
70
+ npm install -g artes
71
+ ```
72
+
73
+ To install it locally in your project, run:
74
+
75
+ ```bash
76
+ npm install artes
77
+ ```
78
+
79
+ Once installed, you can run **Artes** using:
80
+
81
+ ```bash
82
+ npx artes [options]
83
+ ```
84
+
85
+ ---
86
+
87
+ ## ๐Ÿ’ก Usage
88
+
89
+ **Artes** has following CLI options:
90
+
91
+ ```bash
92
+ npx artes [options]
93
+ ```
94
+
95
+ ### Options
96
+
97
+ | Option | Description | Usage Example |
98
+ | ------------------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
99
+ | ๐Ÿ†˜ `-h, --help` | Show the usage options | `artes -h` or `artes --help` |
100
+ | ๐Ÿท๏ธ `-v, --version` | Show the current version of Artes | `artes -v` or `artes --version` |
101
+ | ๐Ÿ—๏ธ `-c, --create` | Create an example project with Artes | `artes -c` or `artes --create` |
102
+ | โœ… `-y, --yes` | Skip the confirmation prompt when creating an example project | `artes -c -y` or `artes --create --yes` |
103
+ | ๐Ÿ“Š `-r, --report` | Run tests and generate Allure report | `artes -r` or `artes --report` |
104
+ | `--reportSuccess` | Add screenshots and video records for also Success test cases | `artes --reportSuccess` |
105
+ | `--trace` | Enable tracing | `artes --trace` |
106
+ | `-rwt, --reportWithTrace` | Add trace to the report | `artes -rwt` or `artes --reportWithTrace` |
107
+ | `--singleFileReport` | Generate single file allure report | `artes -r --singleFileReport` |
108
+ | `--zip` | Zip the report folder after generation | `artes -r --zip` |
109
+ | ๐Ÿ“ `--features` | Specify one or more feature files' relative paths to run (comma-separated) | `artes --features "tests/features/Alma,tests/features/Banan.feature"` |
110
+ | ๐Ÿ“œ `--stepDef` | Specify one or more step definition files' relative paths to use (comma-separated) | `artes --stepDef "tests/steps/login.js,tests/steps/home.js"` |
111
+ | ๐Ÿ”– `--tags` | Run tests with specified Cucumber tags | `artes --tags "@smoke or @wip"` |
112
+ | ๐ŸŒ `--env` | Set the environment for the test run | `artes --env "dev"` |
113
+ | ๐Ÿ•ถ๏ธ `--headless` | Run browser in headless mode | `artes --headless` |
114
+ | โšก `--parallel` | Run tests in parallel mode | `artes --parallel 2` |
115
+ | ๐Ÿ” `--retry` | Retry failed tests | `artes --retry 3` |
116
+ | ๐ŸŽญ `--dryRun` | Perform a dry run without executing tests | `artes --dryRun` |
117
+ | ๐Ÿ“ˆ `--percentage` | Set minimum success percentage to pass test run (default is 0) | `artes --percentage 85` |
118
+ | ๐ŸŒ `--browser` | Specify browser to use (`chromium`, `firefox`, or `webkit`) | `artes --browser chromium` |
119
+ | ๐Ÿ”— `--baseURL` | Set base URL for the tests | `artes --baseURL "https://example.com"` |
120
+ | ๐Ÿ–ฅ๏ธ `--maxScreen` | Maximize browser window on launch | `artes --maxScreen` |
121
+ | ๐Ÿ“ `--width` | Set browser width (default is 1280) | `artes --width 1920` |
122
+ | ๐Ÿ“ `--height` | Set browser height (default is 720) | `artes --height 1080` |
123
+ | โฑ๏ธ `--timeout` | Set timeout for each test step in seconds (default is 30 seconds) | `artes --timeout 10` |
124
+ | ๐Ÿข `--slowMo` | Slow down text execution for clear view (default: 0 seconds) | `artes --slowMo 1` |
125
+
126
+ \*\* To just run the tests: <br>
127
+ Globally: artes <br>
128
+ Locally: npx artes
129
+
130
+ ---
131
+
132
+ ## ๐ŸŽฏ Best Practices
133
+
134
+ - **Global Installation:**
135
+ For ease of use, it's recommended that Artes be installed globally. You can do this by running the following command:
136
+
137
+ ```bash
138
+ npm install -g artes
139
+ ```
140
+
141
+ - **Project Creation (Recommended):**
142
+ To create a new project with Artes, use the `-c` flag. This will automatically set up the folder structure and configuration for you. Run the command:
143
+
144
+ ```bash
145
+ artes -c
146
+ ```
147
+
148
+ ๐Ÿ—‚๏ธ Example Project Structure: <br/>
149
+ After running the `-c` flag to create a new project, the structure will look like this:
150
+
151
+ ```
152
+ /artes (Project Name)
153
+ /tests
154
+ /features
155
+ (Your feature files here)
156
+ /POMs // Optional
157
+ (POM JSON file here)
158
+ /steps // For custom steps
159
+ (Your step definition JS files here)
160
+ artes.config.js
161
+ /report
162
+ (Generated Allure report HTML here)
163
+ ```
164
+
165
+ **If you choose not to use the `-c` flag**, you can still download Artes to your testing project and use the prepared steps by running:
166
+
167
+ ```bash
168
+ npx artes
169
+ ```
170
+
171
+ You must customize the paths of features, steps, and other configurations by editing the `artes.config.js` file located inside your project folder (or create it).
172
+
173
+ For example:
174
+
175
+ ```javascript
176
+ module.exports = {
177
+ paths: ["tests/features/"], // Custom path for feature files
178
+ require: ["tests/steps/*.js"], // Custom path for step definitions files
179
+ pomPath: "tests/POMS/*.js", // Custom path for POM files
180
+ };
181
+ ```
182
+
183
+ ---
184
+
185
+ ## ๐Ÿ“ Writing Feature Files and POM Files
186
+
187
+ Artes simplifies your test writing with structured feature files and organized Page Object Models (POM). Hereโ€™s how you can create them:
188
+
189
+ ### 1. ๐Ÿ“„ Feature File Structure
190
+
191
+ ```gherkin
192
+ Feature: Searching on Google ๐Ÿ”
193
+ Scenario Outline: Search for a term on Google
194
+ Given User is on "https://www.google.com/" page
195
+ When User types "alma" in "google_search_input"
196
+ And User clicks "google_search_button"
197
+ And User waits 10 seconds
198
+ Then "google_text" should have "Alma" text
199
+ ```
200
+
201
+ - **Feature**: Describes the main feature being tested (e.g., Google search).
202
+ - **Scenario Outline**: Defines a test case with steps.
203
+ - **Steps**: Use `Given`, `When`, `And`, `Then` keywords to describe actions and expectations.
204
+ - **Selectors**: The element names (e.g., `google_search_input`, `google_search_button`) map to the POM file or can be defined directly.
205
+
206
+ ### 2. ๐Ÿ“‚ POM File Example
207
+
208
+ ```json
209
+ {
210
+ "google_search_input": { "selector": "#APjFqb" },
211
+ "google_search_button": {
212
+ "selector": "input.gNO89b"
213
+ },
214
+ "google_text": {
215
+ "selector": "#rso div h3",
216
+ "waitTime": 5 //seconds
217
+ }
218
+ }
219
+ ```
220
+
221
+ - ๐Ÿ“‘ Using POM File is optional but it is **RECOMMENDED**
222
+ - ๐Ÿ”— Using Selector in Feature File is possible
223
+ ```gherkin
224
+ When User types "alma" in "#APjFqb"
225
+ ```
226
+ - ๐Ÿ It is good to use snake_case for element names
227
+ - โณ "waitTime" is to define custom wait for elements, but the feature currently under development.
228
+ "selector" must be used if "waitTime" is used, but when using only selector is not needed mention in "selector"
229
+
230
+ ---
231
+
232
+ ## ๐Ÿ”„ Variable Management
233
+
234
+ Artes provides powerful variable management capabilities that allow you to save, reuse, and share variables across test steps.
235
+
236
+ ### Saving Variables from API Responses
237
+
238
+ You can save variables directly from API responses, even using dot notation to extract nested values:
239
+
240
+ ```gherkin
241
+ When User sends GET request to "https://www.test.com" and saves "id" variables
242
+ And User sends GET request to "https://www.test.com/items/{{id}}"
243
+ Then User expects that response should have 200 status code
244
+ ```
245
+
246
+ ### Manual Variable Assignment
247
+
248
+ Save variables manually using the dedicated step:
249
+
250
+ ```gherkin
251
+ And User saves "15" variable as "id"
252
+ ```
253
+
254
+ ### Variable Randomization
255
+
256
+ Artes includes built-in randomization for generating dynamic test data:
257
+
258
+ ```gherkin
259
+ And User sets random email as "email"
260
+ And User sets random 5 words as "description"
261
+ And User sets random fullname as "fullName"
262
+ ```
263
+
264
+ ### Using Variables in Tests
265
+
266
+ Reference saved variables anywhere in your tests using double curly braces:
267
+
268
+ ```gherkin
269
+ When User types "{{email}}" in "email_input"
270
+ ```
271
+
272
+ ๐Ÿ“š **For detailed information and complete step definitions**, visit the [Variable Management Documentation](https://github.com/4gayev1/Artes/blob/main/docs/stepDefinitions.md#variable-management).
273
+
274
+ ---
275
+
276
+ ## ๐Ÿ› ๏ธ Customization
277
+
278
+ ## โœ๏ธ Writing Custom Step Definitions
279
+
280
+ Artes allows you to extend its functionality by writing custom step definitions. Here's how you can do it:
281
+
282
+ ### Import Required APIs
283
+
284
+ ```javascript
285
+ const {
286
+ expect,
287
+ Given,
288
+ When,
289
+ Then,
290
+ element,
291
+ context,
292
+ keyboard,
293
+ mouse,
294
+ frame,
295
+ assert,
296
+ elementInteractions,
297
+ } = require("artes"); // Common JS
298
+ import { expect, Given, When, Then, element, context } from "artes"; // ES Modules (Do not RECOMMENDED)
299
+ ```
300
+
301
+ - **`Given`, `When`, `Then`**: These define your steps in Cucumber syntax. Example:
302
+
303
+ ```javascript
304
+ Given("User is on the login page", async () => {
305
+ await context.page.navigateTo("https://example.com/login");
306
+ });
307
+ ```
308
+
309
+ - **`page`**: Provides higher-level page actions such as navigation and waiting(Same as PlayWright). Examples:
310
+ - Navigate to a URL:
311
+ ```javascript
312
+ await context.page.navigate("https://example.com");
313
+ ```
314
+ - Wait for a selector:
315
+ ```javascript
316
+ await context.page.waitForSelector("#loadingSpinner");
317
+ ```
318
+ - **`request`**: Use for sending HTTP requests. _(Note: This feature is currently under development.)_
319
+
320
+ - **`element`**: Use for interacting with elements on the web page. Examples:
321
+ - Clicking a button:
322
+ ```javascript
323
+ await element("#submitButton").click();
324
+ ```
325
+ - Filling an input:
326
+ ```javascript
327
+ await element("#username").fill("testUser");
328
+ ```
329
+ - **`expect`**: Use for assertions in your steps. For example:
330
+ ```javascript
331
+ expect(actualValue).toBe(expectedValue);
332
+ expect(element("Page_Title")).toHaveText(expectedValue);
333
+ ```
334
+
335
+ ## ๐Ÿ“‹ Simplified Functions
336
+
337
+ If you don't want to deal with Playwright methods directly, you can simply use the following predefined actions methods by import them:
338
+
339
+ ```javascript
340
+ const { mouse, keyboard, frame, elementInteractions, page } = require("artes");
341
+ ```
342
+
343
+ - **Mouse Actions:**
344
+ `mouse.click(element)`
345
+
346
+ - **Keyboard Actions:**
347
+ `keyboard.press(key)`
348
+
349
+ - **Element Interactions:**
350
+ `elementInteractions.isChecked()`
351
+
352
+ - **Assertions:**
353
+ `assert.shouldBeTruthy(element)`
354
+
355
+ - **Frame Actions:**
356
+ `frame.first()`
357
+
358
+ - **API Actions:**
359
+ `api.post(url, payload, requestDataType)`
360
+
361
+ ---
362
+
363
+ For a detailed explanation of each function, please refer to the [function definitions](./docs/functionDefinitions.md).
364
+
365
+ ---
366
+
367
+ ### Example of Custom Step Definition
368
+
369
+ ```javascript
370
+ const { Given, When, Then, expect, element, page } = require("artes");
371
+
372
+ Given("User is on the home page", async () => {
373
+ await page.navigate("https://example.com");
374
+ });
375
+
376
+ When("User clicks the login button", async () => {
377
+ await element("#loginButton").click();
378
+ });
379
+
380
+ Then("User should see the login form", async () => {
381
+ expect(element("#loginForm")).toBeVisible(true);
382
+ });
383
+ ```
384
+
385
+ ## ๐Ÿช Hooks (Lifecycle Hooks)
386
+
387
+ Artes supports **hooks** that allow you to execute custom logic **before and after tests, scenarios, and steps**.
388
+
389
+ Hooks are **user-defined**.
390
+
391
+ ---
392
+
393
+ ### ๐Ÿ“ Hooks File Location
394
+
395
+ Create the following file **inside your project** (optional):
396
+ ```
397
+ tests/steps/hooks.js
398
+ ```
399
+
400
+ ---
401
+
402
+ ### โœ๏ธ Writing Hooks
403
+
404
+ You can define **only the hooks you need** in hooks.js under the steps folder.
405
+ Undefined hooks are automatically skipped.
406
+
407
+ ```js
408
+ // tests/steps/hooks.js
409
+
410
+ export function BeforeStep() {
411
+ // hook for before each step
412
+ }
413
+
414
+ export function Before() {
415
+ // hook for before each test
416
+ }
417
+
418
+ export function BeforeAll() {
419
+ // hook for before all tests
420
+ }
421
+
422
+ export function AfterStep() {
423
+ // hook for after each step
424
+ }
425
+
426
+ export function After() {
427
+ // hook for after each test
428
+ }
429
+
430
+ export function AfterAll() {
431
+ // hook for after all tests
432
+ }
433
+ ```
434
+
435
+ ---
436
+
437
+ ### ๐Ÿ” Supported Hook Types
438
+
439
+ | Hook Name | Execution Time |
440
+ | ------------ | ----------------------------- |
441
+ | `BeforeAll` | Once before **all scenarios** |
442
+ | `Before` | Before **each scenario** |
443
+ | `BeforeStep` | Before **each step** |
444
+ | `AfterStep` | After **each step** |
445
+ | `After` | After **each scenario** |
446
+ | `AfterAll` | Once after **all scenarios** |
447
+
448
+ ---
449
+
450
+ ### โ–ถ๏ธ Execution Order Example
451
+
452
+ For a scenario with steps:
453
+ ```
454
+ BeforeAll
455
+ Before
456
+ BeforeStep
457
+ (step executes)
458
+ AfterStep
459
+ After
460
+ AfterAll
461
+ ```
462
+
463
+ ---
464
+
465
+ ## โš™๏ธ Configuration
466
+
467
+ You can configure Artes by editing the `artes.config.js` file. Below are the default configuration options with explanations:
468
+
469
+ | **Option** | **Default Value** | **Description** |
470
+ | ----------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------- |
471
+ | `timeout` | `30` | Default timeout in seconds. |
472
+ | `slowMo` | `0` | Default slow motion in seconds |
473
+ | `paths` | `[moduleConfig.featuresPath]` | Paths to feature files. |
474
+ | `require` | `[moduleConfig.stepsPath, "src/stepDefinitions/*.js", "src/hooks/hooks.js"]` | Support code paths (CommonJS). |
475
+ | `pomPath` | `moduleConfig.pomPath` | Path to Page Object Models. |
476
+ | `import` | `[]` | Support code paths. |
477
+ | `testPercentage` | `0` | Define test coverage percentage |
478
+ | `report` | `false` | Generate report |
479
+ | `reportSuccess` | `false` | Add screenshots and video records for also success test cases |
480
+ | `trace` | `false` | Enable trace |
481
+ | `reportWithTrace` | `false` | Add trace to the report |
482
+ | `format` | `["rerun:@rerun.txt", "allure-cucumberjs/reporter"]` | Formatter names/paths. |
483
+ | `formatOptions` | `{ "resultsDir": "allure-result" }` | Formatter options. |
484
+ | `parallel` | `1` | Number of parallel workers. |
485
+ | `dryRun` | `false` | Prepare test run without execution. |
486
+ | `failFast` | `false` | Stop on first test failure. |
487
+ | `forceExit` | `false` | Force `process.exit()` after tests. |
488
+ | `strict` | `true` | Fail on pending steps. |
489
+ | `backtrace` | `false` | Show full backtrace for errors. |
490
+ | `tags` | `""` | Tag expression to filter scenarios. |
491
+ | `name` | `[]` | Run scenarios matching regex. |
492
+ | `order` | `"defined"` | Run order (defined/random). |
493
+ | `language` | `"en"` | Default feature file language. |
494
+ | `loader` | `[]` | Module loader specifications. |
495
+ | `requireModule` | `[]` | Transpilation module names. |
496
+ | `retry` | `0` | Retry attempts for failing tests. |
497
+ | `retryTagFilter` | `""` | Tag expression for retries. |
498
+ | `publish` | `false` | Publish to cucumber.io. |
499
+ | `worldParameters` | `{}` | Custom world parameters. |
500
+
501
+ ---
502
+
503
+ ## ๐ŸŒ Environment Configuration
504
+
505
+ | **Option** | **Default Value** | **Description** |
506
+ | ---------- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
507
+ | `env` | `""` | Environment configuration. Should match the name with the baseURL object, like "dev" |
508
+ | `baseURL` | `""` | Base URL for API requests. Can be object {"dev":"dev-api.com", "pre":"pre-api.com"}, or string "dev-api.com" |
509
+
510
+ ### Environment Variables Configuration
511
+
512
+ Artes supports environment-specific configurations through environment variables. This feature allows to manage different settings for environments.
513
+
514
+ ### Setting Up Environment Variables
515
+
516
+ 1. **Configure Environment in artes.config.js:**
517
+ ```javascript
518
+ module.exports = {
519
+ baseURL: {
520
+ dev: "https://dev.alma.az",
521
+ pre: "https://pre.alma.az",
522
+ prod: "https://api.alma.az"
523
+ },
524
+ env: "dev", // Specify which environment to use
525
+ };
526
+ ```
527
+
528
+ **Alternative single URL configuration:**
529
+ ```javascript
530
+ module.exports = {
531
+ baseURL: "https://api.alma.az", // Direct string URL
532
+ };
533
+ ```
534
+
535
+ 2. **Create Environment Variable Files:**
536
+ Create JSON files under `src/tests/environment_variables/` folder with names matching your environment:
537
+
538
+ **dev.env.json:**
539
+ ```json
540
+ {
541
+ "api_key": "dev-api-key-12345",
542
+ "auth_token": "dev-auth-token",
543
+ "database_url": "dev-db.example.com",
544
+ "timeout": 5000,
545
+ "headers": {
546
+ "Authorization": "Bearer dev-token",
547
+ "Content-Type": "application/json"
548
+ }
549
+ }
550
+ ```
551
+
552
+ ### How It Works
553
+
554
+ 1. **Environment Detection:** When Artes runs, it reads the `env` value from `artes.config.js`
555
+ 2. **Base URL Resolution:** If `baseURL` is an object, it uses the environment key to find the corresponding URL. If `baseURL` is a string, it uses it directly
556
+ 3. **Variable Loading:** Artes looks for a JSON file matching the environment name in `src/tests/environment_variables/`
557
+ 4. **Runtime Access:** All variables from the environment file become available during test execution
558
+
559
+ ### Important Notes
560
+
561
+ - โš ๏ธ **Base URLs must be defined in `artes.config.js`** - they cannot be set in the environment variable JSON files
562
+ - ๐Ÿ“ Environment variable files should be placed in `src/tests/environment_variables/`
563
+ - ๐Ÿท๏ธ File names must follow the format `{env}.env.json` (e.g., `dev.env.json` for `env: "dev"`)
564
+ - ๐Ÿ”„ Variables are loaded into variable storage and can be accessed during test runs
565
+ - ๐ŸŒ Use environment variables for headers, API keys, timeouts, and other environment-specific configurations
566
+
567
+ ---
568
+
569
+ ### Browser Configuration
570
+
571
+ | Option | Default Value | Description |
572
+ | ------------- | ------------------------------ | ------------------------------------------------------ |
573
+ | `browserType` | `"chrome"` | Browser type (`"chrome"`, `"firefox"`, or `"webkit"`). |
574
+ | `viewport` | `{ width: 1280, height: 720 }` | Browser viewport size. |
575
+ | `headless` | `true` | Run browser in headless mode (`true` or `false`). |
576
+
577
+ ## ๐Ÿ“Š Report Generation
578
+
579
+ Artes can generate Allure reports. After running tests with the `-r` flag, the reports will be stored in the `report` folder in HTML format. You can view them in your browser after the tests complete.
580
+
581
+ ---
582
+
583
+ ## ๐Ÿณ Docker Image for CI/CD
584
+
585
+ A Docker image `vahidaghayev/artes` is available for running Artes in CI/CD pipelines. This image includes:
586
+
587
+ - **Playwright Browsers**: Pre-installed to support UI testing.
588
+ - **Xvfb**: Enables running UI tests with video recording in a virtual display.
589
+
590
+ ### Recommended Settings for Best Quality
591
+
592
+ To achieve the best video recording quality, use the following command:
593
+
594
+ ```bash
595
+ xvfb-run -a --server-args="-screen 0 3840x1180x24" --auto-servernum npx artes --width 1600 --height 900
596
+ ```
597
+
598
+ ---
599
+
600
+ ## ๐Ÿ‘ Good To Use
601
+
602
+ If you don't use the -c or --create option that the package offers, save the file below under the `.vscode` folder:
603
+
604
+ - Those configurations will help autocomplete both predefined and custom step definitions in your features file
605
+
606
+ **extensions.json**
607
+
608
+ ```json
609
+ {
610
+ "recommendations": ["CucumberOpen.cucumber-official"]
611
+ }
612
+ ```
613
+
614
+ **settings.json**
615
+
616
+ ```json
617
+ {
618
+ "cucumber.glue": [
619
+ "tests/steps/*.{ts,js}",
620
+ "node_modules/artes/src/tests/stepDefinitions/*.{ts,js}"
621
+ ],
622
+ "cucumber.features": ["tests/features/*.features"],
623
+ "cucumberautocomplete.syncfeatures": true,
624
+ "cucumberautocomplete.strictGherkinCompletion": true
625
+ }
626
+ ```
627
+
628
+ ---
629
+
630
630
  ## ๐Ÿง‘โ€๐Ÿ’ป Have a Good Testing