implemented drag-n-drop step (#45)

AlexGalichenko · web-flow · commit 2961d1ff8381 · 2023-05-12T16:26:14.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,9 @@ All notable changes to the "@qavajs/steps-playwright" will be documented in this
 
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
+## [0.0.21]
+- :rocket: added I drag and drop... step
+
 ## [0.0.20]
 - :rocket: enabled all options in new context
 - :rocket: implemented context reload instead browser
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ const App = require('./page_object');
 module.exports = {
     default: {
         require: [
-            'node_modules/@qavajs/steps-playwright'
+            'node_modules/@qavajs/steps-playwright/index.js'
         ],
         browser: {
             timeout: {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/steps-playwright",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "steps to interact with playwright",
   "main": "./index.js",
   "scripts": {
@@ -23,14 +23,14 @@
   },
   "homepage": "https://github.com/qavajs/steps-playwright#readme",
   "devDependencies": {
-    "@cucumber/cucumber": "^9.1.0",
-    "@qavajs/cli": "^0.0.21",
+    "@cucumber/cucumber": "^9.1.2",
+    "@qavajs/cli": "^0.0.22",
     "@qavajs/console-formatter": "^0.2.1",
     "@qavajs/memory": "^1.3.0",
     "@qavajs/po-playwright": "^0.0.9",
     "@qavajs/webstorm-adapter": "^8.0.0",
     "@qavajs/xunit-formatter": "^0.0.4",
-    "@types/chai": "^4.3.4",
+    "@types/chai": "^4.3.5",
     "@types/express": "^4.17.17",
     "@types/jest": "^29.5.1",
     "express": "^4.18.2",
diff --git a/src/actions.ts b/src/actions.ts
@@ -268,3 +268,16 @@ When('I type {string} to alert', async function (value: string) {
         resolve();
     }))
 });
+
+/**
+ * Drag&Drop one element to another
+ * @param {string} elementAlias - element to drag
+ * @param {string} targetAlias - target
+ * @example I drag and drop 'Bishop' to 'E4'
+ */
+When('I drag and drop {string} to {string}', async function (elementAlias, targetAlias) {
+    const element = await getElement(elementAlias);
+    const target = await getElement(targetAlias);
+    await element.dragTo(target);
+});
+
diff --git a/test-e2e/apps/dragdrop.html b/test-e2e/apps/dragdrop.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+    <style>
+        #div1 {
+            width: 350px;
+            height: 70px;
+            padding: 10px;
+            border: 1px solid #aaaaaa;
+        }
+    </style>
+    <script>
+        function allowDrop(ev) {
+            ev.preventDefault();
+        }
+
+        function drag(ev) {
+            ev.dataTransfer.setData("text", ev.target.id);
+        }
+
+        function drop(ev) {
+            ev.preventDefault();
+            const data = ev.dataTransfer.getData("text");
+            ev.target.appendChild(document.getElementById(data));
+        }
+    </script>
+    <title></title>
+</head>
+<body>
+
+<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+<br>
+<div id="drag1" draggable="true" ondragstart="drag(event)" style="background-color: #aaaaaa; height: 50px; width: 200px"></div>
+</body>
+</html>
diff --git a/test-e2e/features/dragdrop.feature b/test-e2e/features/dragdrop.feature
@@ -0,0 +1,8 @@
+Feature: Drag And Drop
+
+  Background:
+    When I open '$dragDropPage' url
+
+  Scenario: drag and drop
+    When I drag and drop 'Drag Element' to 'Drop Zone'
+    And I expect 'Drag Element In Drop Zone' to be visible
diff --git a/test-e2e/memory/index.ts b/test-e2e/memory/index.ts
@@ -8,6 +8,7 @@ export default class Memory {
     waitsPage = file(resolve('./test-e2e/apps/waits.html'));
     mockPage = file(resolve('./test-e2e/apps/mock.html'));
     storagePage = file(resolve('./test-e2e/apps/storage.html'));
+    dragDropPage = file(resolve('./test-e2e/apps/dragdrop.html'));
 
     array = (...args: Array<any>) => args;
 
diff --git a/test-e2e/page_object/index.ts b/test-e2e/page_object/index.ts
@@ -38,6 +38,10 @@ export default class App {
     LocalStorage = $('#localStorage');
     SessionStorage = $('#sessionStorage');
 
+    DropZone = $('div#div1');
+    DragElement = $('div#drag1');
+    DragElementInDropZone = $('div#div1 div#drag1');
+
 }
 
 class IgnoreHierarchyComponent extends Component {

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,10 @@ export default class App {`
`38`	`38`	`LocalStorage = $('#localStorage');`
`39`	`39`	`SessionStorage = $('#sessionStorage');`
`40`	`40`
	`41`	`+ DropZone = $('div#div1');`
	`42`	`+ DragElement = $('div#drag1');`
	`43`	`+ DragElementInDropZone = $('div#div1 div#drag1');`
	`44`	`+`
`41`	`45`	`}`
`42`	`46`
`43`	`47`	`class IgnoreHierarchyComponent extends Component {`