alecxe/eslint-plugin-protractor

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

Summary

Maintainability
Test Coverage
# Discourage using Bootstrap layout-oriented CSS classes inside CSS selectors

Ensure layout-oriented Bootstrap classes are not used inside CSS selectors. 

Classes like `col-lg-pull-5` or `col-sm-offset-11` define a container layout on a page and do not bring any valuable information about the element. Neither they uniquely identify elements. 
Compare these classes with, for example, `product` or `itemPrice` classes - these classes are, generally, a good choice to base locators on since they have a "data" meaning not related to the way elements are presented on a page.

## Rule details

Current list of Bootstrap classes this rule would complain about can be viewed [here](../../lib/bootstrap-layout-classes.js) (hand-picked).

:thumbsdown: Any use of the following patterns are considered warnings:

```js
element(by.css(".col-lg-12"));
element.all(by.css(".col-lg-offset-11"));
$(".col-sm-11");
$$(".col-sm-push-4");
$("[class='col-md-10']");
$$("[class*='col-md-offset-4']");
$(".myclass.col-lg-pull-8");
element(by.id("id")).$$(".col-lg-offset-8.myclass");
element(by.id("id")).$("input.col-lg-pull-8");
```

:thumbsup: The following patterns are not warnings:

```js
element(by.css(".myclass"));
element.all(by.css(".myclass"));
$(".myclass");
$$(".myclass");
$("input.myclass");
```