Shadow Dom Kullanımı

Giriş

Modern web uygulamalarında, bileşen bazlı mimarilerin yaygınlaşmasıyla birlikte Shadow DOM kullanımı artmıştır. Shadow DOM, bir bileşenin iç yapısını dış dünyadan izole ederek daha güvenli, bakımı kolay ve çakışmalara kapalı bir yapı sunar. Ancak bu izolasyon, otomasyon ve test süreçlerinde elementlere erişimi zorlaştıran teknik kısıtlar doğurur. Shadow DOM kullanılan ekranlarda klasik XPath yöntemleri geçerli değildir. Bu nedenle JavaScript tabanlı Shadow Root erişimi tercih edilmelidir.

• Shadow DOM Nedir?

Shadow DOM, bir HTML elementinin altında çalışan ve ana DOM ağacından izole edilmiş bir alt DOM yapısıdır.

• Nested Shadow Dom Nedir?

Nested Shadow DOM, bir Shadow DOM’un içinde başka bir Shadow DOM bulunması durumudur. Yani Shadow DOM’ların birden fazla katman halinde iç içe kullanılmasıdır.

• Open vs Closed Shadow Root

Open shadow root JavaScript ile erişilebilirken, closed shadow root dışarıdan erişime kapalıdır.

• Selector Davranışına Etkisi

Shadow DOM kullanılan yapılarda XPath ve klasik CSS selector’lar doğrudan çalışmaz. Elementlere erişim için shadow-aware selector’lar veya JavaScript tabanlı yöntemler kullanılmalıdır.

• Shadow Root Tespiti

Chrome DevTools üzerinden #shadow-root (open) ifadesi ile tespit edilebilir. Element ağacında aşağıdaki yapı aranır.

<Custom Component>

#shadow-root (open)

• Shadow DOM İçinde Element Seçimi

Selector zinciri host element → shadow root → hedef element şeklinde ilerler.

Örnek:

book-app >>> #input-user

• Nested Shadow DOM Kullanımı

Bazı uygulamalarda shadow root yapıları iç içe olabilir.

• Selector örneği:

book-app >>> book-explore >>> #input-user

Kullanım Şekli (Tüm web aktiviteleri için aynıdır örnek Web Page Click üzerinden gösterilmiştir.)

Özellikler

1.Shadow Dom

2.Nested Shadow Dom

Inputs

• Control Type

  • Veri Tipi: Control Type

  • Açıklama: Tıklama işlemi yapılacak öğeyi tanımlamak için kullanılacak yolun türünü belirtir (ShadowDom ya da NestedShadowDom).

  • Örnek Kullanım:

    • Shadow Dom

    • Nested Shadow Dom

• Control Value

  • Veri Tipi: Text

  • Açıklama: İşlem yapılacak öğeyi tanımlayan yol veya seçici değeri.

  • Örnek Kullanım:

    • Shadow Dom: book-app >>> #input-user

    • Nested Shadow Dom: book-app >>> book-explore >>> #input-user

• Event Type

  • Veri Tipi: Text

  • Açıklama: Tıklama işleminin türünü belirler. JavaScript tabanlı bir tetikleme seçilir.

  • Örnek Kullanım:

    • JavaScript: JavaScript kullanılarak tıklama işlemi gerçekleştirilir.

• Timeout

  • Veri Tipi: Number

  • Açıklama: İşlem sırasında tarayıcı üzerinden yanıt alınamazsa kaç saniye boyunca beklenmesi gerektiğini belirtir.

  • Örnek Kullanım:

    • 5: 5 saniye beklenir.

    • 10: 10 saniye beklenir.

Outputs : Aktivite herhangi bir çıktı sunmamaktadır.