Skip to content

Commit 638f93a

Browse files
Copilotkobenguyent
Copilot
and
kobenguyent
committed
Enhance test app index page with comprehensive form navigation
Co-authored-by: kobenguyent <[email protected]>
1 parent f7c38df commit 638f93a

File tree

1 file changed

+251
-25
lines changed

1 file changed

+251
-25
lines changed

‎test/data/app/view/index.php‎

Lines changed: 251 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,263 @@
1-
<html>
2-
<title>TestEd Beta 2.0</title>
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>CodeceptJS Test Application</title>
7+
<style>
8+
body {
9+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10+
line-height: 1.6;
11+
margin: 0;
12+
padding: 20px;
13+
background-color: #f5f5f5;
14+
color: #333;
15+
}
16+
.container {
17+
max-width: 1200px;
18+
margin: 0 auto;
19+
background: white;
20+
padding: 30px;
21+
border-radius: 10px;
22+
box-shadow: 0 0 20px rgba(0,0,0,0.1);
23+
}
24+
h1 {
25+
color: #2c3e50;
26+
text-align: center;
27+
margin-bottom: 10px;
28+
font-size: 2.5em;
29+
}
30+
.subtitle {
31+
text-align: center;
32+
color: #7f8c8d;
33+
margin-bottom: 30px;
34+
font-size: 1.2em;
35+
}
36+
.notice {
37+
background: #d4edda;
38+
border: 1px solid #c3e6cb;
39+
color: #155724;
40+
padding: 10px;
41+
border-radius: 5px;
42+
margin-bottom: 20px;
43+
}
44+
.section {
45+
margin-bottom: 40px;
46+
}
47+
.section h2 {
48+
color: #34495e;
49+
border-bottom: 3px solid #3498db;
50+
padding-bottom: 10px;
51+
margin-bottom: 20px;
52+
}
53+
.form-grid {
54+
display: grid;
55+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
56+
gap: 15px;
57+
margin-bottom: 30px;
58+
}
59+
.form-link {
60+
display: block;
61+
padding: 15px 20px;
62+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
63+
color: white;
64+
text-decoration: none;
65+
border-radius: 8px;
66+
transition: all 0.3s ease;
67+
text-align: center;
68+
font-weight: 500;
69+
}
70+
.form-link:hover {
71+
transform: translateY(-2px);
72+
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
73+
}
74+
.basic { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
75+
.examples { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
76+
.interactive { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
77+
.waiting { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
78+
.bugs { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
79+
.utility { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
80+
.info-section {
81+
background: #e8f4fd;
82+
padding: 20px;
83+
border-radius: 8px;
84+
margin-bottom: 30px;
85+
}
86+
.footer {
87+
text-align: center;
88+
margin-top: 40px;
89+
padding-top: 20px;
90+
border-top: 1px solid #eee;
91+
color: #7f8c8d;
92+
}
93+
.debug {
94+
margin-top: 20px;
95+
padding: 10px;
96+
background: #f8f9fa;
97+
border-radius: 5px;
98+
font-family: monospace;
99+
}
100+
</style>
101+
</head>
3102
<body>
103+
<div class="container">
104+
<h1 data-testid="welcome">CodeceptJS Test Application</h1>
105+
<p class="subtitle">A comprehensive testing sandbox for learning and practicing web automation</p>
106+
107+
<div class="notice" qa-id="test">
108+
<?php if (isset($notice)) echo $notice; ?>
109+
</div>
4110

5-
<h1 data-testid="welcome">Welcome to test app!</h1>
6-
<h2>With&nbsp;special&nbsp;space chars</h1>
111+
<div class="info-section">
112+
<h3>Welcome to the CodeceptJS Test App!</h3>
113+
<p>This application provides a variety of test forms and interactive elements to help you learn and practice CodeceptJS automation. Similar to <a href="https://the-internet.herokuapp.com" target="_blank">the-internet.herokuapp.com</a>, this sandbox offers different scenarios to test your automation skills.</p>
114+
</div>
7115

8-
<div class="notice" qa-id = "test"><?php if (isset($notice)) echo $notice; ?></div>
116+
<!-- Basic Form Elements -->
117+
<div class="section">
118+
<h2>Basic Form Elements</h2>
119+
<div class="form-grid">
120+
<a href="/form/button" class="form-link basic">Button Forms</a>
121+
<a href="/form/checkbox" class="form-link basic">Checkbox</a>
122+
<a href="/form/checkbox_array" class="form-link basic">Checkbox Arrays</a>
123+
<a href="/form/radio" class="form-link basic">Radio Buttons</a>
124+
<a href="/form/select" class="form-link basic">Select Dropdown</a>
125+
<a href="/form/select_multiple" class="form-link basic">Multiple Select</a>
126+
<a href="/form/textarea" class="form-link basic">Text Area</a>
127+
<a href="/form/field" class="form-link basic">Text Fields</a>
128+
<a href="/form/hidden" class="form-link basic">Hidden Fields</a>
129+
<a href="/form/file" class="form-link basic">File Upload</a>
130+
</div>
131+
</div>
9132

10-
<p>
11-
<a href="/info" id="link" qa-id = "test" qa-link = "test">More info</a>
12-
</p>
133+
<!-- Example Forms -->
134+
<div class="section">
135+
<h2>Example Forms & Scenarios</h2>
136+
<div class="form-grid">
137+
<a href="/form/example1" class="form-link examples">Login Form</a>
138+
<a href="/form/example2" class="form-link examples">Registration</a>
139+
<a href="/form/example3" class="form-link examples">Contact Form</a>
140+
<a href="/form/example4" class="form-link examples">Bootstrap Layout</a>
141+
<a href="/form/example5" class="form-link examples">Complex Form</a>
142+
<a href="/form/example6" class="form-link examples">Multi-step Form</a>
143+
<a href="/form/example7" class="form-link examples">Validation Demo</a>
144+
<a href="/form/example8" class="form-link examples">Dynamic Fields</a>
145+
<a href="/form/example9" class="form-link examples">Table Form</a>
146+
<a href="/form/example10" class="form-link examples">Grid Layout</a>
147+
<a href="/form/example11" class="form-link examples">Relative Paths</a>
148+
<a href="/form/example12" class="form-link examples">Advanced Form</a>
149+
<a href="/form/example13" class="form-link examples">Modal Form</a>
150+
<a href="/form/example14" class="form-link examples">Wizard Form</a>
151+
<a href="/form/example15" class="form-link examples">Product Form</a>
152+
<a href="/form/example16" class="form-link examples">Survey Form</a>
153+
<a href="/form/example17" class="form-link examples">Settings Form</a>
154+
<a href="/form/example20" class="form-link examples">Special Example</a>
155+
</div>
156+
</div>
13157

158+
<!-- Interactive Elements -->
159+
<div class="section">
160+
<h2>Interactive Elements & Actions</h2>
161+
<div class="form-grid">
162+
<a href="/form/hover" class="form-link interactive">Hover Effects</a>
163+
<a href="/form/doubleclick" class="form-link interactive">Double Click</a>
164+
<a href="/form/rightclick" class="form-link interactive">Right Click</a>
165+
<a href="/form/popup" class="form-link interactive">Popup/Modal</a>
166+
<a href="/form/resize" class="form-link interactive">Resize Elements</a>
167+
<a href="/form/scroll" class="form-link interactive">Scroll Actions</a>
168+
<a href="/form/scroll_into_view" class="form-link interactive">Scroll Into View</a>
169+
<a href="/form/focus_blur_elements" class="form-link interactive">Focus & Blur</a>
170+
<a href="/form/page_slider" class="form-link interactive">Page Slider</a>
171+
<a href="/form/contenteditable" class="form-link interactive">Content Editable</a>
172+
<a href="/form/image" class="form-link interactive">Image Interaction</a>
173+
<a href="/form/download" class="form-link interactive">Download File</a>
174+
</div>
175+
</div>
14176

15-
<div id="area1" qa-id = "test" qa-id = "test">
16-
<a href="/form/file" qa-id = "test" qa-link = "test"> Test Link </a>
17-
</div>
18-
<div id="area2" qa-id = "test">
19-
<a href="/form/hidden" qa-id = "test" qa-link = "test">Test</a>
20-
</div>
21-
<div id="area3" qa-id = "test">
22-
<a href="info" qa-id = "test" qa-link = "test">Document-Relative Link</a>
23-
</div>
24-
<div id="area4" qa-id = "test">
25-
<a href="/spinner" qa-id = "test" qa-link = "test">Spinner</a>
26-
</div>
177+
<!-- Wait Conditions -->
178+
<div class="section">
179+
<h2>Wait Conditions & Timing</h2>
180+
<div class="form-grid">
181+
<a href="/form/wait_clickable" class="form-link waiting">Wait Clickable</a>
182+
<a href="/form/wait_visible" class="form-link waiting">Wait Visible</a>
183+
<a href="/form/wait_invisible" class="form-link waiting">Wait Invisible</a>
184+
<a href="/form/wait_enabled" class="form-link waiting">Wait Enabled</a>
185+
<a href="/form/wait_disabled" class="form-link waiting">Wait Disabled</a>
186+
<a href="/form/wait_element" class="form-link waiting">Wait Element</a>
187+
<a href="/form/wait_detached" class="form-link waiting">Wait Detached</a>
188+
<a href="/form/wait_value" class="form-link waiting">Wait Value</a>
189+
<a href="/form/wait_js" class="form-link waiting">Wait JavaScript</a>
190+
<a href="/form/wait_for_clickable" class="form-link waiting">Wait For Clickable</a>
191+
<a href="/form/wait_num_elements" class="form-link waiting">Wait Number Elements</a>
192+
</div>
193+
</div>
27194

28-
<div id="area5" qa-id = "test">
29-
<input qa-id = "test" qa-link = "test" disabled>Hidden input</a>
30-
</div>
195+
<!-- Bug Test Cases -->
196+
<div class="section">
197+
<h2>Bug Test Cases & Edge Cases</h2>
198+
<div class="form-grid">
199+
<a href="/form/bug1467" class="form-link bugs">Bug #1467</a>
200+
<a href="/form/bug1535" class="form-link bugs">Bug #1535</a>
201+
<a href="/form/bug1585" class="form-link bugs">Bug #1585</a>
202+
<a href="/form/bug1598" class="form-link bugs">Bug #1598</a>
203+
<a href="/form/bug1637" class="form-link bugs">Bug #1637</a>
204+
<a href="/form/empty" class="form-link bugs">Empty Form</a>
205+
<a href="/form/empty_fill" class="form-link bugs">Empty Fill</a>
206+
<a href="/form/unchecked" class="form-link bugs">Unchecked State</a>
207+
</div>
208+
</div>
31209

32-
A wise man said: "debug!"
210+
<!-- Advanced & Utility -->
211+
<div class="section">
212+
<h2>Advanced Features & Utilities</h2>
213+
<div class="form-grid">
214+
<a href="/form/complex" class="form-link utility">Complex Form</a>
215+
<a href="/form/form_with_buttons" class="form-link utility">Multiple Buttons</a>
216+
<a href="/form/submit_adjacentforms" class="form-link utility">Adjacent Forms</a>
217+
<a href="/form/submitform_multiple" class="form-link utility">Multiple Submits</a>
218+
<a href="/form/submitform_ampersands" class="form-link utility">Special Characters</a>
219+
<a href="/form/names-sq-brackets" class="form-link utility">Square Brackets</a>
220+
<a href="/form/field_values" class="form-link utility">Field Values</a>
221+
<a href="/form/select_onchange" class="form-link utility">Select onChange</a>
222+
<a href="/form/select_two_submits" class="form-link utility">Select Two Submits</a>
223+
<a href="/form/select_additional_spaces" class="form-link utility">Select Spaces</a>
224+
<a href="/form/css_colors" class="form-link utility">CSS Colors</a>
225+
<a href="/form/custom_locator" class="form-link utility">Custom Locators</a>
226+
<a href="/form/aria" class="form-link utility">ARIA Attributes</a>
227+
<a href="/form/fetch_call" class="form-link utility">Fetch API</a>
228+
<a href="/form/relative_siteroot" class="form-link utility">Relative Paths</a>
229+
</div>
230+
</div>
33231

34-
<?php print_r($_POST); ?>
232+
<!-- General Pages -->
233+
<div class="section">
234+
<h2>General Test Pages</h2>
235+
<div class="form-grid">
236+
<a href="/info" class="form-link utility" id="link" qa-id="test" qa-link="test">Information Page</a>
237+
<a href="/login" class="form-link utility">Login Page</a>
238+
<a href="/cookies" class="form-link utility">Cookies Test</a>
239+
<a href="/search" class="form-link utility">Search Page</a>
240+
<a href="/spinner" class="form-link utility">Loading Spinner</a>
241+
<a href="/iframe" class="form-link utility">iFrame Test</a>
242+
<a href="/external_url" class="form-link utility">External URL</a>
243+
<a href="/image" class="form-link utility">Basic Image</a>
244+
<a href="/invisible_elements" class="form-link utility">Invisible Elements</a>
245+
</div>
246+
</div>
35247

248+
<div class="footer">
249+
<p>CodeceptJS Test Application - A comprehensive testing sandbox</p>
250+
<p>Inspired by <a href="https://the-internet.herokuapp.com" target="_blank">the-internet.herokuapp.com</a></p>
251+
</div>
252+
253+
<div class="debug">
254+
<strong>Debug Info:</strong>
255+
<?php if (!empty($_POST)): ?>
256+
<pre><?php print_r($_POST); ?></pre>
257+
<?php else: ?>
258+
<em>No POST data</em>
259+
<?php endif; ?>
260+
</div>
261+
</div>
36262
</body>
37263
</html>

0 commit comments

Comments
 (0)