Skip to content

Commit 75a5339

Browse files
MrPunyapalMrPunyapal
committed
feat: add comprehensive element tests for visibility, interaction, and state checking methods
1 parent 46c7fb4 commit 75a5339

2 files changed

Lines changed: 782 additions & 0 deletions

File tree

‎playground/resources/views/test-pages/element-tests.blade.php‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Element Tests - Playground</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
max-width: 800px;
11+
margin: 0 auto;
12+
padding: 20px;
13+
line-height: 1.6;
14+
}
15+
16+
.section {
17+
margin: 20px 0;
18+
padding: 15px;
19+
border: 1px solid #ddd;
20+
border-radius: 5px;
21+
}
22+
23+
.hidden {
24+
display: none;
25+
}
26+
27+
.visible {
28+
display: block;
29+
}
30+
31+
input, textarea, select, button {
32+
margin: 5px;
33+
padding: 8px;
34+
}
35+
36+
.form-group {
37+
margin: 10px 0;
38+
}
39+
40+
label {
41+
display: block;
42+
margin-bottom: 5px;
43+
font-weight: bold;
44+
}
45+
46+
.user-profile {
47+
background: #f5f5f5;
48+
padding: 15px;
49+
border-radius: 8px;
50+
}
51+
52+
.profile-picture {
53+
width: 100px;
54+
height: 100px;
55+
border-radius: 50%;
56+
object-fit: cover;
57+
}
58+
59+
.counter-item, .text-item, .inner-text-item, .nth-item, .first-item, .last-item {
60+
padding: 10px;
61+
margin: 5px 0;
62+
background: #e9ecef;
63+
border-radius: 3px;
64+
}
65+
</style>
66+
</head>
67+
<body>
68+
<h1>Element Tests Playground</h1>
69+
70+
<!-- Basic Visibility Section -->
71+
<div class="section" data-testid="profile-section">
72+
<h2>Profile Section</h2>
73+
<p>This section has a data-testid attribute and is visible by default.</p>
74+
<button type="button">Submit</button>
75+
</div>
76+
77+
<!-- Hidden Element -->
78+
<div data-testid="hidden-element" class="hidden">
79+
This element is hidden by default
80+
</div>
81+
82+
<!-- Form Elements Section -->
83+
<div class="section">
84+
<h2>Form Elements</h2>
85+
86+
<div class="form-group">
87+
<label for="username">Username</label>
88+
<input type="text" id="username" name="username" value="johndoe" />
89+
</div>
90+
91+
<div class="form-group">
92+
<label for="password">Password</label>
93+
<input type="password" id="password" name="password" value="" />
94+
</div>
95+
96+
<div class="form-group">
97+
<label for="search">Search</label>
98+
<input type="text" id="search" name="search" placeholder="Search..." />
99+
</div>
100+
101+
<div class="form-group">
102+
<label for="comments">Comments</label>
103+
<textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
104+
</div>
105+
106+
<div class="form-group">
107+
<label>
108+
<input type="checkbox" name="remember" /> Remember Me
109+
</label>
110+
</div>
111+
112+
<div class="form-group">
113+
<input type="checkbox" id="disabled-checkbox" disabled /> Disabled Checkbox
114+
</div>
115+
116+
<div class="form-group">
117+
<input type="text" data-testid="disabled-input" disabled placeholder="Disabled input" />
118+
</div>
119+
120+
<div class="form-group">
121+
<input type="text" data-testid="readonly-input" readonly value="Readonly input" />
122+
</div>
123+
124+
<div class="form-group">
125+
<label for="file-upload">File Upload</label>
126+
<input type="file" id="file-upload" data-testid="file-input" />
127+
</div>
128+
129+
<div class="form-group">
130+
<label for="select-option">Select Option</label>
131+
<select id="select-option" data-testid="test-select">
132+
<option value="option1">Option 1</option>
133+
<option value="option2">Option 2</option>
134+
<option value="option3">Option 3</option>
135+
</select>
136+
</div>
137+
138+
<div class="form-group">
139+
<button type="button" role="button">Save</button>
140+
<button type="button" role="button">Cancel</button>
141+
</div>
142+
</div>
143+
144+
<!-- User Profile Section -->
145+
<div class="section user-profile" data-testid="user-profile">
146+
<h2>User Profile</h2>
147+
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iIzY2NzMiLz4KICA8dGV4dCB4PSI1MCIgeT0iNTUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlVzZXI8L3RleHQ+Cjwvc3ZnPgo="
148+
alt="Profile Picture"
149+
class="profile-picture" />
150+
151+
<h3 title="User's Name">Jane Doe</h3>
152+
<p data-testid="user-email">jane.doe@example.com</p>
153+
<p>This is a simple paragraph with some text content.</p>
154+
155+
<button type="button" role="button">Edit Profile</button>
156+
</div>
157+
158+
<!-- Text Content Section -->
159+
<div class="section">
160+
<h2>Text Content Examples</h2>
161+
<p>This is a simple paragraph</p>
162+
<div>This is a div with text content</div>
163+
<span>This is a span element</span>
164+
</div>
165+
166+
<!-- Multiple Items for Collection Testing -->
167+
<div class="section" data-testid="counter-container">
168+
<h2>Collection Items</h2>
169+
<div class="counter-item">Item 1</div>
170+
<div class="counter-item">Item 2</div>
171+
<div class="counter-item">Item 3</div>
172+
</div>
173+
174+
<!-- Multiple Items with Different Test IDs -->
175+
<div class="section">
176+
<h2>Nth Items</h2>
177+
<div data-testid="nth-item" class="nth-item">Item 1</div>
178+
<div data-testid="nth-item" class="nth-item">Item 2</div>
179+
<div data-testid="nth-item" class="nth-item">Item 3</div>
180+
</div>
181+
182+
<!-- First/Last Items -->
183+
<div class="section">
184+
<h2>First/Last Items</h2>
185+
<div data-testid="first-item" class="first-item">Item 1</div>
186+
<div data-testid="first-item" class="first-item">Item 2</div>
187+
<div data-testid="first-item" class="first-item">Item 3</div>
188+
189+
<div data-testid="last-item" class="last-item">Item 1</div>
190+
<div data-testid="last-item" class="last-item">Item 2</div>
191+
<div data-testid="last-item" class="last-item">Item 3</div>
192+
</div>
193+
194+
<!-- Text Content Items -->
195+
<div class="section">
196+
<h2>Text Content Items</h2>
197+
<div data-testid="text-item" class="text-item">Text 1</div>
198+
<div data-testid="text-item" class="text-item">Text 2</div>
199+
<div data-testid="text-item" class="text-item">Text 3</div>
200+
201+
<div data-testid="inner-text-item" class="inner-text-item">Inner 1</div>
202+
<div data-testid="inner-text-item" class="inner-text-item">Inner 2</div>
203+
<div data-testid="inner-text-item" class="inner-text-item">Inner 3</div>
204+
</div>
205+
206+
<!-- Iframe for Frame Testing -->
207+
<div class="section">
208+
<h2>Frame Testing</h2>
209+
<iframe src="about:blank" data-testid="test-iframe" width="300" height="200"></iframe>
210+
</div>
211+
212+
<!-- Nested Elements for querySelector Testing -->
213+
<div class="section" data-testid="nested-container">
214+
<h2>Nested Elements</h2>
215+
<div class="parent">
216+
<p class="child">Child paragraph 1</p>
217+
<p class="child">Child paragraph 2</p>
218+
<span class="child">Child span</span>
219+
<button class="child-button">Nested Button</button>
220+
</div>
221+
</div>
222+
223+
<!-- Elements with Titles -->
224+
<div class="section">
225+
<h2>Elements with Titles</h2>
226+
<div title="Tooltip text">Element with tooltip</div>
227+
<button title="Button tooltip">Button with title</button>
228+
</div>
229+
230+
<!-- Elements for Event Testing -->
231+
<div class="section">
232+
<h2>Event Testing</h2>
233+
<button id="event-button" data-testid="event-button">Click Me</button>
234+
<div id="event-result" data-testid="event-result"></div>
235+
</div>
236+
237+
<!-- Large content for scrolling tests -->
238+
<div class="section" style="height: 1000px;">
239+
<h2>Scroll Testing</h2>
240+
<div data-testid="scroll-target" style="margin-top: 500px;">
241+
This element is far down the page for scroll testing
242+
</div>
243+
</div>
244+
245+
<script>
246+
// Add some basic interactivity for testing
247+
document.addEventListener('DOMContentLoaded', function() {
248+
// Event button click handler
249+
const eventButton = document.getElementById('event-button');
250+
const eventResult = document.getElementById('event-result');
251+
252+
if (eventButton && eventResult) {
253+
eventButton.addEventListener('click', function() {
254+
eventResult.textContent = 'Button was clicked!';
255+
});
256+
}
257+
258+
// Make forms more interactive
259+
const usernameInput = document.getElementById('username');
260+
if (usernameInput) {
261+
usernameInput.addEventListener('input', function() {
262+
console.log('Username changed to:', this.value);
263+
});
264+
}
265+
});
266+
</script>
267+
</body>
268+
</html>

0 commit comments

Comments
 (0)