umar-sofyrus.github.io/shadow_dom_test.html at main · umar-sofyrus/umar-sofyrus.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow DOM Testing Playground</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .container { margin-bottom: 30px; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
        .shadow-host { border: 2px solid #333; padding: 10px; margin-top: 10px; }
        .shadow-host h3 { color: navy; }
        .nested-host { border: 2px dashed orange; padding: 8px; margin-top: 10px; }
    </style>
</head>
<body>

    <h1>Automation Testing Scenarios for Shadow DOM</h1>
    <p>Use this page to test various selector strategies (CSS, XPath) and interaction commands (click, type, switch context).</p>

    <div class="container">
        <h2>1. Basic Open Shadow DOM</h2>
        <div id="basic-host" class="shadow-host">
            <h3>Host Element: Basic Open</h3>
            <template shadowrootmode="open">
                <style>
                    .shadow-content { background-color: #e0f7fa; padding: 10px; border: 1px solid teal; }
                    button { background-color: teal; color: white; padding: 8px; border: none; cursor: pointer; }
                </style>
                <div class="shadow-content">
                    <p>This is content inside the **Open Shadow Root**.</p>
                    <button id="simple-button" onclick="alert('Basic Button Clicked!')">Click Me (Button)</button>
                    <input type="text" id="simple-input" placeholder="Type here (Input)">
                </div>
            </template>
        </div>
    </div>

    <div class="container">
        <h2>2. Basic Closed Shadow DOM (Hard to Access)</h2>
        <p>This element's content should **not** be accessible directly via standard JavaScript or CSS selectors from the main document.</p>
        <div id="closed-host" class="shadow-host">
            <h3>Host Element: Basic Closed</h3>
            <template shadowrootmode="closed">
                <style>
                    .shadow-content { background-color: #ffebee; padding: 10px; border: 1px solid maroon; }
                </style>
                <div class="shadow-content">
                    <p>This is content inside the **Closed Shadow Root**.</p>
                    <button id="closed-button" onclick="alert('Closed Button Clicked!')">Hidden Button</button>
                    <input type="checkbox" id="closed-checkbox"> Hidden Checkbox
                </div>
            </template>
        </div>
    </div>

    <div class="container">
        <h2>3. Nested Shadow DOM</h2>
        <p>Tests the ability to pierce multiple layers of shadow roots.</p>
        <div id="outer-host" class="shadow-host">
            <h3>Host Element: Outer Shadow Root</h3>
            <template shadowrootmode="open">
                <style>
                    .outer-content { background-color: #fff3e0; padding: 10px; border: 1px solid orange; }
                </style>
                <div class="outer-content">
                    <p>Outer Shadow Content.</p>
                    <input type="text" id="outer-input" placeholder="Outer Input">

                    <div id="inner-host" class="nested-host">
                        <h4>Host Element: Inner Shadow Root</h4>
                        <template shadowrootmode="open">
                            <style>
                                .inner-content { background-color: #fce4ec; padding: 10px; border: 1px solid pink; }
                            </style>
                            <div class="inner-content">
                                <p>Inner Shadow Content.</p>
                                <button id="nested-button" onclick="alert('Nested Button Clicked!')">Deep Click Target</button>
                            </div>
                        </template>
                    </div>

                </div>
            </template>
        </div>
    </div>

    <div class="container">
        <h2>4. Shadow DOM with iFrame</h2>
        <p>Tests switching contexts from Shadow DOM to iFrame, and back.</p>
        <div id="iframe-host" class="shadow-host">
            <h3>Host Element: iFrame Container</h3>
            <template shadowrootmode="open">
                <style>
                    .iframe-content { background-color: #e8eaf6; padding: 10px; border: 1px solid indigo; }
                </style>
                <div class="iframe-content">
                    <p>Content before the iFrame.</p>
                    <button id="before-iframe-button" onclick="alert('Pre-IFrame Button Clicked!')">Pre-IFrame Button</button>

                    <iframe id="test-iframe" style="width: 100%; height: 150px; border: 1px solid blue;" srcdoc="
                        <!DOCTYPE html>
                        <html>
                        <head>
                            <style>body { font-family: sans-serif; background-color: #f0f4c3; padding: 10px; }</style>
                        </head>
                        <body>
                            <h4>iFrame Content</h4>
                            <p>This is inside the **iFrame**.</p>
                            <input type='text' id='iframe-input' placeholder='iFrame Input'>
                            <button id='iframe-button' onclick='alert(\'IFrame Button Clicked!\')'>iFrame Button</button>
                        </body>
                        </html>
                    "></iframe>

                    <button id="after-iframe-button" onclick="alert('Post-IFrame Button Clicked!')">Post-IFrame Button</button>
                </div>
            </template>
        </div>
    </div>

    <div class="container">
        <h2>5. Shadow DOM with No Stable IDs (CSS/XPath Test)</h2>
        <p>This case requires finding the element using tag names, class names, or text, as neither the host nor the target element has an 'id'.</p>

        <div class="shadow-host no-id-host">
            <h3>Host Element: No IDs</h3>
            <template shadowrootmode="open">
                <style>
                    .shadow-content { background-color: #f3e5f5; padding: 10px; border: 1px solid purple; }
                    .target-button { background-color: purple; color: white; padding: 8px; border: none; cursor: pointer; }
                </style>
                <div class="shadow-content">
                    <p>Content is inside the Shadow Root.</p>

                    <button class="target-button" onclick="alert('No-ID Button Clicked!')">Unique Button Text</button>

                    <input type="text" placeholder="Input without ID">
                </div>
            </template>
        </div>
    </div>

</body>
</html>