How to find an element using JS Path

Sometimes elements are in Shadow can be conveniently located uisng JS path without manually going through the DOM.

Write click on the element and click copy JS path.

Original value will be like this.

document.querySelector("body > macroponent-f51912f4c700201072b211d4d8c26010").shadow
Root.querySelector("div > sn-canvas-appshell-root > sn-canvas-appshell-layout > sn-polaris-layout").shadowRoot.querySelector("div.sn-polaris-layout.polaris-enabled > div.layout-main > div.header-bar > sn-polaris-header").shadowRoot.querySelector("nav > div > div.ending-header-zone > div.polaris-header-controls > div.polaris-search.polaris-enabled > sn-search-input-wrapper").shadowRoot.querySelector("sn-component-workspace-global-search-typeahead").shadowRoot.querySelector("#sncwsgs-typeahead-input")

All you gor to do is replace “document.querySelector” prefix with “return document.querySelector” and if needed handle “ with \”.

WebCommand.pause(5000);
WebElement linkMatch= (WebElement) js.executeScript("return document.querySelector(\"body > macroponent-f51912f4c700201072b211d4d8c26010\").shadowRoot.querySelector(\"div > sn-canvas-appshell-root > sn-canvas-appshell-layout > sn-polaris-layout\").shadowRoot.querySelector(\"div.sn-polaris-layout.polaris-enabled > div.layout-main > div.header-bar > sn-polaris-header\").shadowRoot.querySelector(\"nav > div > div.ending-header-zone > div.polaris-header-controls > div.polaris-search.polaris-enabled > sn-search-input-wrapper\").shadowRoot.querySelector(\"sn-component-workspace-global-search-typeahead\").shadowRoot.querySelector(\"#sncwsgs-typeahead-record-0-0 > div > now-label-value-stacked\").shadowRoot.querySelector(\"dl > div:nth-child(1) > dd > div\")");