Re: [w3c/webcomponents] [WebDriver] Testability of web components (#771)

@annevk I think that the core of the issue is that shadow dom tries to be a 'one size fits all' solution.

Usually people speak of web components in the sense of UI component libraries: `<my-button>`, `<my-selector>`, `<my-dropdown>` etc. and in those cases shadow dom with all it's encapsulation works great. Even when writing webdriver tests you don't want to click on the `<button>` element that's inside of `<my-button>`. The `<my-button>` component itself is interactable, so clicking that should trigger the right action.

I think the main problem here is when you build larger apps using web component and shadow dom. A component that represents a page can contain multiple interactable elements, and it makes sense to use style encapsulation there. But there is no requirement for the hardcode encapsulation (dom nodes, querySelector, ids, aria attributes etc.) that you also get when you add shadow dom. For non-shared components, it can actually be very useful to be able to poke around the internals of these components, that's how the web has always worked. 

Being able to have more control over the level of encapsulation would go a long way in simplifying the testing of components. Besides that, I think a few extra tools would help:

* ::part from http://tabatkins.github.io/specs/css-shadow-parts/ can help with enabling components to expose individual elements which can be interacted with
* something like the removed ::shadow selector can help by querying the shadow dom of an individual element

In the end though, we've been testing large web component apps for a couple of years now and we simply have a `deepQuerySelector` script which we inject in our webdriver tests. It lets us write regular CSS selector and it recursively walks through shadow roots until it finds the first matching element. It's hacky and bad for performance, but very effective. Custom elements are a great tool here, as we can use the element names in the selectors. So I'm wondering if just adding `/deep/` back for testing will not just solve the problem.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/771#issuecomment-439556582