abhinaba-ghosh

protractor-css-booster

  "description": "custom css locators for Protractor",

    "webdriver-start": "webdriver-manager update --ignore_ssl && webdriver-manager start",

    "url": "https://github.com/abhinaba1080/protractor-locator-booster.git"

    "followingSibling,nextSiblingOf,prevSiblingOf",

  "author": "Abhinaba Ghosh <askabhinaba@gmail.com>",

    "jasmine-console-reporter": "^3.1.0",

Finding an web element using XPATH is not a right choice to make as it slows down the element finding mechanism. But, due to the lack of CSS support for multiple use cases, still XPATH use to gather some space in your testing world.

Worry not! Here comes Protractor-CSS-Booster! :hatching_chick:

_protractor-css-booster_ is lightweight plugin to help you to find out web elements by using special custom selectors. All the custom locator uses CSS selector as an input to accomplish the task for you.

And, guess what, everything you can find using :collision: **CSS Selectors** :collision:

Install this module locally with the following command to be used as a (dev-)dependency:

npm install --save protractor-css-booster

npm install --save-dev protractor-css-booster

> _protractor-css-booster_ supports NodeJS 8 or higher

_protractor-css-booster_ can be used as a plugin in your protractor configuration file with the following code:

This Locator helps to identify the grand parent element of a target element

const gp = element(by.grandParnetOf("a")); // retuns <div id='borr'> <p id="odin"> <a id="thor"> baby thor </a></p></div>

const gp = element(by.grandParnetOf("a")); // returns <div id='borr'> <p id="odin"> <a id="thor"> baby thor </a></p></div>

This Locator helps to identify the parent element of a target element

const gp = element(by.parentOf("#thor")); // retuns  <p id="odin"><a id="thor"> baby thor </a> </p>

const gp = element(by.parentOf("#thor")); // returns  <p id="odin"><a id="thor"> baby thor </a> </p>

The nextSiblingOf locator returns the node immediately following the specified node, in the same tree level.

const gp = element(by.nextSiblingOf("Name")); // retuns <Age>Million Years</Age>

const gp = element(by.nextSiblingOf("Name")); // returns <Age>Million Years</Age>

The prevSiblingOf locator returns the previous element of the specified element, in the same tree level.

const gp = element(by.prevSiblingOf("Age")); // retuns <Name>Thor</Name>

const gp = element(by.prevSiblingOf("Age")); // returns <Name>Thor</Name>

The followingSibling locator returns the following sibling of a given element. This should always be used with element chain as the second element finder.

It will help you to omit the xpath's //following-sibling:: dependency

const gp = element(by.cssContainingText("Name", "Thor")).element(

The firstChildOf locator returns the first child element of the specified element.

const gp = element(by.firstChildOf("#schoolBook")); // retuns <Name>Thor</Name>

const gp = element(by.firstChildOf("#schoolBook")); // returns <Name>Thor</Name>

The lastChildOf locator returns the last child element of the specified element.

const gp = element(by.lastChildOf("#schoolBook")); // <Home>Asgard</Home>

you can raise any issue [here](https://github.com/abhinaba1080/protractor-css-booster/issues)

Any pull request is welcome keeping proper code structure.

If works for you, dont forget to give a star. :star2: :star: :star: :star:

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

		@@ -80,3 +80,3 @@ ## What can it do?
		```ts
		const gp = element(by.grandParnetOf("a")); // retuns <div id='borr'> <p id="odin"> <a id="thor"> baby thor </a></p></div>
		const gp = element(by.grandParnetOf("a")); // returns <div id='borr'> <p id="odin"> <a id="thor"> baby thor </a></p></div>
		```
		@@ -91,3 +91,3 @@
		```ts
		const gp = element(by.parentOf("#thor")); // retuns <p id="odin"><a id="thor"> baby thor </a> </p>
		const gp = element(by.parentOf("#thor")); // returns <p id="odin"><a id="thor"> baby thor </a> </p>
		```
		@@ -102,3 +102,3 @@
		```ts
		const gp = element(by.nextSiblingOf("Name")); // retuns <Age>Million Years</Age>
		const gp = element(by.nextSiblingOf("Name")); // returns <Age>Million Years</Age>
		```
		@@ -113,3 +113,3 @@
		```ts
		const gp = element(by.prevSiblingOf("Age")); // retuns <Name>Thor</Name>
		const gp = element(by.prevSiblingOf("Age")); // returns <Name>Thor</Name>
		```
		@@ -128,3 +128,3 @@
		by.followingSibling("Age")
		); // retuns <Age>Million Years</Age>
		); // returns <Age>Million Years</Age>
		```
		@@ -139,3 +139,3 @@
		```ts
		const gp = element(by.firstChildOf("#schoolBook")); // retuns <Name>Thor</Name>
		const gp = element(by.firstChildOf("#schoolBook")); // returns <Name>Thor</Name>
		```
		@@ -142,0 +142,0 @@

Improved metrics