Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Grouping Similar Elements #80

Open
roniemartinez opened this issue Aug 25, 2021 · 1 comment
Open

[Feature Request] Grouping Similar Elements #80

roniemartinez opened this issue Aug 25, 2021 · 1 comment

Comments

@roniemartinez
Copy link

When a very different element is added to a group of very similar elements, the result tends to become the fallback instead of "grouping" similar elements. For example below, the simplest selector is [aaa], [ddd]. Regardless of the arrangements of the children, the selector should still be the same.

  it('should group similar elements (2-2)', () => {
    root.innerHTML = `
      <div aaa="bbb"></div>
      <div aaa="ccc"></div>
      <p ddd="eee"></p>
      <p ddd="fff"></p>
    `
    const result = getCssSelector(Array.from(root.children))
    assert.ok(testSelector(Array.from(root.children), '[aaa], [ddd]'))  // passes
    assert.equal(result, '[aaa], [ddd]')  // fails
  })

  it('should group similar elements (3-1)', () => {
    root.innerHTML = `
      <div aaa="bbb"></div>
      <div aaa="ccc"></div>
      <div aaa="ddd"></div>
      <p eee="fff"></p>
    `
    const result = getCssSelector(Array.from(root.children))
    assert.ok(testSelector(Array.from(root.children), '[aaa], [eee]'))  // passes
    assert.equal(result, '[aaa], [eee]')  // fails
  })

Output:

    ✖ should subgroup similar elements (2-2)
      Chrome Headless 92.0.4515.159 (Mac OS 10.15.7)
    AssertionError: expected '[aaa=\'bbb\'], [aaa=\'ccc\'], [ddd=\'eee\'], [ddd=\'fff\']' to equal '[aaa], [ddd]'

    ✖ should subgroup similar elements (3-1)
      Chrome Headless 92.0.4515.159 (Mac OS 10.15.7)
    AssertionError: expected '[aaa=\'bbb\'], [aaa=\'ccc\'], [aaa=\'ddd\'], p' to equal '[aaa], [eee]'
@fczbkk
Copy link
Owner

fczbkk commented Aug 25, 2021

Here's how the algorithm works right now:

  • It tries to find a single selector that matches all elements.
  • Then it tries to find a selector for each element specifically and join them.

I think trying to create various group combinations for elements and looking for their selectors would add too much complexity. The problem is, that with each additional combination the total number of selectors that need to be generated and tested grows exponentially.

If I will come up with some smart solution for this, I'll try to implement it. But I really don't want to brute-force this, because I'm afraid it will become a performance issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants