search

siemens / ix

Siemens Industrial Experience is a design system for designers and developers, to consistently create the perfect digital experience for industrial software products.
https://ix.siemens.io/
MIT License
198 stars 67 forks source link

Testability is compromised #967

Closed idanko501 closed 8 months ago

idanko501 commented 10 months ago

We are using a Selenium based test environment for years without problem, but the structure of the iX design requires a lot of effort to test. In many points the structure seams overcomplicated (select vs ix-select to mention one) and the overuse of shadow-roots makes it almost impossible to reach UI elements.

What is the test concept and/or preferred automated tool for testing this UI? Is it possible to remove the unnecessary shadow layers and simplify the DOM?

ZsomborEvo commented 10 months ago

@nuke-ellington do you have any news/reply for our concern?

danielleroux commented 10 months ago

We are using playwright for testing it has no issues with shadow-dom it all. There are also some other tools like Cypress wich can handle shadow-dom (https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__shadow-dom)

If Selenium can handle shadow-dom correct please contact the maintainer of Selenium.

ZsomborEvo commented 10 months ago

Alright, thanks for the feedback!

nuke-ellington commented 10 months ago

@idanko501 @ZsomborEvo - can you please provide a more detailed explanation for what you mean by overcomplicated/overuse of shadow DOM? Maybe an example would help clarify the issue at hand.

Also ich you where able to find a solution for working with Selenium in the meantime, it would be great if you could share that as well.

idanko501 commented 9 months ago

@nuke-ellington - here is an example: a simple list item of a menu is embedded in two shadow roots. Why is it necessary?

294181740-5c061185-b7ee-441c-a948-875379e6ac08

danielleroux commented 8 months ago

The shadowDOM is an essential part of our Web Components architecture. Shadow DOM provides encapsulation for components, isolating their styles and markup within a dedicated DOM subtree. This ensures predictable and maintainable styling, while enabling seamless integration of self-contained and reusable components into various projects without conflicts or interference with existing styles and functionality. Also components have better performance due to the browser's optimized rendering of the encapsulated DOM subtree. This results in faster initial rendering and improved overall responsiveness of the components.

We try to reduce the complexity of the components itself to keep the structure as clean as possible.