protractor-css-booster
Advanced tools
Weekly downloads
Readme
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.
Now, you can find web elements such as:
And, guess what, everything you can find using :collision: CSS Selectors :collision:
IE Support added from version 1.0.9
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:
exports.config = {
// ... the rest of your config
plugins: [
{
// The module name
package: "protractor-css-booster"
}
]
};
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
<div>
<h2>Thor's Biodata</h2>
<div id='borr'>
<p id="odin">
<a id="thor"> baby thor </a>
</p>
</div>
<div>
<ul id="schoolBook">
<li id="name">Thor</li>
<li id="age">Million Years</li>
<li id="home">Asgard</li>
</ul>
</div>
</div>
This Locator helps to identify the grand parent element of a target element
You can find the grand parent by:
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,
const target = element(by.grandParentOf("#schoolBook")); // 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
You can find the parent by:
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,
const target = element(by.parentOf("#thor")); // returns <p id="odin"><a id="thor"> baby thor </a> </p>
target.click(); //proceed with your desired operation
The nextSiblingOf locator returns the node immediately following the specified node, in the same tree level.
You can find the next sibling by:
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,
const target = element(by.nextSiblingOf("#name")); // returns <li id="age">Million Years</li>
target.click(); //proceed with your desired operation
The prevSiblingOf locator returns the previous element of the specified element, in the same tree level.
You can find the previous sibling by:
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,
const target = element(by.prevSiblingOf("#age")); // returns <li id="name">Thor</li>
target.click(); //proceed with your desired operation
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:
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,
const target = element(by.cssContainingText("#name", "Thor")).element(
by.followingSibling("#age")
); // returns <li id="age">Million Years</li>
The firstChildOf locator returns the first child element of the specified element.
You can find the first child by:
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,
const target = element(by.firstChildOf("#schoolBook")); // returns <li id="name">Thor</li>
target.click(); //proceed with your desired operation
The lastChildOf locator returns the last child element of the specified element.
You can find the last child by:
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,
const target = element(by.lastChildOf("#schoolBook")); // returns <li id="home">Asgard</li>
target.click(); //proceed with your desired operation
Using prototype function sample test cases can be found here
using as "by-locator" sample test cases can be found here
you can raise any issue here
Any pull request is welcome keeping proper code structure.
If works for you, kindly give a star. :star2:
- Copyright © 2019- Abhinaba Ghosh
FAQs
custom css locators for Protractor
The npm package protractor-css-booster receives a total of 673 weekly downloads. As such, protractor-css-booster popularity was classified as not popular.
We found that protractor-css-booster demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.