fix(rules): improve 'valid-by-tagname' rule

Author: eLRuLL

docs/rules/valid-by-tagname.md

@@ -1,22 +1,23 @@
-# Prohibit use of invalid Html Tag Name value when using `by.tagName()` locator
+# Prohibit use of invalid Tag Name value when using `by.tagName()` locator
 
-Ensure a valid Tag Name is being used with `by.tagName()` locator. We only accept the listed 
-[HTML tags here](http://www.w3schools.com/tags/) to determine the validness of the Tag Name.
+Ensure a valid Tag Name is being used with `by.tagName()` locator. [A valid Tag Name](https://www.w3.org/TR/html/syntax.html#tag-name) should only
+contain alphanumeric and cannot start with a number.
 
-This rule is very useful for notifying when an invalid html Tag Name is being used. 
+This rule is very useful for notifying when an invalid Tag Name is being used. 
 It will also prevent unintentionally putting different types of locators instead of the actual Tag name.
 
 ## Rule details
 
 Any use of the following patterns are considered errors when using `by.tagName`:
 
 ```js
-element(by.tagName("customTagName"));
+element(by.tagName("_customTagName"));
 element(by.tagName("div.classname"));
-element(by.tagName("_blockquote"));
-element(by.tagName("divs"));
+element(by.tagName("blockquote:"));
+element(by.tagName("multiple tagnames"));
 element(by.tagName('option[value="Test"]'));
 element(by.tagName(" div "));
+element(by.tagName("12345"));
 ```
 
 The following patterns are not errors:

lib/rules/valid-by-tagname.js

@@ -1,134 +1,11 @@
 'use strict'
 
 /**
- * @fileoverview Ensure tag name is html valid when using `by.tagName()` locator.
+ * @fileoverview Ensure tag name is valid when using `by.tagName()` locator.
  * @author Raul Gallegos
  */
 
-var validHTMLTagNames = [
-  'a',
-  'abbr',
-  'acronym',
-  'address',
-  'applet',
-  'area',
-  'article',
-  'aside',
-  'audio',
-  'b',
-  'base',
-  'basefont',
-  'bdi',
-  'bdo',
-  'big',
-  'blockquote',
-  'body',
-  'br',
-  'button',
-  'canvas',
-  'caption',
-  'center',
-  'cite',
-  'code',
-  'col',
-  'colgroup',
-  'datalist',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'dialog',
-  'dir',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'embed',
-  'fieldset',
-  'figcaption',
-  'figure',
-  'font',
-  'footer',
-  'form',
-  'frame',
-  'frameset',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'head',
-  'header',
-  'hr',
-  'html',
-  'i',
-  'iframe',
-  'img',
-  'input',
-  'ins',
-  'kbd',
-  'keygen',
-  'label',
-  'legend',
-  'li',
-  'link',
-  'main',
-  'map',
-  'mark',
-  'menu',
-  'menuitem',
-  'meta',
-  'meter',
-  'nav',
-  'noframes',
-  'noscript',
-  'object',
-  'ol',
-  'optgroup',
-  'option',
-  'output',
-  'p',
-  'param',
-  'picture',
-  'pre',
-  'progress',
-  'q',
-  'rp',
-  'rt',
-  'ruby',
-  's',
-  'samp',
-  'script',
-  'section',
-  'select',
-  'small',
-  'source',
-  'span',
-  'strike',
-  'strong',
-  'style',
-  'sub',
-  'summary',
-  'sup',
-  'table',
-  'tbody',
-  'td',
-  'textarea',
-  'tfoot',
-  'th',
-  'thead',
-  'time',
-  'title',
-  'tr',
-  'track',
-  'tt',
-  'u',
-  'ul',
-  'var',
-  'video',
-  'wbr'
-]
+var isTagName = /^[A-Za-z][A-Za-z0-9]*$/
 
 module.exports = {
   meta: {
@@ -146,7 +23,7 @@ module.exports = {
 
         if (insideByTagName && argumentExists) {
           var tagName = node.arguments[0].value
-          if (validHTMLTagNames.indexOf(tagName.toLowerCase()) === -1) {
+          if (!tagName.match(isTagName)) {
             context.report({
               node: node,
               message: 'Invalid TagName value: "' + tagName + '"'

test/rules/valid-by-tagname.js

@@ -19,9 +19,9 @@ eslintTester.run('valid-by-tagname', rule, {
 
   invalid: [
     {
-      code: 'element(by.tagName("customTagName"));',
+      code: 'element(by.tagName("_customTagName"));',
       errors: [{
-        message: 'Invalid TagName value: "customTagName"'
+        message: 'Invalid TagName value: "_customTagName"'
       }]
     },
     {
@@ -31,15 +31,15 @@ eslintTester.run('valid-by-tagname', rule, {
       }]
     },
     {
-      code: 'element(by.tagName("_blockquote"));',
+      code: 'element(by.tagName("blockquote:"));',
       errors: [{
-        message: 'Invalid TagName value: "_blockquote"'
+        message: 'Invalid TagName value: "blockquote:"'
       }]
     },
     {
-      code: 'element(by.tagName("divs"));',
+      code: 'element(by.tagName("multiple tagnames"));',
       errors: [{
-        message: 'Invalid TagName value: "divs"'
+        message: 'Invalid TagName value: "multiple tagnames"'
       }]
     },
     {
@@ -53,6 +53,12 @@ eslintTester.run('valid-by-tagname', rule, {
       errors: [{
         message: 'Invalid TagName value: " div "'
       }]
+    },
+    {
+      code: 'element(by.tagName("12345"));',
+      errors: [{
+        message: 'Invalid TagName value: "12345"'
+      }]
     }
   ]
 })