|
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> |
| 1 | +<html> |
| 2 | + <title>TestEd Beta 2.0</title> |
102 | 3 | <body> |
103 | | - <div class="container"> |
104 | | - <h1 data-testid="welcome">Welcome to test app!</h1> |
105 | | - <h2>With special space chars</h2> |
106 | | - <p class="subtitle">A comprehensive testing sandbox for learning and practicing web automation</p> |
107 | | - |
108 | | - <div class="notice" qa-id="test"> |
109 | | - <?php if (isset($notice)) echo $notice; ?> |
110 | | - </div> |
111 | 4 |
|
112 | | - <div class="info-section"> |
113 | | - <h3>Welcome to the CodeceptJS Test App!</h3> |
114 | | - <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> |
115 | | - </div> |
| 5 | +<h1 data-testid="welcome">Welcome to test app!</h1> |
| 6 | +<h2>With special space chars</h2> |
| 7 | +<div class="notice" qa-id="test"><?php if (isset($notice)) echo $notice; ?></div> |
116 | 8 |
|
117 | | - <!-- Basic Form Elements --> |
118 | | - <div class="section"> |
119 | | - <h2>Basic Form Elements</h2> |
120 | | - <div class="form-grid"> |
121 | | - <a href="/form/button" class="form-link basic">Button Forms</a> |
122 | | - <a href="/form/checkbox" class="form-link basic">Checkbox</a> |
123 | | - <a href="/form/checkbox_array" class="form-link basic">Checkbox Arrays</a> |
124 | | - <a href="/form/radio" class="form-link basic">Radio Buttons</a> |
125 | | - <a href="/form/select" class="form-link basic">Select Dropdown</a> |
126 | | - <a href="/form/select_multiple" class="form-link basic">Multiple Select</a> |
127 | | - <a href="/form/textarea" class="form-link basic">Text Area</a> |
128 | | - <a href="/form/field" class="form-link basic">Text Fields</a> |
129 | | - <a href="/form/hidden" class="form-link basic">Hidden Fields</a> |
130 | | - <a href="/form/file" class="form-link basic">File Upload</a> |
131 | | - </div> |
132 | | - </div> |
| 9 | +<p> |
| 10 | + <a href="/info" id="link" qa-id="test" qa-link="test">More info</a> |
| 11 | +</p> |
133 | 12 |
|
134 | | - <!-- Example Forms --> |
135 | | - <div class="section"> |
136 | | - <h2>Example Forms & Scenarios</h2> |
137 | | - <div class="form-grid"> |
138 | | - <a href="/form/example1" class="form-link examples">Login Form</a> |
139 | | - <a href="/form/example2" class="form-link examples">Registration</a> |
140 | | - <a href="/form/example3" class="form-link examples">Contact Form</a> |
141 | | - <a href="/form/example4" class="form-link examples">Bootstrap Layout</a> |
142 | | - <a href="/form/example5" class="form-link examples">Complex Form</a> |
143 | | - <a href="/form/example6" class="form-link examples">Multi-step Form</a> |
144 | | - <a href="/form/example7" class="form-link examples">Validation Demo</a> |
145 | | - <a href="/form/example8" class="form-link examples">Dynamic Fields</a> |
146 | | - <a href="/form/example9" class="form-link examples">Table Form</a> |
147 | | - <a href="/form/example10" class="form-link examples">Grid Layout</a> |
148 | | - <a href="/form/example11" class="form-link examples">Relative Paths</a> |
149 | | - <a href="/form/example12" class="form-link examples">Advanced Form</a> |
150 | | - <a href="/form/example13" class="form-link examples">Modal Form</a> |
151 | | - <a href="/form/example14" class="form-link examples">Wizard Form</a> |
152 | | - <a href="/form/example15" class="form-link examples">Product Form</a> |
153 | | - <a href="/form/example16" class="form-link examples">Survey Form</a> |
154 | | - <a href="/form/example17" class="form-link examples">Settings Form</a> |
155 | | - <a href="/form/example20" class="form-link examples">Special Example</a> |
156 | | - </div> |
157 | | - </div> |
158 | 13 |
|
159 | | - <!-- Interactive Elements --> |
160 | | - <div class="section"> |
161 | | - <h2>Interactive Elements & Actions</h2> |
162 | | - <div class="form-grid"> |
163 | | - <a href="/form/hover" class="form-link interactive">Hover Effects</a> |
164 | | - <a href="/form/doubleclick" class="form-link interactive">Double Click</a> |
165 | | - <a href="/form/rightclick" class="form-link interactive">Right Click</a> |
166 | | - <a href="/form/popup" class="form-link interactive">Popup/Modal</a> |
167 | | - <a href="/form/resize" class="form-link interactive">Resize Elements</a> |
168 | | - <a href="/form/scroll" class="form-link interactive">Scroll Actions</a> |
169 | | - <a href="/form/scroll_into_view" class="form-link interactive">Scroll Into View</a> |
170 | | - <a href="/form/focus_blur_elements" class="form-link interactive">Focus & Blur</a> |
171 | | - <a href="/form/page_slider" class="form-link interactive">Page Slider</a> |
172 | | - <a href="/form/contenteditable" class="form-link interactive">Content Editable</a> |
173 | | - <a href="/form/image" class="form-link interactive">Image Interaction</a> |
174 | | - <a href="/form/download" class="form-link interactive">Download File</a> |
175 | | - </div> |
176 | | - </div> |
| 14 | +<div id="area1" qa-id="test"> |
| 15 | + <a href="/form/file" qa-id="test" qa-link="test"> Test Link </a> |
| 16 | +</div> |
| 17 | +<div id="area2" qa-id="test"> |
| 18 | + <a href="/form/hidden" qa-id="test" qa-link="test">Test</a> |
| 19 | +</div> |
| 20 | +<div id="area3" qa-id="test"> |
| 21 | + <a href="info" qa-id="test" qa-link="test">Document-Relative Link</a> |
| 22 | +</div> |
| 23 | +<div id="area4" qa-id="test"> |
| 24 | + <a href="/spinner" qa-id="test" qa-link="test">Spinner</a> |
| 25 | +</div> |
177 | 26 |
|
178 | | - <!-- Wait Conditions --> |
179 | | - <div class="section"> |
180 | | - <h2>Wait Conditions & Timing</h2> |
181 | | - <div class="form-grid"> |
182 | | - <a href="/form/wait_clickable" class="form-link waiting">Wait Clickable</a> |
183 | | - <a href="/form/wait_visible" class="form-link waiting">Wait Visible</a> |
184 | | - <a href="/form/wait_invisible" class="form-link waiting">Wait Invisible</a> |
185 | | - <a href="/form/wait_enabled" class="form-link waiting">Wait Enabled</a> |
186 | | - <a href="/form/wait_disabled" class="form-link waiting">Wait Disabled</a> |
187 | | - <a href="/form/wait_element" class="form-link waiting">Wait Element</a> |
188 | | - <a href="/form/wait_detached" class="form-link waiting">Wait Detached</a> |
189 | | - <a href="/form/wait_value" class="form-link waiting">Wait Value</a> |
190 | | - <a href="/form/wait_js" class="form-link waiting">Wait JavaScript</a> |
191 | | - <a href="/form/wait_for_clickable" class="form-link waiting">Wait For Clickable</a> |
192 | | - <a href="/form/wait_num_elements" class="form-link waiting">Wait Number Elements</a> |
193 | | - </div> |
194 | | - </div> |
| 27 | +<div id="area5" qa-id="test"> |
| 28 | + <input qa-id="test" qa-link="test" disabled>Hidden input</input> |
| 29 | +</div> |
| 30 | +A wise man said: "debug!" |
195 | 31 |
|
196 | | - <!-- Bug Test Cases --> |
197 | | - <div class="section"> |
198 | | - <h2>Bug Test Cases & Edge Cases</h2> |
199 | | - <div class="form-grid"> |
200 | | - <a href="/form/bug1467" class="form-link bugs">Bug #1467</a> |
201 | | - <a href="/form/bug1535" class="form-link bugs">Bug #1535</a> |
202 | | - <a href="/form/bug1585" class="form-link bugs">Bug #1585</a> |
203 | | - <a href="/form/bug1598" class="form-link bugs">Bug #1598</a> |
204 | | - <a href="/form/bug1637" class="form-link bugs">Bug #1637</a> |
205 | | - <a href="/form/empty" class="form-link bugs">Empty Form</a> |
206 | | - <a href="/form/empty_fill" class="form-link bugs">Empty Fill</a> |
207 | | - <a href="/form/unchecked" class="form-link bugs">Unchecked State</a> |
208 | | - </div> |
209 | | - </div> |
| 32 | +<?php print_r($_POST); ?> |
210 | 33 |
|
211 | | - <!-- Advanced & Utility --> |
212 | | - <div class="section"> |
213 | | - <h2>Advanced Features & Utilities</h2> |
214 | | - <div class="form-grid"> |
215 | | - <a href="/form/complex" class="form-link utility">Complex Form</a> |
216 | | - <a href="/form/form_with_buttons" class="form-link utility">Multiple Buttons</a> |
217 | | - <a href="/form/submit_adjacentforms" class="form-link utility">Adjacent Forms</a> |
218 | | - <a href="/form/submitform_multiple" class="form-link utility">Multiple Submits</a> |
219 | | - <a href="/form/submitform_ampersands" class="form-link utility">Special Characters</a> |
220 | | - <a href="/form/names-sq-brackets" class="form-link utility">Square Brackets</a> |
221 | | - <a href="/form/field_values" class="form-link utility">Field Values</a> |
222 | | - <a href="/form/select_onchange" class="form-link utility">Select onChange</a> |
223 | | - <a href="/form/select_two_submits" class="form-link utility">Select Two Submits</a> |
224 | | - <a href="/form/select_additional_spaces" class="form-link utility">Select Spaces</a> |
225 | | - <a href="/form/css_colors" class="form-link utility">CSS Colors</a> |
226 | | - <a href="/form/custom_locator" class="form-link utility">Custom Locators</a> |
227 | | - <a href="/form/aria" class="form-link utility">ARIA Attributes</a> |
228 | | - <a href="/form/fetch_call" class="form-link utility">Fetch API</a> |
229 | | - <a href="/form/relative_siteroot" class="form-link utility">Relative Paths</a> |
230 | | - </div> |
231 | | - </div> |
232 | | - |
233 | | - <!-- General Pages --> |
234 | | - <div class="section"> |
235 | | - <h2>General Test Pages</h2> |
236 | | - <div class="form-grid"> |
237 | | - <a href="/info" class="form-link utility" id="link" qa-id="test" qa-link="test">More info</a> |
238 | | - <a href="/login" class="form-link utility">Login Page</a> |
239 | | - <a href="/cookies" class="form-link utility">Cookies Test</a> |
240 | | - <a href="/search" class="form-link utility">Search Page</a> |
241 | | - <a href="/spinner" class="form-link utility">Loading Spinner</a> |
242 | | - <a href="/iframe" class="form-link utility">iFrame Test</a> |
243 | | - <a href="/external_url" class="form-link utility">External URL</a> |
244 | | - <a href="/image" class="form-link utility">Basic Image</a> |
245 | | - <a href="/invisible_elements" class="form-link utility">Invisible Elements</a> |
246 | | - </div> |
247 | | - </div> |
248 | | - |
249 | | - <!-- Original Test Areas for Backward Compatibility --> |
250 | | - <div style="display: none;"> |
251 | | - <div id="area1" qa-id="test"> |
252 | | - <a href="/form/file" qa-id="test" qa-link="test"> Test Link </a> |
253 | | - </div> |
254 | | - <div id="area2" qa-id="test"> |
255 | | - <a href="/form/hidden" qa-id="test" qa-link="test">Test</a> |
256 | | - </div> |
257 | | - <div id="area3" qa-id="test"> |
258 | | - <a href="info" qa-id="test" qa-link="test">Document-Relative Link</a> |
259 | | - </div> |
260 | | - <div id="area4" qa-id="test"> |
261 | | - <a href="/spinner" qa-id="test" qa-link="test">Spinner</a> |
262 | | - </div> |
263 | | - <div id="area5" qa-id="test"> |
264 | | - <input qa-id="test" qa-link="test" disabled>Hidden input</input> |
265 | | - </div> |
266 | | - </div> |
267 | | - |
268 | | - <div class="footer"> |
269 | | - <p>CodeceptJS Test Application - A comprehensive testing sandbox</p> |
270 | | - <p>Inspired by <a href="https://the-internet.herokuapp.com" target="_blank">the-internet.herokuapp.com</a></p> |
271 | | - </div> |
272 | | - |
273 | | - <div class="debug"> |
274 | | - A wise man said: "debug!" |
275 | | - <br><strong>Debug Info:</strong> |
276 | | - <?php if (!empty($_POST)): ?> |
277 | | - <pre><?php print_r($_POST); ?></pre> |
278 | | - <?php else: ?> |
279 | | - <em>No POST data</em> |
280 | | - <?php endif; ?> |
281 | | - </div> |
282 | | - </div> |
283 | 34 | </body> |
284 | 35 | </html> |
0 commit comments