Skip to content

Inconsistent selectors in Chrome and Firefox #79

@qmegas

Description

@qmegas

I know that library not maintained anymore, but hope that some day author will fix the issue

Accidently I have discovered that in some cases Chrome and Firefox generate different optimal selectors for same element. After debugging I found the problem in findAttributesPattern function. The problem in the way Array.sort function works in different browsers.

In my case in that line

const sortedKeys = Object.keys(attributes).sort((curr, next) => {
attributes variable is

0: class
1: data-css
class: class
data-css: data-css
length: 2
[[Prototype]]: NamedNodeMap

Object.keys(attributes) returns identical array ['0', '1'], but when sort callback function called in Chrome values are curr = '1', next = '0', but in Firefox curr = '0', next = '1'. So, at the end following logic:

if (nextPos === -1) {
  if (currPos === -1) {
    return 0;
  }
  return -1;
}
return currPos - nextPos;

works differently and sortedKeys in Chrome will be ['1', '0'], but in Firefox ['0', '1'].

Additional information:

  • select function called with default settings, priority variable is
0: "id"
1: "class"
2: "href"
3: "src"
length: 4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions