add alert steps

Author: ALegchilov

.gitignore

@@ -1,4 +1,6 @@
 node_modules/
 lib/
 coverage/
-test-e2e/report.xml
+test-e2e/report.*
+.idea/
+customDir/

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.13
+- :rocket: added JS alert steps
+- :rocket: added _I press button given number of times_ step
+
 ## 0.0.12
 - :rocket: added _I upload file_ step
 

package-lock.json

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

package.json

@@ -121,6 +121,18 @@ When('I press {string} key', async function (key: string) {
     await page.press('body', key);
 });
 
+/**
+ * Press button given number of times
+ * @param {string} key - key to press
+ * @param {number} num - number of times
+ * @example I press 'Enter' key 5 times
+ */
+When('I press {string} key {int} time(s)', async function (key: string, num: number) {
+    for (let i: number = 0; i < num; i++) {
+        await page.keyboard.press(key);
+    }
+});
+
 /**
  * Hover over element
  * @param {string} alias - element to hover over
@@ -197,7 +209,6 @@ When('I scroll by {string} in {string}', async function (offset: string, alias:
     }, coords);
 });
 
-
 /**
  * Provide file url to upload input
  * @param {string} alias - element to upload file
@@ -209,3 +220,37 @@ When('I upload {string} file to {string}', async function (value: string, alias:
     const filePath = await getValue(value);
     await element.setInputFiles(filePath);
 });
+
+/**
+ * Accept alert
+ * @example I accept alert
+ */
+When('I accept alert', async function () {
+    await new Promise<void>((resolve)=> page.once('dialog', async (dialog) => {
+        await dialog.accept();
+        resolve();
+    }))
+});
+
+/**
+ * Dismiss alert
+ * Playwright automatically dismisses all dialogs. This step is just to make it implicitly.
+ * @example I dismiss alert
+ */
+When('I dismiss alert', async function () {
+    await new Promise<void>((resolve)=> page.once('dialog', async (dialog) => {
+        await dialog.dismiss();
+        resolve();
+    }));
+});
+
+/**
+ * I type {string} to alert
+ * @example I type 'coffee' to alert
+ */
+When('I type {string} to alert', async function (value: string) {
+    await new Promise<void>((resolve)=> page.once('dialog', async (dialog) => {
+        await dialog.accept(value);
+        resolve();
+    }))
+});

src/actions.ts

@@ -215,3 +215,17 @@ Then(
     }
 );
 
+/**
+ * Verify that text of an alert meets expectation
+ * @param {string} validationType - validation
+ * @param {string} value - expected text value
+ * @example I expect text of alert does not contain 'coffee'
+ */
+Then('I expect text of alert {playwrightValidation} {string}', async function (validationType: string, expectedValue: string) {
+      const alertText = await new Promise<string>(resolve => page.once('dialog', async (dialog) => {
+        resolve(dialog.message());
+      }));
+      const validation = getValidation(validationType);
+      validation(alertText, expectedValue);
+    }
+);

src/validations.ts

@@ -1,5 +1,6 @@
 import { When } from '@cucumber/cucumber';
 import { getValue, getElement, getValueWait, getConditionWait } from './transformers';
+import { getValidation } from '@qavajs/validation';
 
 /**
  * Wait for element condition
@@ -142,5 +143,21 @@ When(
     }
 );
 
+/**
+ * Verify that text of an alert meets expectation
+ * @param {string} validationType - validation
+ * @param {string} value - expected text value
+ * @example I expect text of alert does not contain 'coffee'
+ */
+When('I wait until text of alert {playwrightValidation} {string}', async function (validationType: string, expectedValue: string) {
+      let alertText;
+      page.once('dialog', async (dialog) => {
+        alertText = dialog.message();
+      });
+      const validation = getValidation(validationType);
+      validation(alertText, expectedValue);
+    }
+);
+
 
 

src/waits.ts

@@ -13,6 +13,8 @@
 <button class="button">Button1</button>
 <button class="button">Button2</button>
 <button class="button">Button3</button>
+<button id="confirm">Show alert in 3 sec</button>
+<button id="prompt">Show prompt</button>
 
 <iframe src="frame.html" style="border: 1px solid black"></iframe>
 <a id="newTabLink" href="frame.html" target="_blank">New tab</a>
@@ -56,6 +58,8 @@
   const body = document.body;
   const select = document.querySelector('#select');
   const pressCounter = document.querySelector('#pressCounter');
+  const confirm = document.querySelector('#confirm');
+  const prompt = document.querySelector('#prompt');
   let presses = 0;
 
   button.addEventListener('click', function () {
@@ -101,6 +105,15 @@
     action.innerText = select.value;
   });
 
+  confirm.addEventListener('click', function () {
+    setTimeout(()=> action.innerText = window.confirm('Are you robot?'), 3000);
+  });
+
+  prompt.addEventListener('click', () => {
+    setTimeout(()=> action.innerText = window.prompt('Are you robot?'), 500);
+  });
+
+
 </script>
 </body>
 </html>

test-e2e/apps/actions.html

@@ -55,6 +55,15 @@ Feature: actions
     When I press 'w' key
     Then I expect text of 'Action' to be equal 'keypress'
 
+  Scenario Outline: press <Key> key multiple times
+    When I press '<Key>' key <Times> time<Postfix>
+    Then I expect text of 'Press Counter' to be equal '<Result>'
+
+    Examples:
+      | Key   | Times | Postfix | Result                |
+      | Enter | 1     |         | pressed Enter 1 times |
+      | Space | 5     | s       | pressed Space 5 times |
+
   Scenario: hover
     When I hover over 'Button Hover'
     Then I expect text of 'Action' to be equal 'hover'
@@ -93,3 +102,23 @@ Feature: actions
     When I upload '$uploadFile' file to 'File Input'
     Then I expect text of 'Action' to be equal 'file:C:\fakepath\actions.html'
 
+  Scenario: accept alert
+    When I click "Alert Button"
+    And I accept alert
+    Then I expect text of 'Action' to be equal 'true'
+
+  Scenario: dismiss alert
+    When I click "Alert Button"
+    And I dismiss alert
+    Then I expect text of 'Action' to be equal 'false'
+
+  @debug
+  Scenario: type text to alert
+    When I expect text of 'Action' to be equal 'Nothing'
+    And I click "Prompt Button"
+    And I type 'I am not a robot' to alert
+    Then I expect text of 'Action' to be equal 'I am not a robot'
+
+  Scenario: expect text of alert
+    When I click "Prompt Button"
+    Then I expect text of alert to be equal 'Are you robot?'

test-e2e/features/actions.feature

@@ -5,6 +5,8 @@ export default class App {
     SimpleTextInput = $('#textInput');
     FileInput = $('#fileInput');
     Action = $('#action');
+    AlertButton = $('#confirm');
+    PromptButton = $('#prompt');
     Button = $('#button');
     ButtonHover = $('#buttonHover');
     Input = $('#input');
@@ -23,6 +25,7 @@ export default class App {
     Loading = $('#loading');
     LoadingInput = $('#loadingInput');
     WaitCollection = $$('#waitCollection > div');
+    PressCounter = $('#pressCounter');
 
     Users = $$('#users > li');
     OverflowContainer = $('#overflowContainer');