Custom locators playwright 0.12.1 (#2277)

* add support for custom locators in findElements

* update most wait fors to use custom selectors

* fix wait for text

* update playwright version

* add some missing test cases

* fix selector registration

* fix authentication test

* fix frame logic

* add show back

* remove redundant tests

* handle custom selectors better

* fix show default

* add custom check

* remove show

* fix wait for

* deal with playwright breaking changes

Co-authored-by: George Griffiths <george.griffiths@ibm.com>

Author: Georgegriff

docs/helpers/Playwright.md

@@ -19,9 +19,9 @@ Uses [Playwright][1] library to run tests inside:
 
 This helper works with a browser out of the box with no additional tools required to install.
 
-Requires `playwright` package version ^0.11.0 to be installed:
+Requires `playwright` package version ^0.12.1 to be installed:
 
-    npm i playwright@^0.11.0 --save
+    npm i playwright@^0.12.1 --save
 
 ## Configuration
 

docs/playwright.md

@@ -28,7 +28,7 @@ It's readable and simple and working using Playwright API!
 To start you need CodeceptJS with Playwright packages installed
 
 ```bash
-npm install codeceptjs playwright@^0.11.1 --save
+npm install codeceptjs playwright@^0.12.1 --save
 ```
 
 Or see [alternative installation options](http://codecept.io/installation/)
@@ -204,7 +204,7 @@ CodeceptJS allows you to implement custom actions like `I.createTodo` or use **P
 
 ## Extending
 
-Playwright has a very [rich and flexible API](https://github.com/microsoft/playwright/blob/v0.10.0/docs/api.md). Sure, you can extend your test suites to use the methods listed there. CodeceptJS already prepares some objects for you and you can use them from your you helpers.
+Playwright has a very [rich and flexible API](https://github.com/microsoft/playwright/blob/v0.12.1/docs/api.md). Sure, you can extend your test suites to use the methods listed there. CodeceptJS already prepares some objects for you and you can use them from your you helpers.
 
 Start with creating an `MyPlaywright` helper using `generate:helper` or `gh` command:
 
@@ -240,7 +240,7 @@ async setPermissions() {
   return context.setPermissions('https://html5demos.com', ['geolocation']);
 }
 
-> [▶ Learn more about BrowserContext](https://github.com/microsoft/playwright/blob/v0.10.0/docs/api.md#class-browsercontext)
+> [▶ Learn more about BrowserContext](https://github.com/microsoft/playwright/blob/v0.12.1/docs/api.md#class-browsercontext)
 
 > [▶ Learn more about Helpers](http://codecept.io/helpers/)
 

lib/helper/Playwright.js

@@ -37,6 +37,7 @@ const popupStore = new Popup();
 const consoleLogStore = new Console();
 const availableBrowsers = ['chromium', 'webkit', 'firefox'];
 
+const { createValueEngine } = require('./extras/PlaywrightPropEngine');
 /**
  * Uses [Playwright](https://github.com/microsoft/playwright) library to run tests inside:
  *
@@ -46,10 +47,10 @@ const availableBrowsers = ['chromium', 'webkit', 'firefox'];
  *
  * This helper works with a browser out of the box with no additional tools required to install.
  *
- * Requires `playwright` package version ^0.11.0 to be installed:
+ * Requires `playwright` package version ^0.12.1 to be installed:
  *
  * ```
- * npm i playwright@^0.11.0 --save
+ * npm i playwright@^0.12.1 --save
  * ```
  *
  * ## Configuration
@@ -250,11 +251,17 @@ class Playwright extends Helper {
     try {
       requireg('playwright');
     } catch (e) {
-      return ['playwright@^0.10'];
+      return ['playwright@^0.12.1'];
     }
   }
 
-  _init() {
+  async _init() {
+    // register an internal selector engine for reading value property of elements in a selector
+    try {
+      await playwright.selectors.register('__value', createValueEngine);
+    } catch (e) {
+      console.warn(e);
+    }
   }
 
   _beforeSuite() {
@@ -566,7 +573,7 @@ class Playwright extends Helper {
 
     if (this.config.basicAuth && (this.isAuthenticated !== true)) {
       if (url.includes(this.options.url)) {
-        await this.page.authenticate(this.config.basicAuth);
+        await this.browserContext.setHTTPCredentials(this.config.basicAuth);
         this.isAuthenticated = true;
       }
     }
@@ -1529,7 +1536,7 @@ class Playwright extends Helper {
     const array = [];
 
     for (let index = 0; index < els.length; index++) {
-      const a = await this._evaluateHandeInContext((el, attr) => el[attr] || el.getAttribute(attr), els[index], attr);
+      const a = await this._evaluateHandeInContext(([el, attr]) => el[attr] || el.getAttribute(attr), [els[index], attr]);
       array.push(await a.jsonValue());
     }
 
@@ -1573,21 +1580,15 @@ class Playwright extends Helper {
     const matcher = await this.context;
     let waiter;
     const context = await this._getContext();
-    if (locator.isCSS()) {
-      const enabledFn = function (locator) {
-        const els = document.querySelectorAll(locator);
-        if (!els || els.length === 0) {
-          return false;
-        }
-        return Array.prototype.filter.call(els, el => !el.disabled).length > 0;
-      };
-      waiter = context.waitForFunction(enabledFn, { timeout: waitTimeout }, locator.value);
+    if (!locator.isXPath()) {
+      // playwright combined selectors
+      waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()} >> :not([disabled])`, { timeout: waitTimeout });
     } else {
-      const enabledFn = function (locator, $XPath) {
+      const enabledFn = function ([locator, $XPath]) {
         eval($XPath); // eslint-disable-line no-eval
         return $XPath(null, locator).filter(el => !el.disabled).length > 0;
       };
-      waiter = context.waitForFunction(enabledFn, { timeout: waitTimeout }, locator.value, $XPath.toString());
+      waiter = context.waitForFunction(enabledFn, [locator.value, $XPath.toString()], { timeout: waitTimeout });
     }
     return waiter.catch((err) => {
       throw new Error(`element (${locator.toString()}) still not enabled after ${waitTimeout / 1000} sec\n${err.message}`);
@@ -1603,21 +1604,15 @@ class Playwright extends Helper {
     const matcher = await this.context;
     let waiter;
     const context = await this._getContext();
-    if (locator.isCSS()) {
-      const valueFn = function (locator, value) {
-        const els = document.querySelectorAll(locator);
-        if (!els || els.length === 0) {
-          return false;
-        }
-        return Array.prototype.filter.call(els, el => (el.value || '').indexOf(value) !== -1).length > 0;
-      };
-      waiter = context.waitForFunction(valueFn, { timeout: waitTimeout }, locator.value, value);
+    if (!locator.isXPath()) {
+      // uses a custom selector engine for finding value properties on elements
+      waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()} >> __value=${value}`, { timeout: waitTimeout, waitFor: 'visible' });
     } else {
-      const valueFn = function (locator, $XPath, value) {
+      const valueFn = function ([locator, $XPath, value]) {
         eval($XPath); // eslint-disable-line no-eval
         return $XPath(null, locator).filter(el => (el.value || '').indexOf(value) !== -1).length > 0;
       };
-      waiter = context.waitForFunction(valueFn, { timeout: waitTimeout }, locator.value, $XPath.toString(), value);
+      waiter = context.waitForFunction(valueFn, [locator.value, $XPath.toString(), value], { timeout: waitTimeout });
     }
     return waiter.catch((err) => {
       const loc = locator.toString();
@@ -1636,20 +1631,20 @@ class Playwright extends Helper {
     let waiter;
     const context = await this._getContext();
     if (locator.isCSS()) {
-      const visibleFn = function (locator, num) {
+      const visibleFn = function ([locator, num]) {
         const els = document.querySelectorAll(locator);
         if (!els || els.length === 0) {
           return false;
         }
         return Array.prototype.filter.call(els, el => el.offsetParent !== null).length === num;
       };
-      waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, num);
+      waiter = context.waitForFunction(visibleFn, [locator.value, num], { timeout: waitTimeout });
     } else {
-      const visibleFn = function (locator, $XPath, num) {
+      const visibleFn = function ([locator, $XPath, num]) {
         eval($XPath); // eslint-disable-line no-eval
         return $XPath(null, locator).filter(el => el.offsetParent !== null).length === num;
       };
-      waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, $XPath.toString(), num);
+      waiter = context.waitForFunction(visibleFn, [locator.value, $XPath.toString(), num], { timeout: waitTimeout });
     }
     return waiter.catch((err) => {
       throw new Error(`The number of elements (${locator.toString()}) is not ${num} after ${waitTimeout / 1000} sec\n${err.message}`);
@@ -1681,7 +1676,7 @@ class Playwright extends Helper {
     locator = new Locator(locator, 'css');
 
     const context = await this._getContext();
-    const waiter = context.waitForSelector(`${locator.type}=${locator.value}`, { timeout: waitTimeout });
+    const waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`, { timeout: waitTimeout });
     return waiter.catch((err) => {
       throw new Error(`element (${locator.toString()}) still not present on page after ${waitTimeout / 1000} sec\n${err.message}`);
     });
@@ -1696,7 +1691,7 @@ class Playwright extends Helper {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
     locator = new Locator(locator, 'css');
     const context = await this._getContext();
-    const waiter = context.waitForSelector(`${locator.type}=${locator.value}`, { timeout: waitTimeout, visibility: 'visible' });
+    const waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`, { timeout: waitTimeout, waitFor: 'visible' });
     return waiter.catch((err) => {
       throw new Error(`element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec\n${err.message}`);
     });
@@ -1709,7 +1704,7 @@ class Playwright extends Helper {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
     locator = new Locator(locator, 'css');
     const context = await this._getContext();
-    const waiter = context.waitForSelector(`${locator.type}=${locator.value}`, { timeout: waitTimeout, visibility: 'hidden' });
+    const waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`, { timeout: waitTimeout, waitFor: 'hidden' });
     return waiter.catch((err) => {
       throw new Error(`element (${locator.toString()}) still visible after ${waitTimeout / 1000} sec\n${err.message}`);
     });
@@ -1722,7 +1717,7 @@ class Playwright extends Helper {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
     locator = new Locator(locator, 'css');
     const context = await this._getContext();
-    return context.waitForSelector(`${locator.type}=${locator.value}`, { timeout: waitTimeout, visibility: 'hidden' }).catch((err) => {
+    return context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`, { timeout: waitTimeout, waitFor: 'hidden' }).catch((err) => {
       throw new Error(`element (${locator.toString()}) still not hidden after ${waitTimeout / 1000} sec\n${err.message}`);
     });
   }
@@ -1743,7 +1738,7 @@ class Playwright extends Helper {
     return this.page.waitForFunction((urlPart) => {
       const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)));
       return currUrl.indexOf(urlPart) > -1;
-    }, { timeout: waitTimeout }, urlPart).catch(async (e) => {
+    }, urlPart, { timeout: waitTimeout }).catch(async (e) => {
       const currUrl = await this._getPageUrl(); // Required because the waitForFunction can't return data.
       if (/failed: timeout/i.test(e.message)) {
         throw new Error(`expected url to include ${urlPart}, but found ${currUrl}`);
@@ -1767,7 +1762,7 @@ class Playwright extends Helper {
     return this.page.waitForFunction((urlPart) => {
       const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)));
       return currUrl.indexOf(urlPart) > -1;
-    }, { timeout: waitTimeout }, urlPart).catch(async (e) => {
+    }, urlPart, { timeout: waitTimeout }).catch(async (e) => {
       const currUrl = await this._getPageUrl(); // Required because the waitForFunction can't return data.
       if (/failed: timeout/i.test(e.message)) {
         throw new Error(`expected url to be ${urlPart}, but found ${currUrl}`);
@@ -1788,26 +1783,21 @@ class Playwright extends Helper {
 
     if (context) {
       const locator = new Locator(context, 'css');
-      if (locator.isCSS()) {
-        waiter = contextObject.waitForFunction((locator, text) => {
-          const el = document.querySelector(locator);
-          if (!el) return false;
-          return el.innerText.indexOf(text) > -1;
-        }, { timeout: waitTimeout }, locator.value, text);
+      if (!locator.isXPath()) {
+        waiter = contextObject.waitFor(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()} >> text=${text}`, { timeout: waitTimeout, waitFor: 'visible' });
       }
 
       if (locator.isXPath()) {
-        waiter = contextObject.waitForFunction((locator, text, $XPath) => {
+        waiter = contextObject.waitForFunction(([locator, text, $XPath]) => {
           eval($XPath); // eslint-disable-line no-eval
           const el = $XPath(null, locator);
           if (!el.length) return false;
           return el[0].innerText.indexOf(text) > -1;
-        }, { timeout: waitTimeout }, locator.value, text, $XPath.toString());
+        }, [locator.value, text, $XPath.toString()], { timeout: waitTimeout });
       }
     } else {
-      waiter = contextObject.waitForFunction(text => document.body && document.body.innerText.indexOf(text) > -1, { timeout: waitTimeout }, text);
+      waiter = contextObject.waitForFunction(text => document.body && document.body.innerText.indexOf(text) > -1, text, { timeout: waitTimeout });
     }
-
     return waiter.catch((err) => {
       throw new Error(`Text "${text}" was not found on page after ${waitTimeout / 1000} sec\n${err.message}`);
     });
@@ -1897,7 +1887,7 @@ class Playwright extends Helper {
     }
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
     const context = await this._getContext();
-    return context.waitForFunction(fn, { timeout: waitTimeout }, ...args);
+    return context.waitForFunction(fn, args, { timeout: waitTimeout });
   }
 
   /**
@@ -1942,17 +1932,14 @@ class Playwright extends Helper {
 
     let waiter;
     const context = await this._getContext();
-    if (locator.isCSS()) {
-      const visibleFn = function (locator) {
-        return document.querySelector(locator) === null;
-      };
-      waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value);
+    if (!locator.isXPath()) {
+      waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`, { timeout: waitTimeout, waitFor: 'detached' });
     } else {
-      const visibleFn = function (locator, $XPath) {
+      const visibleFn = function ([locator, $XPath]) {
         eval($XPath); // eslint-disable-line no-eval
         return $XPath(null, locator).length === 0;
       };
-      waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, $XPath.toString());
+      waiter = context.waitForFunction(visibleFn, [locator.value, $XPath.toString()], { timeout: waitTimeout });
     }
     return waiter.catch((err) => {
       throw new Error(`element (${locator.toString()}) still on page after ${waitTimeout / 1000} sec\n${err.message}`);
@@ -1986,7 +1973,11 @@ module.exports = Playwright;
 
 async function findElements(matcher, locator) {
   locator = new Locator(locator, 'css');
-  if (!locator.isXPath()) return matcher.$$(locator.simplify());
+  if (locator.isCustom()) {
+    return matcher.$$(`${locator.type}=${locator.value}`);
+  } if (!locator.isXPath()) {
+    return matcher.$$(locator.simplify());
+  }
   return matcher.$$(`xpath=${locator.value}`);
 }
 

lib/helper/extras/PlaywrightPropEngine.js

@@ -0,0 +1,25 @@
+module.exports.createValueEngine = () => {
+  return {
+    // Creates a selector that matches given target when queried at the root.
+    // Can return undefined if unable to create one.
+    create(root, target) {
+      return null;
+    },
+
+    // Returns the first element matching given selector in the root's subtree.
+    query(root, selector) {
+      if (!root) {
+        return null;
+      }
+      return `${root.value}` === selector;
+    },
+
+    // Returns all elements matching given selector in the root's subtree.
+    queryAll(root, selector) {
+      if (!root) {
+        return null;
+      }
+      return `${root.value}` === selector;
+    },
+  };
+};

lib/locator.js

@@ -3,6 +3,7 @@ const sprintf = require('sprintf-js').sprintf;
 
 const xpathLocator = require('./utils').xpathLocator;
 
+const locatorTypes = ['css', 'by', 'xpath', 'id', 'name', 'fuzzy', 'frame'];
 /** @class */
 class Locator {
   /**
@@ -96,6 +97,10 @@ class Locator {
     return this.type === 'xpath';
   }
 
+  isCustom() {
+    return this.type && !locatorTypes.includes(this.type);
+  }
+
   isStrict() {
     return this.strict;
   }

package.json

@@ -107,7 +107,7 @@
     "mocha-parallel-tests": "^2.2.2",
     "nightmare": "^3.0.2",
     "nodemon": "^1.19.4",
-    "playwright": "^0.11.0",
+    "playwright": "^0.12.1",
     "protractor": "^5.4.1",
     "puppeteer": "^1.20.0",
     "qrcode-terminal": "^0.12.0",