Shadow DOM, z testerskiego punktu widzenia, to taka złośliwość podobna trochę do ramek. Podobieństwo polega na tym, że przed zaznaczeniem elementu z wnętrza shadow DOM, należy najpierw uzyskać do niego dostęp.
Tylko czym w ogóle ten mechanizm jest i jak sobie z nim poradzić w Selenium?
Shadow DOM
Shadow DOM (czyli Shadow Document Object Model) to mechanizm, który pozwala na “przyczepianie” ukrytego drzewa DOM do elementów znajdujących się w regularnym drzewie DOM. Takie ukryte drzewo DOM zaczyna się od shadow roota, pod którym możemy umieścić dowolne elementy, podobnie jak w zwykłym drzewie DOM. Może to wyglądać na przykład tak:
Element, który w powyższym przykładzie ma id “host” to shadow host. Jest to element do którego przypięty jest shadow DOM.
OK, wszystko fajnie, ale na co komu takie dziwolągi? Już tłumaczę!
Ten mechanizm pozwala na tworzenie izolowanych drzew DOM w obrębie jednego dokumentu bez wpływu na style i zachowanie innych elementów dokumentu. Dzięki temu każdy element może mieć swoje własne style, zachowanie i strukturę, niezależnie od innych elementów na stronie. A na dodatek strona będzie łatwiejsza w utrzymaniu.
Jak to ogarnąć w Selenium?
W Chrome i Edge bardzo łatwo. Trzeba posłużyć się metodą getShadowRoot by wejść do roota i móc potem wewnątrz niego szukać elementów i robić z nimi co tam potrzebujemy.
Sytuacja trochę się komplikuje w Firefox i Safari. Tam getShadowRoot nie zadziała. W takim wypadku trzeba się oprzeć na JavaScriptExecutor i po prostu wykonać odpowiedni JavaScript.
Co nam to daje?
Taki wyizolowany DOM może ułatwić testowanie konkretnych elementów niezależnie od reszty strony. Umożliwia między innymi tworzenie testów jednostkowych, które są szybsze niż testy integracyjne. Nie jest to testerski game changer, ale ma swój plus.
Jednak z perspektywy programistycznej ma on sporo więcej zalet:
- Po pierwsze, pozwala na wspomnianą już izolację drzew DOM, dzięki czemu można tworzyć elementy HTML z własnym stylem oraz używać ich wielokrotnie w różnych miejscach na stronie.
- Po drugie, implementacja tego mechanizmu jest stosunkowo prosta i wymaga tylko niewielkiej ilości kodu.
- Po trzecie, pozwala on na większą kontrolę nad elementami na stronie i umożliwia manipulowanie nimi w bardziej zaawansowany sposób niż tradycyjny DOM.
Podsumowując, warto się z Shadow DOM zaprzyjaźnić. 😎
Jakie są Wasze doświadczenia z tym mechanizmem? A może to inny testerski temat spędza Wam sen z powiek? Zawsze możecie napisać o tym tutaj. Zobaczę, co można z tym zrobić. 😈