Namespaces not considered a valid selector

[tomgallagher]

Hi

I've come across a problem with namespaced html tags, where <h:section> is causing a problem.

Any ideas about where I should be looking in your code to make allowances for namespaces?

Thanks

Tom

[tomgallagher]

Hi

Sorry I forgot to say thanks for CSS Selector Generator, it has saved me a lot of time. I'd done everything previously with XPath and it would have taken me ages to deal with a problem where I needed the CSS selectors instead.

The code seems to be here, line 53 onwards. Seems like the tags need to be sanitized, using the work you've already done for IDs.

CssSelectorGenerator.prototype.getTagSelector = function(element) { return element.tagName.toLowerCase(); };

CssSelectorGenerator.prototype.sanitizeItem = function(item) { var characters; characters = (item.split('')).map(function(character) { if (character === ':') { return "\\" + (':'.charCodeAt(0).toString(16).toUpperCase()) + " "; } else if (/[ !"#$%&'()*+,.\/;<=>?@\[\\\]^{|}~]/.test(character)) {
return "" + character;
} else {
return escape(character).replace(/%/g, '');
}
});
return characters.join('');
};`

I'm not as great with regex as I should be.

[fczbkk]

@tomgallagher Thanks for the report. I have created a new build that should work fine with namespaced tags.

[tomgallagher]

Hi thanks for sorting this out. I've tested it on the previous problem and it sailed through.

I've got another message of the same type, slightly different problem.:

Failed to execute 'querySelectorAll' on 'Element': '.12-column' is not a valid selector.

Is the hyphen an invalid character in CSS selection? If so, is that also in need of being sanitized?

[fczbkk]

@tomgallagher Class name can not start with a number. So .12-column is invalid selector. See this answer at Stack Overflow for details.

[robinpokorny]

@fczbkk Just to clarify, 12-column is a valid class name as essentially every string not including a whitespace is a valid class name. However, the dot shorthand syntax in CSS does not support certain class names. You can still use [class~="12-column"].

[tomgallagher]

So I'm getting this number issue sporadically and it's causing me a few problems. For the time being I've taken the class tag out of the CSS selector generator options. Would it solve the problem to always refer to the class using the longhand [class~="12column"] rather than the .12column?

[tomgallagher]

So at line 97, you could replace
results.push("." + (this.sanitizeItem(item)));

with
results.push("[class~='" + (this.sanitizeItem(item)) + "']" );

?

[fczbkk]

@tomgallagher Yes. But that would return attribute selector, instead of class selector. Which means I would have to change some code down the stream, when constructing the whole selector. Also, it would mess with browser compatibilities of generated selectors. So I'd rather not do that now.

[tomgallagher]

OK thanks for taking a look.

[tabjsina]

Resurfacing an old thread, is it possible to do some validation in testSelector/testUniqueness to determine whether the class name is valid as a css selector so those functions can return false rather than causing exception (so that hopefully it could recover and find another unique css selector that is valid)

In both functions, it would change those querySelectorAll lines to something like

try { result = document.querySelectorAll(selector); } catch { return false; }

or

try { document.createDocumentFragment().querySelectorAll(selector); } catch { return false; }
result = document.querySelectorAll(selector);

[fczbkk]

@tabjsina There's new version (v2.0.0) of this library, which does better job of producing valid className selectors. It escapes the class name, so that the resulting selector should be valid even if it contains characters and sequences that are not allowed.

Have a look at the new version. If you still encounter errors or invalid selectors, please create a new issue. Thank you.

[tomgallagher]

That's great. I'll take a look as well. Any chance for a browser build as well as npm?

[fczbkk]

@tomgallagher You can get it at NPM:
https://www.npmjs.com/package/css-selector-generator