alecxe/eslint-plugin-protractor

View on GitHub
docs/rules/no-angular-classes.md

Summary

Maintainability
Test Coverage
# Discourage using Angular CSS classes inside CSS selectors
 
Ensure CSS classes used by Angular internally are not used to locate elements via Protractor.
 
## Rule details
 
Current list of Angular classes this rule would complain about (based on the [CSS styling documentation page](https://docs.angularjs.org/guide/css-styling)):
 
* `ng-scope`
* `ng-isolate-scope`
* `ng-binding`
* `ng-valid`
* `ng-invalid`
* `ng-pristine`
* `ng-dirty`
* `ng-touched`
* `ng-untouched`
 
:thumbsdown: Any use of the following patterns are considered warnings:
 
```js
element(by.css(".ng-scope"));
element.all(by.css(".ng-isolate-scope"));
$(".ng-binding");
$$(".ng-valid");
$("[class='ng-invalid']");
$$("[class*='ng-pristine']");
$(".myclass.ng-dirty");
element(by.id("id")).$$(".ng-touched.myclass");
element(by.id("id")).$("input.ng-untouched");
```
 
:thumbsup: The following patterns are not warnings:
 
```js
element(by.css(".myclass"));
element.all(by.css(".myclass"));
$(".myclass");
$$(".myclass");
$("[class='myclass']");
$$("[class*='myclass']");
$(".myclass.myotherclass");
$$(".myotherclass.myclass");
$("input.myclass");
var s = "ng-scope";
element(by.id("ng-isolate-scope"));
```