valid-by-id.md

Prohibit use of invalid ID value when using by.id() locator

Ensure ID is valid when using by.id() locator. We take HTML4 standard to determine the validness of the ID. Basically we are checking if the ID matches the following rule:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Let's take into account that HTML5 is even more permissive which could result in conflicts with this rule.

This rule is very useful for notifying when an invalid html id is being used. It will also prevent unintentionally putting id attribute CSS selector instead of the actual id value - for example: #my-id instead of just my-id.

Rule details

👎 Any use of the following patterns are considered errors when using by.id:

element(by.id("#id"));
element(by.id("1startwithnumber"));
element(by.id("_"));
element(by.id("#"));
element(by.id("invalid*id"));
element(by.id("id with spaces"));

👍 The following patterns are not errors:

element(by.id("validID"));
element(by.css(".myclass"));
element.all(by.id("simpleid"));
element.all(by.id("foo-bar"));
element.all(by.id("foo:bar"));
element.all(by.id("foo_bar"));
element.all(by.id("foo.bar"));
element.all(by.id("a123456789"));
element.all(by.id("a1-_:.r2D2"));