Regarding an ID that starts with a digit, I found an interesting post
Can I have a div with id as number?
Yes, you can.
id values that consist solely of digits are perfectly valid in HTML; anything but a space is okay. And although earlier HTML specs were more restrictive (ref, ref), requiring a small set of chars and starting with a letter, browsers never cared, which is a big part of why the HTML5 specification opens things up.
If you’re going to use those id s with CSS selectors (e.g, style them with CSS, or locate them with querySelector , querySelectorAll , or a library like jQuery that uses CSS selectors), be aware that it can be a pain, because you can’t use an id starting with a digit in a CSS id selector literally ; you have to escape it. (For instance, #12 is an invalid CSS selector; you have to write it #\31\32 .) For that reason, it’s simpler to start it with a letter if you’re going to use it with CSS selectors.
As for HTML5 spec, yes, an ID can start with a digit. However, the CSS Selector specification doesn’t literally accept it.
I (kazurayam) was surprised with this discrepancy in the w3c standard specs! Our pain is due to the CSS spec. Our pain is not due to browsers, nor to Selenium, nor to Katalon Studio.
Here I will show you some experiments that I have done. Please download the following 2 HTML files and open them with Chrome. Please check the console logs in the JavaScript Console.
-
fixture_easy.html (1.8 KB)
-
fixture_painful.html (2.0 KB)
The fixture_easy.html has code like this:
<!DOCTYPE html>
<html lang="en">
....
<body>
<div class='sub-head-image ng-star-inserted' id="fae2920d068b224134037e8" style="background-image: url('https://foo.bar.com/Eggs_Benedict-01-cropped_1610015415453')">ID that starts with a letter is easy.</div>
....
<script>
window.onload = function() {
console.log("Hello");
console.log(document.querySelector("#fae2920d068b224134037e8")
.style.backgroundImage);
}
Please note the ID is fae2920d068b224134037e8, which does NOT start with a digit.
In the Console, you would see the following output.
Hello
fixture_easy.html:30 url("https://foo.bar.com/Eggs_Benedict-01-cropped_1610015415453")
ID that start with a letter is easy.
On the other hand, “fixture_painful.html” goes like this:
<!DOCTYPE html>
<html lang="en">
....
<body>
<div class='sub-head-image ng-star-inserted' id="5fae2920d068b224134037e8" style="background-image: url('https://foo.bar.com/Eggs_Benedict-01-cropped_1610015415453')">ID that starts with a digit is a pain.</div>
....
<script>
window.onload = function() {
console.log("by getElementById: " + document.getElementById("5fae2920d068b224134037e8").style.backgroundImage);
console.log("by querySelector: " + document.querySelector("#\\35fae2920d068b224134037e8").style.backgroundImage);
}
</script>
</body>
</html>
Please note the ID is 5fae2920d068b224134037e8, that starts with a digit 5.
When I loaded this HTML on browser, I saw the following logs in the JavaScript Console.
by getElementById: url("https://foo.bar.com/Eggs_Benedict-01-cropped_1610015415453") fixture_painful.html:30
Uncaught TypeError: Cannot read properties of null (reading 'style') at window.onload (fixture_painful.html:30)
According to the stackoverflow post, escaping the starting 5 to \\35 should make querySelector() happy. But actually the following code returned null:
document.querySelector("#\\35fae2920d068b224134037e8")
I could not resolve it. Finally I gave up.
My Conclusion:
In the case where ID in a HTML can starts with a digit, we shouldn’t use CSS Selector.
