Merge pull request #1 from qavajs/implementing-features

implemented actions, waits, validation steps

Author: AlexGalichenko

index.js

@@ -1,2 +1,5 @@
+require('./lib/types.js');
 require('./lib/hooks.js');
 require('./lib/actions.js');
+require('./lib/waits.js');
+require('./lib/validations.js');

package-lock.json

@@ -27,6 +27,7 @@
     "ts-jest": "^28.0.5"
   },
   "dependencies": {
+    "@playwright/test": "^1.26.1",
     "@qavajs/memory": "^1.1.0",
     "@qavajs/po-playwright": "^0.0.1",
     "@qavajs/validation": "^0.0.2",

package.json

@@ -0,0 +1,56 @@
+import { Locator } from "playwright";
+
+export const conditionValidations = {
+    PRESENT: 'present',
+    // CLICKABLE: 'clickable',
+    VISIBLE: 'visible',
+    INVISIBLE: 'invisible',
+    // ENABLED: 'enabled',
+    // DISABLED: 'disabled'
+}
+
+const notClause = '(not )?';
+const toBeClause = 'to (?:be )?';
+const validationClause = `(${Object.values(conditionValidations).join('|')})`;
+
+export const conditionWaitExtractRegexp = new RegExp(`^${notClause}${toBeClause}${validationClause}$`);
+export const conditionWaitRegexp = new RegExp(`(${notClause}${toBeClause}${validationClause})`);
+
+const waits = {
+    [conditionValidations.PRESENT]: (
+        element: Locator,
+        reverse: boolean,
+        timeout: number,
+        timeoutMsg: string
+    ) => element.waitFor({state: reverse ? 'detached' : 'attached', timeout}),
+    [conditionValidations.VISIBLE]: (
+        element: Locator,
+        reverse: boolean,
+        timeout: number,
+        timeoutMsg: string
+    ) => element.waitFor({state: reverse ? 'hidden' : 'visible', timeout}),
+    [conditionValidations.INVISIBLE]: (
+        element: Locator,
+        reverse: boolean,
+        timeout: number,
+        timeoutMsg: string
+    ) => element.waitFor({state: reverse ? 'visible' : 'hidden', timeout})
+}
+/**
+ * Wait for condition
+ * @param {Locator} element - element
+ * @param {string} validationType - validation to perform
+ * @param {number} [timeout] - timeout to wait
+ * @param {boolean} [reverse] - negate flag
+ * @return {Promise<void>}
+ */
+export async function conditionWait(
+    element: Locator,
+    validationType: string,
+    timeout: number = 10000,
+    reverse: boolean = false
+) {
+    const timeoutMsg: string = `Element is${reverse ? '' : ' not'} ${validationType}`;
+    const waitFn = waits[validationType];
+    await waitFn(element, reverse, timeout, timeoutMsg);
+}

src/conditionWait.ts

@@ -1,8 +1,9 @@
 import { After, AfterStep, Before, BeforeStep, Status } from '@cucumber/cucumber';
 import defaultTimeouts from './defaultTimeouts';
-import { chromium, Browser, BrowserContext, Page } from 'playwright';
+import { chromium, firefox, webkit, Browser, BrowserContext, Page, BrowserType } from 'playwright';
 import { po } from '@qavajs/po-playwright';
 import { ScreenshotEvent } from './screenshotEvent';
+const browsers: any = { chromium, firefox, webkit };
 
 declare global {
     var browser: Browser;
@@ -18,11 +19,12 @@ Before(async function () {
         defaultTimeouts,
         ...driverConfig.timeout
     }
-    global.browser = await chromium.launch();
+    const browserName: string = driverConfig?.capabilities?.browserName ?? 'chromium';
+    global.browser = await (browsers[browserName] as BrowserType).launch(driverConfig.capabilities);
     global.context = await browser.newContext();
     global.page = await browser.newPage();
     global.driver = global.browser;
-    po.init(browser, { timeout: driverConfig.timeout.present });
+    po.init(page, { timeout: driverConfig.timeout.present });
     po.register(config.pageObject);
 });
 

src/hooks.ts

@@ -1,3 +1,5 @@
+import { conditionWait, conditionWaitExtractRegexp } from './conditionWait';
+import { valueWait, valueWaitExtractRegexp } from './valueWait';
 import { po } from '@qavajs/po-playwright';
 import memory from '@qavajs/memory';
 import { Locator } from 'playwright';
@@ -9,3 +11,21 @@ export function getValue(alias: string): any {
 export async function getElement(alias: string): Promise<Locator> {
     return po.getElement(await memory.getValue(alias))
 }
+
+export function getConditionWait(condition: string): Function {
+    const match = condition.match(conditionWaitExtractRegexp) as RegExpMatchArray;
+    if (!match) throw new Error(`${condition} wait is not implemented`);
+    const [ _, reverse, validation ] = match;
+    return async function (element: Locator, timeout: number) {
+        await conditionWait(element, validation, timeout, Boolean(reverse))
+    }
+}
+
+export function getValueWait(condition: string): Function {
+    const match = condition.match(valueWaitExtractRegexp) as RegExpMatchArray;
+    if (!match) throw new Error(`${condition} wait is not implemented`);
+    const [ _, reverse, validation ] = match;
+    return async function (valueFn: Function, expected: any, timeout: number) {
+        await valueWait(valueFn, expected, validation, timeout, Boolean(reverse))
+    }
+}

src/transformers.ts

@@ -0,0 +1,22 @@
+import { defineParameterType } from '@cucumber/cucumber';
+
+defineParameterType({
+    name: 'playwrightValidation',
+    regexp: /((?:is |do |does |to )?(not |to not )?(?:to )?(?:be )?(equal|strictly equal|deeply equal|have member|match|contain|above|below|greater than|less than|have type)(?:s|es)?)/,
+    transformer: p => p,
+    useForSnippets: false
+});
+
+defineParameterType({
+    name: 'playwrightValueWait',
+    regexp: /((not )?to (?:be )?(equal|contain|above|below))/,
+    transformer: p => p,
+    useForSnippets: false
+});
+
+defineParameterType({
+    name: 'playwrightConditionWait',
+    regexp: /((not )?to (?:be )?(present|clickable|visible|invisible|enabled|disabled))/,
+    transformer: p => p,
+    useForSnippets: false
+});

src/types.ts

@@ -0,0 +1,36 @@
+import { Then } from '@cucumber/cucumber';
+import { getValue, getElement, getConditionWait } from './transformers';
+import { getValidation } from '@qavajs/validation';
+
+/**
+ * Verify element condition
+ * @param {string} alias - element to wait condition
+ * @param {string} condition - wait condition
+ * @example I expect 'Header' to be visible
+ * @example I expect 'Loading' not to be present
+ * @example I expect 'Search Bar > Submit Button' to be clickable
+ */
+Then('I expect {string} {playwrightConditionWait}', async function (alias: string, condition: string) {
+    const element = await getElement(alias);
+    const wait = getConditionWait(condition);
+    await wait(element, config.browser.timeout.page);
+});
+
+/**
+ * Verify that text of element satisfies condition
+ * @param {string} alias - element to get text
+ * @param {string} validationType - validation
+ * @param {string} value - expected result
+ * @example I expect text of '#1 of Search Results' equals to 'google'
+ * @example I expect text of '#2 of Search Results' does not contain 'yandex'
+ */
+Then(
+    'I expect text of {string} {playwrightValidation} {string}',
+    async function (alias: string, validationType: string, value: any) {
+        const expectedValue = await getValue(value);
+        const element = await getElement(alias);
+        const validation = getValidation(validationType);
+        const elementText: string = await element.innerText();
+        validation(elementText, expectedValue);
+    }
+);

src/validations.ts

@@ -0,0 +1,46 @@
+import { expect } from '@playwright/test';
+export const valueValidations = {
+    EQUAL: 'equal',
+    CONTAIN: 'contain',
+    ABOVE: 'above',
+    BELOW: 'below'
+}
+
+const notClause = '(not )?';
+const toBeClause = 'to (?:be )?';
+const validationClause = `(${Object.values(valueValidations).join('|')})`;
+
+export const valueWaitExtractRegexp = new RegExp(`^${notClause}${toBeClause}${validationClause}$`);
+export const valueWaitRegexp = new RegExp(`(${notClause}${toBeClause}${validationClause})`);
+
+const waits = {
+    [valueValidations.EQUAL]: async (poll: any, expected: any) => poll.toBe(expected),
+    [valueValidations.CONTAIN]: async (poll: any, expected: any) => poll.toContain(expected),
+    [valueValidations.ABOVE]: async (poll: any, expected: any) => poll.toBeGreaterThan(expected),
+    [valueValidations.BELOW]: async (poll: any, expected: any) => poll.toBeLessThan(expected)
+}
+
+/**
+ * Wait for condition
+ * @param {any} valueFn - function to return value
+ * @param {any} expected - expected value
+ * @param {string} validationType - validation to perform
+ * @param {number} [timeout] - timeout to wait
+ * @param {boolean} [reverse] - negate flag
+ * @return {Promise<void>}
+ */
+export async function valueWait(
+    valueFn: Function,
+    expected: any,
+    validationType: string,
+    timeout: number = 10000,
+    reverse: boolean
+) {
+    const message: string = `Value is${reverse ? '' : ' not'} ${validationType} ${expected}`;
+    const options = { timeout, message };
+    const waitFn = waits[validationType];
+    const poll = reverse
+        ? expect.poll(() => valueFn(), options).not
+        : expect.poll(() => valueFn(), options);
+    await waitFn(poll, expected);
+}