Convert to [attribute] without value

[roniemartinez]

Very cool project! 💯

Is it possible to further simplify the selectors if the attribute values are different? For example the output below:

[href='https\3A \/\/www\.w3schools\.com\/css\/css_attribute_selectors\.asp'] h3
[href='https\3A \/\/developer\.mozilla\.org\/en-US\/docs\/Web\/CSS\/Attribute_selectors'] h3
[href='https\3A \/\/css-tricks\.com\/almanac\/selectors\/a\/attribute\/'] h3

Can be simplified even more like this:

[href] h3

You can replicate this as these are just title links from Google Search page.

[fczbkk]

@roniemartinez Thanks to the suggestion. The library should now (since v3.4.0) prefer simplified attribute selector, if possible.

[roniemartinez]

@fczbkk Thank you for the very fast work.

However shouldn't it return the simplified selector for the test below because the attribute aaa is common to both? Or is there a way to force the use of the simplified selector?

  it('should use full selector', () => {
    root.innerHTML = `
      <div aaa="bbb"></div>
      <div aaa="ccc"></div>
    `
    const result = getCssSelector(root.firstElementChild)
    assert.equal(result, "[aaa='bbb']")
  })

[roniemartinez]

@fczbkk I understand now that the unit test that you did was for the unique element. Please ignore my previous assumption on the said unit test.

I think if there are multiple elements passed to getCssSelector(), it should give me the intended behavior as below.

  it('should use simplified selector for multiple elements', () => {
    ...
    const result = getCssSelector([<first element>, <second element>])
    assert.equal(result, "[aaa]")
  })

[fczbkk]

@roniemartinez I have added test specifically for this:

css-selector-generator/test/selector-attribute.spec.js

Lines 95 to 102 in 52acfa7

	it('should use simplified selector for multiple elements', () => {
	root.innerHTML = `
	<div aaa="bbb"></div>
	<div aaa="ccc"></div>
	`
	const result = getCssSelector(Array.from(root.children))
	assert.equal(result, '[aaa]')
	})

[roniemartinez]

@fczbkk I see but I gave it a go and the results are still not what is intended.

Is it because of this scenario?

• There are 10 <div aaa="<random>"></div
• Only pass any 2 items of those divs to getCssSelector()

[fczbkk]

@roniemartinez Yes, exactly. The resulting CSS selector from getCssSelector() must always uniquely match only target element(s).

[roniemartinez]

@fczbkk Gotcha. I was hoping there could be a way to force it to get the simplified selector just from 2 or more samples?

Think of the same behavior as SelectorGadget? Maybe we can add an option to allow it?

[fczbkk]

@roniemartinez I have checked the SelectorGadget. It is a UI tool for iterative building of a selector that matches multiple elements. I think you are looking for a functionality that is out of scope for this library. Something like that could probably be built on top of this library. But it was from the beginning created to produce selectors that are not fuzzy.

[roniemartinez]

@fczbkk Thanks for looking into this issue.