added step for uploading multiple files

CHANGELOG.md

@@ -14,6 +14,14 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 :microscope: - experimental
 
+## [2.12.0]
+- :rocket: added step for uploading multiple files 
+```Gherkin
+When I upload files by clicking 'File Input':
+  | $uploadFile  |
+  | $uploadFile2 |
+```
+
 ## [2.11.2]
 - :rocket: added `action` timeout as default for all playwright methods (https://playwright.dev/docs/api/class-browsercontext#browser-context-set-default-timeout)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/steps-playwright",
-  "version": "2.11.2",
+  "version": "2.12.0",
   "description": "qavajs steps to interact with playwright",
   "main": "./index.js",
   "scripts": {
@@ -28,22 +28,22 @@
   "devDependencies": {
     "@cucumber/cucumber": "^12.2.0",
     "@qavajs/console-formatter": "^1.1.1",
-    "@qavajs/core": "^2.11.0",
+    "@qavajs/core": "^2.12.0",
     "@qavajs/html-formatter": "^1.0.0",
     "@qavajs/memory": "^1.10.3",
-    "@qavajs/validation": "^1.4.1",
+    "@qavajs/validation": "^1.6.0",
     "@types/express": "^5.0.5",
-    "@types/node": "^24.9.2",
-    "@vitest/coverage-v8": "^4.0.6",
-    "@vitest/ui": "^4.0.6",
-    "electron": "^39.0.0",
+    "@types/node": "^24.10.1",
+    "@vitest/coverage-v8": "^4.0.14",
+    "@vitest/ui": "^4.0.14",
+    "electron": "^39.2.3",
     "express": "^5.1.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.14"
   },
   "dependencies": {
-    "@playwright/test": "^1.56.1"
+    "@playwright/test": "^1.57.0"
   },
   "keywords": [
     "test",

src/actions.ts

@@ -1,6 +1,6 @@
 import { type Page, type Locator } from '@playwright/test';
-import { parseCoords, parseCoordsAsObject, sleep } from './utils/utils';
-import { type MemoryValue, When } from '@qavajs/core';
+import { dataTable2Array, parseCoords, parseCoordsAsObject, sleep } from './utils/utils';
+import { type DataTable, type MemoryValue, When } from '@qavajs/core';
 import { QavajsPlaywrightWorld } from './QavajsPlaywrightWorld';
 
 /**
@@ -283,6 +283,22 @@ When('I upload {value} file to {playwrightLocator}', async function (this: Qavaj
     await locator.setInputFiles(await filePath.value());
 });
 
+/**
+ * Provide multiple file urls to file chooser
+ * @param {string} alias - element that invokes upload file chooser
+ * @param {string} value - file path
+ * @example I upload files by clicking 'Upload Button':
+ * | path1 |
+ * | path2 |
+ */
+When('I upload files by clicking {playwrightLocator}:', async function (this: QavajsPlaywrightWorld, locator: Locator, dataTable: DataTable) {
+    const fileChooserPromise = this.playwright.page.waitForEvent('filechooser');
+    await locator.click();
+    const fileChooser = await fileChooserPromise;
+    const filesArray = await dataTable2Array(this, dataTable)
+    await fileChooser.setFiles(filesArray);
+});
+
 /**
  * Provide file url to file chooser
  * @param {string} alias - element that invokes upload file chooser

src/utils/utils.ts

@@ -1,8 +1,9 @@
 import { ScreenshotEvent } from './screenshotEvent';
 import { TraceEvent } from './traceEvent';
 import { VideoEvent } from './videoEvent';
-import { Status, ITestStepHookParameter, ITestCaseHookParameter } from '@qavajs/core';
+import { Status, type ITestStepHookParameter, type ITestCaseHookParameter, type DataTable } from '@qavajs/core';
 import { join } from 'node:path';
+import type { QavajsPlaywrightWorld } from '../QavajsPlaywrightWorld';
 
 export function saveScreenshotAfterStep(config: any, step: ITestStepHookParameter): boolean {
     const screenshotEvent = getEventValue(config?.driverConfig?.screenshot);
@@ -75,3 +76,13 @@ function getEventValue(entity: any) {
         ? entity.event
         : entity;
 }
+
+/**
+ * Transform key-value data table to array
+ * @param ctx
+ * @param dataTable
+ * @return {any[]}
+ */
+export function dataTable2Array(ctx: QavajsPlaywrightWorld, dataTable: DataTable): Promise<any[]> {
+    return Promise.all(dataTable.raw().map(([value]) => ctx.getValue(value)));
+}

src/waits.ts

@@ -1,6 +1,6 @@
 import { type Locator } from '@playwright/test';
 import { type MemoryValue, type Validation, When } from '@qavajs/core';
-import { QavajsPlaywrightWorld } from './QavajsPlaywrightWorld';
+import { type QavajsPlaywrightWorld } from './QavajsPlaywrightWorld';
 
 /**
  * Refresh page unless element matches condition

test-e2e/apps/actions.html

@@ -10,7 +10,7 @@
 <button id="buttonTap">Tap Me!</button>
 <button id="buttonHover">Hover Me!</button>
 <label for="input"></label><input type="text" id="input"/>
-<input type="file" id="fileInput"/>
+<input type="file" id="fileInput" multiple/>
 <button class="button">Button1</button>
 <button class="button">Button2</button>
 <button class="button">Button3</button>
@@ -130,7 +130,7 @@
     });
 
     fileInput.addEventListener('input', function () {
-        action.innerText = 'file:' + fileInput.value;
+        action.innerText = 'file:' + Object.values(fileInput.files).map(file => file.name).join(';');
     });
 
     buttons.forEach(b => {

test-e2e/features/actions.feature

@@ -130,11 +130,17 @@ Feature: actions
 
   Scenario: upload file
     When I upload '$uploadFile' file to 'File Input'
-    Then I expect text of 'Action' to be equal 'file:C:\fakepath\actions.html'
+    Then I expect text of 'Action' to be equal 'file:actions.html'
 
   Scenario: upload file via file chooser
     When I upload '$uploadFile' file by clicking 'File Input'
-    Then I expect text of 'Action' to be equal 'file:C:\fakepath\actions.html'
+    Then I expect text of 'Action' to be equal 'file:actions.html'
+
+  Scenario: upload multiple files via file chooser
+    When I upload files by clicking 'File Input':
+      | $uploadFile |
+      | $uploadFile |
+    Then I expect text of 'Action' to be equal 'file:actions.html;actions.html'
 
   Scenario: close current browser tab
     When I expect current url to contain 'actions.html'