fix: do not use input's "value" selector

closes #262
fczbkk · Apr 29, 2022 · f9eece2 · f9eece2
1 parent 3fb196e
commit f9eece2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/selector-attribute.ts b/src/selector-attribute.ts
@@ -36,7 +36,16 @@ export function attributeNodeToSelector ({
 /**
  * Checks whether attribute should be used as a selector.
  */
-export function isValidAttributeNode ({nodeName}: Node): boolean {
+export function isValidAttributeNode (
+  {nodeName}: Node,
+  element: Element
+): boolean {
+  // form input value should not be used as a selector
+  const tagName = element.tagName.toLowerCase()
+  if (['input', 'option'].includes(tagName) && nodeName === 'value') {
+    return false
+  }
+
   return !attributeBlacklistMatch(nodeName)
 }
 
@@ -47,7 +56,7 @@ export function getElementAttributeSelectors (
   element: Element,
 ): CssSelectorGenerated[] {
   const validAttributes = Array.from(element.attributes)
-    .filter(isValidAttributeNode)
+    .filter((attributeNode) => isValidAttributeNode(attributeNode, element))
   return [
     ...validAttributes.map(attributeNodeToSimplifiedSelector),
     ...validAttributes.map(attributeNodeToSelector),

diff --git a/test/selector-attribute.spec.js b/test/selector-attribute.spec.js
@@ -107,4 +107,16 @@ describe('selector - attribute', function () {
     assert.deepEqual(result, "[width='\\33 0\\%']")
   })
 
+  it('should ignore `value` attribute on INPUT elements', () => {
+    root.innerHTML = '<input value="123" /><input value="456" />'
+    const result = getCssSelector(root.firstElementChild)
+    assert.notMatch(result, /^\[/)
+  })
+
+  it('should ignore `value` attribute on OPTION elements', () => {
+    root.innerHTML = '<option value="123" /><option value="456" />'
+    const result = getCssSelector(root.firstElementChild)
+    assert.notMatch(result, /^\[/)
+  })
+
 })