Fix :click-element with an ID containing non-alphanumeric characters

See #3201

doc/changelog.asciidoc

@@ -119,6 +119,7 @@ Fixed
 - Fixed crash when closing the tab an external editor was opened in.
 - When using `:search-next` before a search is finished, no warning about no
   results being found is shown anymore.
+- Fix :click-element with an ID containing non-alphanumeric characters.
 
 Deprecated
 ~~~~~~~~~~

qutebrowser/browser/webkit/webkittab.py

@@ -19,6 +19,7 @@
 
 """Wrapper over our (QtWebKit) WebView."""
 
+import re
 import functools
 import xml.etree.ElementTree
 
@@ -545,6 +546,10 @@ class WebKitElements(browsertab.AbstractElements):
                 callback(None)
             else:
                 callback(elems[0])
+
+        # Escape non-alphanumeric characters in the selector
+        # https://www.w3.org/TR/CSS2/syndata.html#value-def-identifier
+        elem_id = re.sub(r'[^a-zA-Z0-9_-]', r'\\\g<0>', elem_id)
         self.find_css('#' + elem_id, find_id_cb)
 
     def find_focused(self, callback):

tests/end2end/data/click_element.html

@@ -9,5 +9,6 @@
         <span>Duplicate</span>
         <form><input id='qute-input'></input></form>
         <a href="/data/hello.txt" id='link'>link</a>
+        <span id='foo.bar' onclick='console.log("id with dot")'>ID with dot</span>
     </body>
 </html>

tests/end2end/features/misc.feature

@@ -449,6 +449,11 @@ Feature: Various utility commands.
         And I run :click-element id qute-input
         Then "Entering mode KeyMode.insert (reason: clicking input)" should be logged
 
+    Scenario: Clicking an element by ID with dot
+        When I open data/click_element.html
+        And I run :click-element id foo.bar
+        Then the javascript message "id with dot" should be logged
+
     Scenario: Clicking an element with tab target
         When I open data/click_element.html
         And I run :tab-only