Nightwatch: Ability to Register a Default Custom Locator Strategy

[jstrimpel]

I have ~50 repositories (and growing). These repositories contain custom elements. I would like to be able to easily functional test these custom elements. However, this requires writing an extensive amount of custom commands and assertions just to account for selecting a node in the Shadow DOM. Ideally I would like to define a custom locator strategy, so that I can extend CSS selectors to use the deprecated ::shadow selector, e.g., client. waitForElementPresent('foo-element::shadow div.i-am-here'). The locator strategy would need the ability to execute code in the browser so it can reference this.shadowRoot and traverse through to get a handle to the desired node.

Is the ability to register a default custom locator strategy to support requirements like this something that you would consider?

Note: As a work around I am wrapping commands like click in client instances, but this is not ideal because other APIs like waitForElementPresent would need to be fully replicated without the ability to define a custom locator strategy.

[beatfactor]

Thanks, we will consider adding this in a next major release (1.0).

[jstrimpel]

If I implement will you accept the PR provided it meets the contribution guidelines and is technically sound?

[jstrimpel]

In case anyone else who needs to functional test custom elements run across this thread...

I took alternate approach and polyfilled >>> in querySelector and querySelectorAll using execute before tests are executed.

[a-xin]

@jstrimpel That sounds like a great workaround - would you mind sharing how you implemented the polyfill as well as how you load it?

[jstrimpel]

The code is owned by my employer... The polyfill implementation is a bit of hack, but essentially I check for the existence of >>> in a try, catch, document.querySelector('body >>>'), if it fails then I cache off the native query selector functions, and finally polyfill native query selectors, e.g., document.querySelector = function () {...};. The polyfill consists of splitting the query string, finding shadow roots and drilling through to the nodes (recursively). This is done in an execute function that is run before each page load. I haven't used this approach widely yet. It was just done as POC. It still needs to be updated to work in browser that polyfill web components as well. Once it is ready for prime time I will open source it and add a comment to this issue.

[kimbolice]

@jstrimpel Do you have any examples of how to interact with Shadow dom? I am also running into this issue