shadowdom - 'copy selector' mostly useless; pls add 'js selector' option
Reported by
davidmax...@gmail.com,
Jan 30 2018
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36 Steps to reproduce the problem: 1. open https://shop.polymer-project.org/ 2. right click on the shopping basket, and select 'inspect' to open dev tools 3. on the 'shop-cart' element on the 'Elements' tab, right click and select Copy/Copy selector 4. In console, type '$(', paste the selector copied, ')', and hit return What is the expected behavior? I expect a selector that is useful in the console, or an alternative javascript command to select the element. What went wrong? The selector is essentially wrong, since it doesn't select anything, except perhaps within it's parent shadowroot. Did this work before? N/A Chrome version: 64.0.3282.119 Channel: stable OS Version: Flash Version: (This need has come about because I need to select elements for testing purposes[1], and /deep/ has been deprecated) Instead of 'Copy selector' (or in addition to?), add an option 'JS selector', which would copy something like the following, which essentially ascends the dom doing 'Copy selector', but when it hits a shadowroot, it splits the query and adds 'shadowRoot': document.querySelector('shop-app').shadowRoot.querySelector('paper-icon-button[icon="shopping-cart"]').shadowRoot.querySelector('iron-icon') This is very tedious to do manually. [1] I'm trying to use the 'EndTest' service <https://endtest.io/>. It allows the tester to add a 'click' action which allows an element to be selected by 'id', 'tag_name', 'name', 'class_name', 'xpath', 'css_selector', 'link', and 'partial link test'. None of those are useful for elements inside shadow dom. The solution they have proposed is to (instead of a 'click' action), use an 'execute javascript' action, which simply allows you to enter some javascript code. This is where the above need comes in. It would be much easier for a test to right click on the element and select 'js select' to copy a line of javascript that can be used to select the element from the root dom, ie `document.querySelector('shop-app').shadowRoot.querySelector('paper-icon-button[icon="shopping-cart"]')`, and then simply append '.click()' if appropriate.
,
Jan 30 2018
,
Jan 31 2018
Tested the issue on reported chrome version 64.0.3282.119 and on the latest dev 66.0.3335.0 using Ubuntu 14.04 with the below mentioned steps. 1. Launched Chrome 2. Navigated to https://shop.polymer-project.org/ 3. Right clicked on the shopping basket, and clicked 'inspect' then opened dev tools. 4. On the 'shop-cart' element on the 'Elements' tab, right clicked and selected Copy->Copy selector 5. Pasted the copied result in console with '$(', "copied text", ')' We are able to paste the copied text in console, but got an error when hit return. Attaching the screenshot of the same. @Reporter: Could you please check the screenshot and let us know if anything missed while reproducing the issue. Any further inputs from your end may help us triage the issue in a better way. Thanks!
,
Jan 31 2018
Yes, I missed a step...which is to search for the '<shop-cart>' element in the Elements tab, and right click on that and select the Copy selector. Then paste that into a '$()' command:
> $('iron-pages > shop-cart')
< null
That what I mean by it being useless.
To actually be able to get a reference to an element, I need to find the document root for the element element, then it's document root, etc etc. This seems to work. In this case, it is only a single document root, so this works:
> $('shop-app').shadowRoot.querySelector('iron-pages > shop-cart')
(copy/paste doesn't work very well in the console, so I can't copy the element that is output by that command)
In my real app, there are several layers of shadowRoot, and it is quite complicated to get the above command which is needed to test the element (in absence of /deep/ or >>>.
Sorry for my error.
,
Jan 31 2018
Thank you for providing more feedback. Adding requester "vamshi.kommuri@techmahindra.com" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jan 31 2018
,
Apr 17 2018
FWIW, I have been working around this using this pattern:
["ant-app","tour-select"].reduce((a,i) => a.querySelector(i).shadowRoot, document).querySelector("p.version")
where the array is the list of ancestors of the clicked-on item that have shadow dom, and the final query is the result of the 'copy->selector' for the clicked-on item.
Perhaps that is a valid solution to this problem? ie, add a menu option to the copy menu 'selector to document root' or something appropriate; that, when clicked, copies the appropriate code, like above, into the copy buffer? If that is then pasted into the console, then it actually returns the correct element.
|
|||||
►
Sign in to add a comment |
|||||
Comment 1 by davidmax...@gmail.com
, Jan 30 2018