Escape spaces in ID locators.

Spaces aren't legal characters in IDs, but the singular locator (bot.locators.id.single) accepts them, as does document.getElementById in every browser, so the plural locator should work for the sake of consistency.

Author: juangj

javascript/atoms/locators/id.js

@@ -79,8 +79,7 @@ bot.locators.id.many = function(target, root) {
   }
   if (bot.locators.id.canUseQuerySelector_(root, target)) {
     try {
-      // ID can contain anything but spaces. Need to escape for CSS selector.
-      // http://www.w3.org/TR/html5/dom.html#the-id-attribute
+      // Need to escape the ID for use in a CSS selector.
       return root.querySelectorAll('#' + bot.locators.id.cssEscape_(target));
     } catch (e) {
       return [];
@@ -97,6 +96,10 @@ bot.locators.id.many = function(target, root) {
  * Given a string, escapes all the characters that have special meaning in CSS.
  * https://mathiasbynens.be/notes/css-escapes
  *
+ * An ID can contain anything but spaces, but we also escape spaces because some
+ * webpages use spaces, and getElementById allows spaces in every browser.
+ * http://www.w3.org/TR/html5/dom.html#the-id-attribute
+ *
  * This could be further improved, perhaps by using
  * http://dev.w3.org/csswg/cssom/#the-css.escape()-method , where implemented,
  * or a polyfill such as https://github.com/mathiasbynens/CSS.escape.
@@ -107,5 +110,5 @@ bot.locators.id.many = function(target, root) {
  */
 bot.locators.id.cssEscape_ = function(s) {
   // One backslash escapes things in a regex statement; we need two in a string.
-  return s.replace(/(['"\\#.:;,!?+<>=~*^$|%&@`{}\-\/\[\]\(\)])/g, '\\$1');
+  return s.replace(/([ '"\\#.:;,!?+<>=~*^$|%&@`{}\-\/\[\]\(\)])/g, '\\$1');
 };

javascript/atoms/test/locator_test.html

@@ -229,11 +229,16 @@
         var els = bot.locators.findElements({id: id});
         assertEquals("Expected exactly one element with ID " + id, 1, els.length);
         assertEquals(expectedName, els[0].getAttribute('name'));
+
+        var el = bot.locators.findElement({id: id});
+        assertNotNullNorUndefined("Expected element with ID " + id, el);
+        assertEquals(expectedName, el.getAttribute('name'));
       }
 
       findById("'", 'apóstrofo');
       findById('"', 'comilla');
       findById('\\', 'barra_invertida');
+      findById('s p a c e', 'space');
       findById('#.:;,!?+<>=~*^$|%&@`{}-/[]()', 'remaining_css_special_symbols');
     }
 
@@ -396,6 +401,7 @@
   <div name="apóstrofo" id="'">apóstrofo</div>
   <div name="comilla" id='"'>comilla</div>
   <div name="barra_invertida" id="\">barra invertida</div>
+  <div name="space" id="s p a c e">space</div>
   <div name="remaining_css_special_symbols" id="#.:;,!?+<>=~*^$|%&@`{}-/[]()">queso!</div>
 
   <a id="link" href="#">this is a link</a>