search

ChromeDevTools / devtools-protocol

Chrome DevTools Protocol
https://chromedevtools.github.io/devtools-protocol/
BSD 3-Clause "New" or "Revised" License
1.15k stars 226 forks source link

I have difficulties with understanding what's returned by DOM.performSearch #125

Closed route closed 4 years ago

route commented 6 years ago

There's a webpage

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <ul>
      <li>Visible</li>
      <li style="display: none">Display None</li>
      <li style="visibility: hidden">Hidden</li>
      <li style="opacity: 0.0">Transparent</li>
    </ul>
    <div>
      <span style="display: none">Display None</span>
      <span style="visibility: hidden">Hidden</span>
    </div>
  </body>
</html>

and I'm making performSearch request:

>>> {"method":"DOM.performSearch","params":{"query":"li"},"id":10}
    <<< {"id":10,"result":{"searchId":"1000014701.0","resultCount":5}}

>>> {"method":"DOM.getSearchResults","params":{"searchId":"1000014701.0","fromIndex":0,"toIndex":5},"id":11}
    <<< {"method":"DOM.setChildNodes","params":{"parentId":1,"nodes":[{"nodeId":2,"parentId":1,"backendNodeId":4,"nodeType":10,"nodeName":"html","localName":"","nodeValue":"","publicId":"","systemId":""},{"nodeId":3,"parentId":1,"backendNodeId":5,"nodeType":1,"nodeName":"HTML","localName":"html","nodeValue":"","childNodeCount":2,"attributes":[],"frameId":"8CC37004A28AA3B47721111E207DC4A7"}]}}

    <<< {"method":"DOM.setChildNodes","params":{"parentId":3,"nodes":[{"nodeId":4,"parentId":3,"backendNodeId":6,"nodeType":1,"nodeName":"HEAD","localName":"head","nodeValue":"","childNodeCount":1,"attributes":[]},{"nodeId":5,"parentId":3,"backendNodeId":7,"nodeType":1,"nodeName":"BODY","localName":"body","nodeValue":"","childNodeCount":2,"attributes":[]}]}}

    <<< {"method":"DOM.setChildNodes","params":{"parentId":5,"nodes":[{"nodeId":6,"parentId":5,"backendNodeId":8,"nodeType":1,"nodeName":"UL","localName":"ul","nodeValue":"","childNodeCount":4,"attributes":[]},{"nodeId":7,"parentId":5,"backendNodeId":9,"nodeType":1,"nodeName":"DIV","localName":"div","nodeValue":"","childNodeCount":2,"attributes":[]}]}}

    <<< {"method":"DOM.setChildNodes","params":{"parentId":6,"nodes":[{"nodeId":8,"parentId":6,"backendNodeId":10,"nodeType":1,"nodeName":"LI","localName":"li","nodeValue":"","childNodeCount":1,"children":[{"nodeId":9,"parentId":8,"backendNodeId":11,"nodeType":3,"nodeName":"#text","localName":"","nodeValue":"Visible"}],"attributes":[]},{"nodeId":10,"parentId":6,"backendNodeId":12,"nodeType":1,"nodeName":"LI","localName":"li","nodeValue":"","childNodeCount":1,"children":[{"nodeId":11,"parentId":10,"backendNodeId":13,"nodeType":3,"nodeName":"#text","localName":"","nodeValue":"Display None"}],"attributes":["style","display: none"]},{"nodeId":12,"parentId":6,"backendNodeId":14,"nodeType":1,"nodeName":"LI","localName":"li","nodeValue":"","childNodeCount":1,"children":[{"nodeId":13,"parentId":12,"backendNodeId":15,"nodeType":3,"nodeName":"#text","localName":"","nodeValue":"Hidden"}],"attributes":["style","visibility: hidden"]},{"nodeId":14,"parentId":6,"backendNodeId":16,"nodeType":1,"nodeName":"LI","localName":"li","nodeValue":"","childNodeCount":1,"children":[{"nodeId":15,"parentId":14,"backendNodeId":17,"nodeType":3,"nodeName":"#text","localName":"","nodeValue":"Transparent"}],"attributes":["style","opacity: 0.0"]}]}}

    <<< {"method":"DOM.setChildNodes","params":{"parentId":7,"nodes":[{"nodeId":16,"parentId":7,"backendNodeId":18,"nodeType":1,"nodeName":"SPAN","localName":"span","nodeValue":"","childNodeCount":1,"children":[{"nodeId":17,"parentId":16,"backendNodeId":19,"nodeType":3,"nodeName":"#text","localName":"","nodeValue":"Display None"}],"attributes":["style","display: none"]},{"nodeId":18,"parentId":7,"backendNodeId":20,"nodeType":1,"nodeName":"SPAN","localName":"span","nodeValue":"","childNodeCount":1,"children":[{"nodeId":19,"parentId":18,"backendNodeId":21,"nodeType":3,"nodeName":"#text","localName":"","nodeValue":"Hidden"}],"attributes":["style","visibility: hidden"]}]}}

    <<< {"id":11,"result":{"nodeIds":[8,10,12,14,18]}}

>>> {"method":"DOM.describeNode","params":{"nodeId":8},"id":12}
    <<< {"id":12,"result":{"node":{"nodeId":0,"backendNodeId":10,"nodeType":1,"nodeName":"LI","localName":"li","nodeValue":"","childNodeCount":1,"attributes":[]}}}

>>> {"method":"DOM.describeNode","params":{"nodeId":10},"id":13}
    <<< {"id":13,"result":{"node":{"nodeId":0,"backendNodeId":12,"nodeType":1,"nodeName":"LI","localName":"li","nodeValue":"","childNodeCount":1,"attributes":["style","display: none"]}}}

>>> {"method":"DOM.describeNode","params":{"nodeId":12},"id":14}
    <<< {"id":14,"result":{"node":{"nodeId":0,"backendNodeId":14,"nodeType":1,"nodeName":"LI","localName":"li","nodeValue":"","childNodeCount":1,"attributes":["style","visibility: hidden"]}}}

>>> {"method":"DOM.describeNode","params":{"nodeId":14},"id":15}
    <<< {"id":15,"result":{"node":{"nodeId":0,"backendNodeId":16,"nodeType":1,"nodeName":"LI","localName":"li","nodeValue":"","childNodeCount":1,"attributes":["style","opacity: 0.0"]}}}

>>> {"method":"DOM.describeNode","params":{"nodeId":18},"id":16}
    <<< {"id":16,"result":{"node":{"nodeId":0,"backendNodeId":20,"nodeType":1,"nodeName":"SPAN","localName":"span","nodeValue":"","childNodeCount":1,"attributes":["style","visibility: hidden"]}}}

I have no idea why span is returned? Is that because it has style visibi_li_ty?

JoelEinbinder commented 5 years ago

Yes. Search looks through the outerHTML of the nodes.

route commented 5 years ago

Is this intended behavior? Currently there's no way to look for a node by XPath except using DOM.performSearch which supports plain text or query selector or XPath search query (btw I find it odd that there's no way to specify what type of query you exactly need). There are only DOM.querySelector and DOM.querySelectorAll which support selector. Also if XPath is invalid DOM.performSearch returns nothing while IMO it should be an error if we had clear types of queries supported by it.

TimvdLippe commented 4 years ago

This repository is related to Chrome DevTools Protocol, but does not track issues regarding its definition or implementation. If you want to file an issue for the Chrome DevTools Protocol, please open an issue on https://crbug.com under component: Platform>DevTools>Platform. Thanks in advance!