custom css locators for Protractor
npm install protractor-css-boostershell
npm install --save protractor-css-booster
npm install --save-dev protractor-css-booster
`
Usage
> _protractor-css-booster_ supports NodeJS 8 or higher
$3
_protractor-css-booster_ can be used as a plugin in your protractor configuration file with the following code:
`typescript
exports.config = {
// ... the rest of your config
plugins: [
{
// The module name
package: "protractor-css-booster"
}
]
};
`
$3
_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
`HTML
`
#### find GrandParent:
This Locator helps to identify the grand parent element of a target element
You can find the grand parent by:
`ts
const target = await element(by.css("#schoolBook")).grandParent(); // returns
target.click(); //proceed with your desired operation
`
Or you can use as by-locator style,
`ts
const target = element(by.grandParentOf("#schoolBook")); // returns
`
#### find Parent:
This Locator helps to identify the parent element of a target element
You can find the parent by:
`ts
const target = await element(by.css("#thor")).parent(); // returns
target.click(); //proceed with your desired operation
`
Or you can use as by-locator style,
`ts
const target = element(by.parentOf("#thor")); // returns
target.click(); //proceed with your desired operation
`
#### find Next Sibling:
The nextSiblingOf locator returns the node immediately following the specified node, in the same tree level.
You can find the next sibling by:
`ts
const target = await element(by.css("#name")).nextSibling(); // returns Million Years
target.click(); //proceed with your desired operation
`
Or you can use as by-locator style,
`ts
const target = element(by.nextSiblingOf("#name")); // returns Million Years
target.click(); //proceed with your desired operation
`
#### find Previous Sibling:
The prevSiblingOf locator returns the previous element of the specified element, in the same tree level.
You can find the previous sibling by:
`ts
const target = await element(by.css("#age")).prevSibling(); // returns Thor
target.click(); //proceed with your desired operation
`
Or you can use as by-locator style,
`ts
const target = element(by.prevSiblingOf("#age")); // returns Thor
target.click(); //proceed with your desired operation
`
#### find Following Sibling:
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
You can find the following sibling by:
`ts
const target = await element(by.css("#name")).nextSibling(); // returns Million Years
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 Million Years
`
#### find First Child:
The firstChildOf locator returns the first child element of the specified element.
You can find the first child by:
`ts
const target = await element(by.css("#schoolBook")).firstChild(); // returns Thor
target.click(); //proceed with your desired operation
`
Or you can use as by-locator style,
`ts
const target = element(by.firstChildOf("#schoolBook")); // returns Thor
target.click(); //proceed with your desired operation
`
#### find Last Child:
The lastChildOf locator returns the last child element of the specified element.
You can find the last child by:
`ts
const target = await element(by.css("#schoolBook")).lastChild(); // returns Asgard
target.click(); //proceed with your desired operation
`
Or you can use as by-locator style,
`ts
const target = element(by.lastChildOf("#schoolBook")); // returns Asgard
target.click(); //proceed with your desired operation
``