question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`querySelector` cannot resolve selectors with escaped IDs

See original GitHub issue

For example, as a CSS selector, ID as "0foo.000" requires escape the first "0" and "." at least. Current browsers also have CSS.escape(str) builtin for escaping any IDs.

But the current jsdom (9.4.0) cannot resolve the ID above. the code as:

"use strict";

const jsdom = require("jsdom");
const document = jsdom.jsdom();

//(same codes on web console and nodejs)
const elems = document.createElement("div");
const a = document.createElement("span");
a.id = "0foo.000";
elems.appendChild(a);

//fail with jsdom but pass on browsers
console.assert(elems.querySelector("#\\30 foo\\.000") === a);

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:17 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
P0oOOOo0YAcommented, Aug 24, 2019

Doing jest dom manipulation test with jsdom as test environment, found out CSS is not defined. Seems that it is not implemented.

0reactions
Sebmastercommented, Nov 26, 2016

Just tested this manually and since we already have #1627 open for tests I guess we don’t need this anymore.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot use query selector with id's that includes "." [duplicate]
Failed to execute 'querySelector' on 'Element': '#gen__1002_____46.14' is not a valid selector. When id does not include dot character, it ...
Read more >
883044 - querySelector doesn't work if the ID contains a colon (:)
querySelector doesn't work if the ID contains a colon (:) ... Furthermore, literal newlines cannot be escaped by prefixing them with a backslash...
Read more >
Why should we not use document.querySelector() while ...
Using querySelector as an escape hatch to query by class or id is not recommended because they are invisible to the user. Use...
Read more >
get | Cypress Documentation
Get one or more DOM elements by selector or alias. The querying behavior of ... Find the element with id that starts with...
Read more >
HTML DOM querySelectorAll() Method - W3Schools
CSS selectors, String, Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found