Mouse and keyboard actions (#55)

* added mouse and keyboard actions steps

Author: AlexGalichenko

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.26.0]
+- :rocket: added mouse and keyboard actions steps
+
 ## [0.25.0]
 - :rocket: added enabled/disabled validation
 - :beetle: fixed issue with default timeouts

index.js

@@ -11,3 +11,5 @@ require('./lib/localSessionStorage.js');
 require('./lib/mock.js');
 require('./lib/poDefine.js');
 require('./lib/multiBrowser.js');
+require('./lib/mouseActions.js');
+require('./lib/keyboardActions.js');

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/steps-playwright",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "steps to interact with playwright",
   "main": "./index.js",
   "scripts": {

package.json

@@ -0,0 +1,19 @@
+import { When } from '@cucumber/cucumber';
+
+/**
+ * Press and hold keyboard key
+ * @param {string} key - key to press
+ * @example When I hold down 'Q' key
+ */
+When('I hold down {string} key', async function (key) {
+    await page.keyboard.down(key);
+});
+
+/**
+ * Release keyboard key
+ * @param {string} key - key to release
+ * @example When I release 'A' key
+ */
+When('I release {string} key', async function (key) {
+    await page.keyboard.up(key);
+});

src/keyboardActions.ts

@@ -0,0 +1,41 @@
+import { When } from '@cucumber/cucumber';
+import { getValue } from './transformers';
+import { parseCoords } from './utils/utils';
+
+/**
+ * Press mouse key
+ * @param {string} button - button to press (left, right, middle)
+ * @example When I press left mouse button
+ */
+When('I press {playwrightMouseButton} mouse button', async function (button) {
+    await page.mouse.down({ button });
+});
+
+/**
+ * Release mouse key
+ * @param {string} button - button to release (left, right, middle)
+ * @example When I release left mouse button
+ */
+When('I release {playwrightMouseButton} mouse button', async function (button) {
+    await page.mouse.up({ button });
+});
+
+/**
+ * Move mouse to coordinates
+ * @param {string} coords - x, y coordinates to move
+ * @example When I move mouse to '10, 15'
+ */
+When('I move mouse to {string}', async function (coords){
+    const [x, y] = parseCoords(await getValue(coords));
+    await page.mouse.move(x, y);
+});
+
+/**
+ * Scroll mouse wheel by x, y offset
+ * @param {string} coords - x, y offset to scroll
+ * @example When I scroll mouse wheel by '0, 15'
+ */
+When('I scroll mouse wheel by {string}', async function (offset) {
+    const [x, y] = parseCoords(await getValue(offset));
+    await page.mouse.wheel(x, y);
+});

src/mouseActions.ts

@@ -34,3 +34,10 @@ defineParameterType({
     transformer: p => p ? parseInt(p) : null,
     useForSnippets: false
 });
+
+defineParameterType({
+    name: 'playwrightMouseButton',
+    regexp: /(left|right|middle)/,
+    transformer: p => p,
+    useForSnippets: false
+});

src/types.ts

@@ -51,6 +51,10 @@
 <div>
   <pre id="keywordevent"></pre>
 </div>
+
+<div id="mouseEvent" style="height: 200px; width: 200px; background-color: #0f9e9e"></div>
+<input id="keyboardEvent" style="height: 200px; width: 200px; background-color: #0f9e9e"></input>
+
 <script>
   const action = document.querySelector('#action');
   const button = document.querySelector('#button');
@@ -64,6 +68,9 @@
   const confirm = document.querySelector('#confirm');
   const prompt = document.querySelector('#prompt');
   const keywordEvent = document.querySelector('#keywordevent');
+  const mouseEvent = document.querySelector('#mouseEvent');
+  const keyboardEvent = document.querySelector('#keyboardEvent');
+
   let presses = 0;
 
   button.addEventListener('click', function () {
@@ -128,6 +135,70 @@
     setTimeout(()=> action.innerText = window.prompt('Are you robot?'), 500);
   });
 
+  mouseEvent.addEventListener('mousedown', function (event) {
+    mouseEvent.innerText = JSON.stringify({
+      type: event.type,
+      screenX: event.screenX,
+      screenY: event.screenY,
+      buttons: event.buttons
+    });
+    event.preventDefault();
+  });
+
+  mouseEvent.addEventListener('mouseup', function (event) {
+    mouseEvent.innerText = JSON.stringify({
+      type: event.type,
+      screenX: event.screenX,
+      screenY: event.screenY,
+      buttons: event.buttons
+    });
+    event.preventDefault();
+  });
+
+  mouseEvent.addEventListener('contextmenu', function (event) {
+    event.preventDefault();
+  });
+
+  mouseEvent.addEventListener('wheel', function (event) {
+    console.log(event)
+    mouseEvent.innerText = JSON.stringify({
+      type: event.type,
+      screenX: event.screenX,
+      screenY: event.screenY,
+      buttons: event.buttons,
+      deltaY: event.deltaY
+    });
+    event.preventDefault();
+  });
+
+  mouseEvent.addEventListener('mousemove', function (event) {
+    mouseEvent.innerText = JSON.stringify({
+      type: event.type,
+      screenX: event.screenX,
+      screenY: event.screenY,
+      buttons: event.buttons
+    });
+    event.preventDefault();
+  });
+
+  keyboardEvent.addEventListener('keydown', function (event) {
+    console.log(event)
+    keyboardEvent.value = JSON.stringify({
+      type: event.type,
+      code: event.code
+    });
+    event.preventDefault();
+  });
+
+  keyboardEvent.addEventListener('keyup', function (event) {
+    console.log(event)
+    keyboardEvent.value = JSON.stringify({
+      type: event.type,
+      code: event.code
+    });
+    event.preventDefault();
+  });
+
 </script>
 </body>
 </html>

test-e2e/apps/actions.html

@@ -0,0 +1,13 @@
+Feature: keyboard actions
+
+  Background:
+    When I open '$actionsPage' url
+    And I click 'Keyboard Event Handler'
+
+  Scenario: key press and release
+    When I hold down 'Q' key
+    Then I expect 'value' property of 'Keyboard Event Handler' to contain '"code":"KeyQ"'
+    Then I expect 'value' property of 'Keyboard Event Handler' to contain '"type":"keydown"'
+    When I release 'Q' key
+    Then I expect 'value' property of 'Keyboard Event Handler' to contain '"code":"KeyQ"'
+    Then I expect 'value' property of 'Keyboard Event Handler' to contain '"type":"keyup"'

test-e2e/features/keyboardActions.feature

@@ -0,0 +1,34 @@
+Feature: mouse actions
+
+  Background:
+    When I open '$actionsPage' url
+    And I hover over 'Event Handler'
+
+  Scenario Outline: mouse press and release
+    Then I press <button> mouse button
+    And I expect text of 'Event Handler' to contain '"buttons":<buttonCode>'
+    And I expect text of 'Event Handler' to contain '"type":"mousedown"'
+    Then I release <button> mouse button
+    And I expect text of 'Event Handler' to contain '"buttons":0'
+    And I expect text of 'Event Handler' to contain '"type":"mouseup"'
+
+    Examples:
+      | button | buttonCode |
+      | left   | 1          |
+      | right  | 2          |
+      | middle | 4          |
+
+  Scenario: mouse move
+    Then I move mouse to '10, 10'
+    And I expect text of 'Event Handler' to contain '"type":"mousemove"'
+
+  Scenario Outline: mouse wheel
+    Then I scroll mouse wheel by '<offset>'
+    And I expect text of 'Event Handler' to contain '"type":"wheel"'
+    And I expect text of 'Event Handler' to match '<deltaY>'
+
+    Examples:
+      | offset  | deltaY            |
+      | 0, 100  | .+"deltaY":\d+.+  |
+      | 0, -100 | .+"deltaY":-\d+.+ |
+