protractor-css-booster - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

dist/index.d.ts

@@ -1,1 +0,260 @@
-export declare const onPrepare: () => void;
+import { Locator } from "protractor";
+
+declare module "protractor" {
+  export interface ProtractorBy {
+    /**
+     *
+     * @param cssSelector
+     *
+     * This Locator helps to identify the grand parent element of a target element
+     * @example
+     * <div>
+     *    <p>
+     *      <a> this is a link </a>
+     *    </p>
+     * </div>
+     *
+     *  element(by.grandParnetOf('a'))  will return <div>
+     */
+    grandParentOf(cssSelector: string): Locator;
+
+    /**
+     *
+     * @param cssSelector
+     *
+     * This Locator helps to identify the parent element of a target element
+     * @example
+     * <div>
+     *    <p>
+     *      <a> this is a link </a>
+     *    </p>
+     * </div>
+     *
+     *  element(by.parentOf('a'))  will return <p>
+     */
+    parentOf(cssSelector: string): Locator;
+
+    /**
+     *
+     * @param cssSelector
+     *
+     * The nextSiblingOf locator returns the node immediately following the specified node, in the same tree level.
+     * @example
+     * <div>
+     *    <p>
+     *      <a id='a1'> link 1</a>
+     *      <a id='a2'> link 2</a>
+     *    </p>
+     * </div>
+     *
+     *  element(by.nextSiblingOf('#a1'))  will return <a id='a2'>
+     */
+    nextSiblingOf(cssSelector: string): Locator;
+
+    /**
+     *
+     * @param cssSelector
+     *
+     * The prevSiblingOf locator returns the previous element of the specified element, in the same tree level.
+     * @example
+     * <div>
+     *    <p>
+     *      <a id='a1'> link 1</a>
+     *      <a id='a2'> link 2</a>
+     *    </p>
+     * </div>
+     *
+     *  element(by.prevSiblingOf('#a2'))  will return  <a id='a1'>
+     */
+    prevSiblingOf(cssSelector: string): Locator;
+
+    /**
+     *
+     * @param cssSelector
+     *
+     * The firstChildOf locator returns the first child element of the specified element.
+     * @example
+     * <ul id="myList">
+     *  <li>Coffee</li>
+     *  <li>Tea</li>
+     * </ul>
+     *
+     *  element(by.firstChildOf('#myList'))  will return  <li>Coffee</li>
+     */
+    firstChildOf(cssSelector: string): Locator;
+
+    /**
+     *
+     * @param cssSelector
+     *
+     * The lastChildOf locator returns the last child element of the specified element.
+     * @example
+     * <ul id="myList">
+     *  <li>Coffee</li>
+     *  <li>Tea</li>
+     * </ul>
+     *
+     *  element(by.lastChildOf('#myList'))  will return <li>Tea</li>
+     */
+    lastChildOf(cssSelector: string): Locator;
+
+    /**
+     *
+     * @param cssSelector
+     *
+     * The followingSibling locator returns the following sibling of a given element. This should always be used with element chain as the second element finder
+     * @example
+     * <ul id="myInfo">
+     *  <Name>Thor</Name>
+     *  <Age>Million Years</Age>
+     *  <Home>Asgard</Home>
+     * </ul>
+     *
+     *  element(by.cssContainingText('Name','Thor')).element(by.followingSibling('Age'))  will return <Age>Million Years</Age>
+     *
+     *  element(by.cssContainingText('Name','Thor')).element(by.followingSibling('Home'))  will return <Home>Asgard</Home>
+     */
+    followingSibling(cssSelector: string): Locator;
+
+    /**
+     *
+     * @param component : required
+     * @param props : optional
+     * @param state : optional
+     * @param rootElement : optional
+     *
+     * ReactSelector helps to identify web elements by react properties such as props and states
+     *
+     * @example
+     * element(by.ReactSelector('button', {value:'ok'}, {}, '#root'))
+     */
+    ReactSelector(
+      component: string,
+      props?: {},
+      state?: {},
+      rootElement?: string
+    ): Locator;
+  }
+
+  export interface ElementArrayFinder {
+    /**
+     * Returns the list of grand parent element of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element(by.css('.items li')).grandParent();
+     * targetElement.click();
+     */
+    grandParent(): Promise<ElementArrayFinder>;
+
+    /**
+     * Returns the list of parent element of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element(by.css('.items li')).parent();
+     * targetElement..click();
+     *
+     */
+    parent(): Promise<ElementArrayFinder>;
+
+    /**
+     * Returns the list of next sibling / following sibling elements of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element.all(by.css('.items li')).nextSibling();
+     * targetElement.get(1).click();
+     *
+     */
+    nextSibling(): Promise<ElementArrayFinder>;
+
+    /**
+     * Returns the list of previous sibling elements of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element.all(by.css('.items li')).prevSibling();
+     * targetElement.get(1).click();
+     *
+     */
+    prevSibling(): Promise<ElementArrayFinder>;
+
+    /**
+     * Returns the list of firstChild elements of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element.all(by.css('div')).firstChild();
+     * targetElement.get(1).click();
+     *
+     */
+    firstChild(): Promise<ElementArrayFinder>;
+
+    /**
+     * Returns the list of last sibling elements of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element.all(by.css('.items li')).prevSibling();
+     * targetElement.get(1).click();
+     *
+     */
+    lastChild(): Promise<ElementArrayFinder>;
+  }
+
+  export interface ElementFinder {
+    /**
+     * Returns the grand parent element of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element(by.css('.items li')).grandParent();
+     * targetElement.click();
+     */
+    grandParent(): Promise<ElementFinder>;
+
+    /**
+     * Returns the parent element of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element(by.css('.items li')).parent();
+     * targetElement..click();
+     *
+     */
+    parent(): Promise<ElementFinder>;
+
+    /**
+     * Returns the next sibling / following sibling element of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element.all(by.css('.items li')).nextSibling();
+     * targetElement.get(1).click();
+     *
+     */
+    nextSibling(): Promise<ElementFinder>;
+
+    /**
+     * Returns the previous sibling element of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element.all(by.css('.items li')).prevSibling();
+     * targetElement.get(1).click();
+     *
+     */
+    prevSibling(): Promise<ElementFinder>;
+
+    /**
+     * Returns the firstChild element of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element.all(by.css('div')).firstChild();
+     * targetElement.get(1).click();
+     *
+     */
+    firstChild(): Promise<ElementFinder>;
+
+    /**
+     * Returns the last sibling element of a given element .Promise needs to be resolved
+     *
+     * @example
+     * let targetElement = await element.all(by.css('.items li')).prevSibling();
+     * targetElement.get(1).click();
+     *
+     */
+    lastChild(): Promise<ElementFinder>;
+  }
+}

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var protractor_1 = require("protractor");
-exports.onPrepare = function () {
-    protractor_1.protractor.by.addLocator("grandParentOf", function (selector, opt_parentElement) {
-        var using = opt_parentElement || document;
-        var el = using.querySelectorAll(selector);
-        var _elements = [];
-        Array.prototype.filter.call(el, function (_el) {
-            _elements.push(_el.parentElement.parentElement);
-        });
-        return _elements;
+exports.onPrepare = function() {
+  protractor_1.protractor.by.addLocator("grandParentOf", function(
+    selector,
+    opt_parentElement
+  ) {
+    var using = opt_parentElement || document;
+    var el = using.querySelectorAll(selector);
+    var _elements = [];
+    Array.prototype.filter.call(el, function(_el) {
+      _elements.push(_el.parentElement.parentElement);
     });
-    protractor_1.protractor.by.addLocator("parentOf", function (selector, opt_parentElement) {
-        var using = opt_parentElement || document;
-        var el = using.querySelectorAll(selector);
-        var _elements = [];
-        Array.prototype.filter.call(el, function (_el) {
-            _elements.push(_el.parentElement);
-        });
-        return _elements;
+    return _elements;
+  });
+  protractor_1.protractor.by.addLocator("parentOf", function(
+    selector,
+    opt_parentElement
+  ) {
+    var using = opt_parentElement || document;
+    var el = using.querySelectorAll(selector);
+    var _elements = [];
+    Array.prototype.filter.call(el, function(_el) {
+      _elements.push(_el.parentElement);
     });
-    protractor_1.protractor.by.addLocator("nextSiblingOf", function (selector, opt_parentElement) {
-        var using = opt_parentElement || document;
-        var el = using.querySelectorAll(selector);
-        var _elements = [];
-        Array.prototype.filter.call(el, function (_el) {
-            _elements.push(_el.nextElementSibling);
-        });
-        return _elements;
+    return _elements;
+  });
+  protractor_1.protractor.by.addLocator("nextSiblingOf", function(
+    selector,
+    opt_parentElement
+  ) {
+    var using = opt_parentElement || document;
+    var el = using.querySelectorAll(selector);
+    var _elements = [];
+    Array.prototype.filter.call(el, function(_el) {
+      _elements.push(_el.nextElementSibling);
     });
-    protractor_1.protractor.by.addLocator("followingSibling", function (selector, opt_parentElement) {
-        var el;
-        if (opt_parentElement) {
-            console.log("opt_parentElement:", opt_parentElement);
-            el = opt_parentElement.parentElement.querySelectorAll(selector);
-        }
-        else {
-            return "";
-        }
-        var _elements = [];
-        Array.prototype.filter.call(el, function (_el) {
-            if (_el !== opt_parentElement) {
-                _elements.push(_el);
-            }
-        });
-        return _elements;
+    return _elements;
+  });
+  protractor_1.protractor.by.addLocator("followingSibling", function(
+    selector,
+    opt_parentElement
+  ) {
+    var el;
+    var index = 0;
+    if (opt_parentElement) {
+      el = opt_parentElement.parentElement.querySelectorAll(selector);
+      index = Array.prototype.indexOf.call(el, opt_parentElement);
+    } else {
+      return "";
+    }
+    var _elements = [];
+    Array.prototype.filter.call(el, function(_el, i) {
+      if (i > index && _el !== opt_parentElement) {
+        _elements.push(_el);
+      }
     });
-    protractor_1.protractor.by.addLocator("prevSiblingOf", function (selector, opt_parentElement) {
-        var using = opt_parentElement || document;
-        var el = using.querySelectorAll(selector);
-        var _elements = [];
-        Array.prototype.filter.call(el, function (_el) {
-            _elements.push(_el.previousElementSibling);
-        });
-        return _elements;
+    return _elements;
+  });
+  protractor_1.protractor.by.addLocator("prevSiblingOf", function(
+    selector,
+    opt_parentElement
+  ) {
+    var using = opt_parentElement || document;
+    var el = using.querySelectorAll(selector);
+    var _elements = [];
+    Array.prototype.filter.call(el, function(_el) {
+      _elements.push(_el.previousElementSibling);
     });
-    protractor_1.protractor.by.addLocator("firstChildOf", function (selector, opt_parentElement) {
-        var using = opt_parentElement || document;
-        var el = using.querySelectorAll(selector);
-        var _elements = [];
-        Array.prototype.filter.call(el, function (_el) {
-            _elements.push(_el.firstElementChild);
-        });
-        return _elements;
+    return _elements;
+  });
+  protractor_1.protractor.by.addLocator("firstChildOf", function(
+    selector,
+    opt_parentElement
+  ) {
+    var using = opt_parentElement || document;
+    var el = using.querySelectorAll(selector);
+    var _elements = [];
+    Array.prototype.filter.call(el, function(_el) {
+      _elements.push(_el.firstElementChild);
     });
-    protractor_1.protractor.by.addLocator("lastChildOf", function (selector, opt_parentElement) {
-        var using = opt_parentElement || document;
-        var el = using.querySelectorAll(selector);
-        var _elements = [];
-        Array.prototype.filter.call(el, function (_el) {
-            _elements.push(_el.lastElementChild);
-        });
-        return _elements;
+    return _elements;
+  });
+  protractor_1.protractor.by.addLocator("lastChildOf", function(
+    selector,
+    opt_parentElement
+  ) {
+    var using = opt_parentElement || document;
+    var el = using.querySelectorAll(selector);
+    var _elements = [];
+    Array.prototype.filter.call(el, function(_el) {
+      _elements.push(_el.lastElementChild);
     });
+    return _elements;
+  });
+  protractor_1.ElementFinder.prototype.grandParent = function() {
+    return protractor_1.browser.executeScript(
+      "return arguments[0].parentElement.parentElement;",
+      this
+    );
+  };
+  protractor_1.ElementArrayFinder.prototype.grandParent = function() {
+    return this.all(
+      protractor_1.browser.executeScript(
+        "return arguments[0].parentElement.parentElement;",
+        this
+      )
+    );
+  };
+  protractor_1.ElementFinder.prototype.parent = function() {
+    return protractor_1.browser.executeScript(
+      "return arguments[0].parentElement;",
+      this
+    );
+  };
+  protractor_1.ElementArrayFinder.prototype.parent = function() {
+    return this.all(
+      protractor_1.browser.executeScript(
+        "return arguments[0].parentElement;",
+        this
+      )
+    );
+  };
+  protractor_1.ElementFinder.prototype.nextSibling = function() {
+    return protractor_1.browser.executeScript(
+      "return arguments[0].nextElementSibling;",
+      this
+    );
+  };
+  protractor_1.ElementArrayFinder.prototype.nextSibling = function() {
+    return this.all(
+      protractor_1.browser.executeScript(
+        "return arguments[0].nextElementSibling;",
+        this
+      )
+    );
+  };
+  protractor_1.ElementFinder.prototype.prevSibling = function() {
+    return protractor_1.browser.executeScript(
+      "return arguments[0].previousElementSibling;",
+      this
+    );
+  };
+  protractor_1.ElementArrayFinder.prototype.prevSibling = function() {
+    return this.all(
+      protractor_1.browser.executeScript(
+        "return arguments[0].previousElementSibling;",
+        this
+      )
+    );
+  };
+  protractor_1.ElementFinder.prototype.firstChild = function() {
+    return protractor_1.browser.executeScript(
+      "return arguments[0].firstElementChild;",
+      this
+    );
+  };
+  protractor_1.ElementArrayFinder.prototype.firstChild = function() {
+    return this.all(
+      protractor_1.browser.executeScript(
+        "return arguments[0].firstElementChild;",
+        this
+      )
+    );
+  };
+  protractor_1.ElementFinder.prototype.lastChild = function() {
+    return protractor_1.browser.executeScript(
+      "return arguments[0].lastElementChild;",
+      this
+    );
+  };
+  protractor_1.ElementArrayFinder.prototype.lastChild = function() {
+    return this.all(
+      protractor_1.browser.executeScript(
+        "return arguments[0].lastElementChild;",
+        this
+      )
+    );
+  };
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "protractor-css-booster",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "custom css locators for Protractor",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -54,2 +54,7 @@ ## What can it do?
 
+**_You can now have the flexibility to use protractor-css-booster in two ways -_**
+**_1. using css selector_**
+**_2. using prototype function (in this case you need to use await / resolve promise by "then")_**
+**_Refer below examples_**
+
 Suppose your HTML
@@ -67,5 +72,5 @@
         <ul id="schoolBook">
-            <Name>Thor</Name>
-            <Age>Million Years</Age>
-            <Home>Asgard</Home>
+            <li id="name">Thor</li>
+            <li id="age">Million Years</li>
+            <li id="home">Asgard</li>
         </ul>
@@ -84,5 +89,12 @@ </div>
 ```ts
-const gp = element(by.grandParnetOf("a")); // returns <div id='borr'> <p id="odin"> <a id="thor"> baby thor </a></p></div>
+const target = await element(by.css("#schoolBook")).grandParent(); // returns <div id='borr'> <p id="odin"> <a id="thor"> baby thor </a></p></div>
+target.click(); //proceed with your desired operation
 ```
 
+Or you can use as by-locator style,
+
+```ts
+const target = element(by.grandParentOf("#schoolBook")); // returns <div id='borr'> <p id="odin"> <a id="thor"> baby thor </a></p></div>
+```
+
 #### find Parent:
@@ -95,5 +107,13 @@
 ```ts
-const gp = element(by.parentOf("#thor")); // returns  <p id="odin"><a id="thor"> baby thor </a> </p>
+const target = await element(by.css("#thor")).parent(); // returns <p id="odin"><a id="thor"> baby thor </a> </p>
+target.click(); //proceed with your desired operation
 ```
 
+Or you can use as by-locator style,
+
+```ts
+const target = element(by.parentOf("#thor")); // returns  <p id="odin"><a id="thor"> baby thor </a> </p>
+target.click(); //proceed with your desired operation
+```
+
 #### find Next Sibling:
@@ -106,5 +126,13 @@
 ```ts
-const gp = element(by.nextSiblingOf("Name")); // returns <Age>Million Years</Age>
+const target = await element(by.css("#name")).nextSibling(); // returns <li id="age">Million Years</li>
+target.click(); //proceed with your desired operation
 ```
 
+Or you can use as by-locator style,
+
+```ts
+const target = element(by.nextSiblingOf("#name")); //  returns <li id="age">Million Years</li>
+target.click(); //proceed with your desired operation
+```
+
 #### find Previous Sibling:
@@ -117,5 +145,13 @@
 ```ts
-const gp = element(by.prevSiblingOf("Age")); // returns <Name>Thor</Name>
+const target = await element(by.css("#age")).prevSibling(); // returns <li id="name">Thor</li>
+target.click(); //proceed with your desired operation
 ```
 
+Or you can use as by-locator style,
+
+```ts
+const target = element(by.prevSiblingOf("#age")); // returns <li id="name">Thor</li>
+target.click(); //proceed with your desired operation
+```
+
 #### find Following Sibling:
@@ -130,7 +166,14 @@
 ```ts
-const gp = element(by.cssContainingText("Name", "Thor")).element(
-  by.followingSibling("Age")
-); // returns <Age>Million Years</Age>
+const target = await element(by.css("#name")).nextSibling(); // returns <li id="age">Million Years</li>
+target.click(); //proceed with your desired operation
 ```
 
+Or you can use as by-locator style,
+
+```ts
+const target = element(by.cssContainingText("#name", "Thor")).element(
+  by.followingSibling("#age")
+); // returns <li id="age">Million Years</li>
+```
+
 #### find First Child:
@@ -143,5 +186,13 @@
 ```ts
-const gp = element(by.firstChildOf("#schoolBook")); // returns <Name>Thor</Name>
+const target = await element(by.css("#schoolBook")).firstChild(); // returns <li id="name">Thor</li>
+target.click(); //proceed with your desired operation
 ```
 
+Or you can use as by-locator style,
+
+```ts
+const target = element(by.firstChildOf("#schoolBook")); // returns <li id="name">Thor</li>
+target.click(); //proceed with your desired operation
+```
+
 #### find Last Child:
@@ -154,5 +205,19 @@
 ```ts
-const gp = element(by.lastChildOf("#schoolBook")); // <Home>Asgard</Home>
+const target = await element(by.css("#schoolBook")).lastChild(); // returns <li id="home">Asgard</li>
+target.click(); //proceed with your desired operation
 ```
 
+Or you can use as by-locator style,
+
+```ts
+const target = element(by.lastChildOf("#schoolBook")); // returns <li id="home">Asgard</li>
+target.click(); //proceed with your desired operation
+```
+
+## Sample Test Files:
+
+> Using prototype function sample test cases can be found [here](./test/prototype-function.spec.js)
+
+> using as "by-locator" sample test cases can be found [here](./test/by-locator.spec.js)
+
 ## Tell me your issues
@@ -166,4 +231,4 @@
 
-If works for you, dont forget to give a star. :star2: :star: :star: :star:
+If works for you, kindly give a star. :star2:
 
 _- Copyright &copy; 2019- [Abhinaba Ghosh](https://www.linkedin.com/in/abhinaba-ghosh-9a2ab8a0/)_

tsconfig.json

@@ -21,3 +21,3 @@ {
   },
-  "include": ["src/**/*.ts", "dist/reactSelector.d.ts"]
+  "include": ["src/**/*.ts", "dist/index.d.ts"]
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39417

increased by197.78%

Number of package files

9

increased by28.57%

Lines of code

684

increased by590.91%

Number of lines in readme file

225

increased by40.63%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes