added I upload file step

Author: Oleksandr_Halichenko

CHANGELOG.md

@@ -1,7 +1,10 @@
+## 0.0.12
+- :rocket: added _I upload file_ step
+
 ## 0.0.11
 - :rocket: removed po package dependency
 - :rocket: added util functions exports to build custom steps
-- 
+
 ## 0.0.9
 - :rocket: added scroll by offset steps
 - :rocket: updated po dependency to support ignoreHierarchy options

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/steps-playwright",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "steps to interact with playwright",
   "main": "./index.js",
   "scripts": {
@@ -29,11 +29,11 @@
     "@qavajs/xunit-formatter": "^0.0.3",
     "@types/chai": "^4.3.4",
     "@types/jest": "^29.4.0",
-    "jest": "^29.4.0",
+    "jest": "^29.4.1",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
-    "@qavajs/po-playwright": "^0.0.6"
+    "@qavajs/po-playwright": "^0.0.7"
   },
   "dependencies": {
     "@playwright/test": "^1.30.0",

package.json

@@ -196,3 +196,16 @@ When('I scroll by {string} in {string}', async function (offset: string, alias:
         element.scrollBy(...coords as [number, number]);
     }, coords);
 });
+
+
+/**
+ * Provide file url to upload input
+ * @param {string} alias - element to upload file
+ * @param {string} value - file path
+ * @example I upload '/folder/file.txt' to 'File Input'
+ */
+When('I upload {string} file to {string}', async function (value: string, alias: string) {
+    const element = await getElement(alias);
+    const filePath = await getValue(value);
+    await element.setInputFiles(filePath);
+});

src/actions.ts

@@ -9,6 +9,7 @@
 <button id="button">Click Me!</button>
 <button id="buttonHover">Hover Me!</button>
 <label for="input"></label><input type="text" id="input"/>
+<input type="file" id="fileInput"/>
 <button class="button">Button1</button>
 <button class="button">Button2</button>
 <button class="button">Button3</button>
@@ -50,6 +51,7 @@
   const button = document.querySelector('#button');
   const buttonHover = document.querySelector('#buttonHover');
   const input = document.querySelector('#input');
+  const fileInput = document.querySelector('#fileInput');
   const buttons = document.querySelectorAll('.button');
   const body = document.body;
   const select = document.querySelector('#select');
@@ -76,6 +78,10 @@
     action.innerText = input.value;
   });
 
+  fileInput.addEventListener('input', function () {
+    action.innerText = 'file:' + fileInput.value;
+  });
+
   buttons.forEach(b => {
     b.addEventListener('click', function () {
       action.innerText = b.innerText;

test-e2e/apps/actions.html

@@ -84,3 +84,12 @@ Feature: actions
   Scenario: type in ignore hierarchy component
     When I type 'test value' to 'IgnoreHierarchyComponent > Input'
     Then I expect text of 'Action' to be equal 'test value'
+
+  Scenario: type in component without selector
+    When I type 'test value' to 'Component Without Selector > Input'
+    Then I expect text of 'Action' to be equal 'test value'
+
+  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'
+

test-e2e/features/actions.feature

@@ -28,5 +28,7 @@ export default class Memory {
         {"name": "Memory Mock 2"},
         {"name": "Memory Mock 3"}
     ]);
+
+    uploadFile = resolve('./test-e2e/apps/actions.html');
 }
 

test-e2e/memory/index.ts

@@ -3,7 +3,7 @@ export default class App {
     SimpleTextElement = $('#textValue');
     SimpleTextListItems = $$('#textValueList li');
     SimpleTextInput = $('#textInput');
-
+    FileInput = $('#fileInput');
     Action = $('#action');
     Button = $('#button');
     ButtonHover = $('#buttonHover');
@@ -28,9 +28,14 @@ export default class App {
     OverflowContainer = $('#overflowContainer');
 
     IgnoreHierarchyComponent = $(new IgnoreHierarchyComponent('#ignoreHierarchyComponent'));
+    ComponentWithoutSelector = $(new ComponentWithoutSelector());
 
 }
 
 class IgnoreHierarchyComponent extends Component {
     Input = $('#input', { ignoreHierarchy: true });
 }
+
+class ComponentWithoutSelector {
+    Input = $('#input');
+}