-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
337 lines (328 loc) · 15.2 KB
/
index.html
File metadata and controls
337 lines (328 loc) · 15.2 KB
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM-Powered Test Case Generation Framework</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<i class="fas fa-robot"></i>
<span>LLM-Powered Test Case Generation</span>
</div>
<ul class="nav-menu">
<li><a href="#objective" class="nav-link">Overview</a></li>
<li><a href="#problem" class="nav-link">Problem</a></li>
<li><a href="#solution" class="nav-link">Solution</a></li>
<li><a href="#metrics" class="nav-link">Metrics</a></li>
<li><a href="#scope" class="nav-link">Scope</a></li>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="objective" class="hero">
<div class="container">
<div class="hero-content">
<h1 class="hero-title">
<span class="gradient-text">LLM-Powered</span> Test Case Generation Framework
</h1>
<p class="hero-subtitle">
This proposal introduces an intelligent, end-to-end automation framework that leverages Large Language Models (LLMs) to generate test scenarios and test cases from a web page URL, requirement document, or screenshot. It aims to reduce manual QA effort, improve coverage, and accelerate testing cycles across CCS cyber products.
</p>
<div class="hero-buttons">
<button class="btn btn-primary" onclick="scrollToSection('solution')">
<i class="fas fa-play"></i> See Solution
</button>
<button class="btn btn-secondary" onclick="scrollToSection('scope')">
<i class="fas fa-info-circle"></i> View Scope
</button>
</div>
</div>
<div class="hero-visual">
<div class="floating-card">
<i class="fas fa-globe"></i>
<span>Web URL</span>
</div>
<div class="floating-card">
<i class="fas fa-brain"></i>
<span>AI Analysis</span>
</div>
<div class="floating-card">
<i class="fas fa-file-code"></i>
<span>Test Cases</span>
</div>
</div>
</div>
</section>
<!-- Problem Section -->
<section id="problem" class="problem-section">
<div class="container">
<h2 class="section-title">Problem Statement</h2>
<div class="problems-grid">
<div class="problem-card" data-aos="fade-up" data-aos-delay="100">
<div class="problem-icon">
<i class="fas fa-clock"></i>
</div>
<h3>Time-Consuming & Error-Prone</h3>
<p>Manual test case creation is time-consuming and error-prone</p>
</div>
<div class="problem-card" data-aos="fade-up" data-aos-delay="200">
<div class="problem-icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<h3>Coverage Gaps</h3>
<p>Coverage gaps due to missed edge cases</p>
</div>
<div class="problem-card" data-aos="fade-up" data-aos-delay="300">
<div class="problem-icon">
<i class="fas fa-tools"></i>
</div>
<h3>High Maintenance Overhead</h3>
<p>High maintenance overhead as applications evolve</p>
</div>
<div class="problem-card" data-aos="fade-up" data-aos-delay="400">
<div class="problem-icon">
<i class="fas fa-user-graduate"></i>
</div>
<h3>Domain Knowledge Barriers</h3>
<p>Domain knowledge barriers for new testers</p>
</div>
<div class="problem-card" data-aos="fade-up" data-aos-delay="500">
<div class="problem-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3>Poor Scalability</h3>
<p>Poor scalability for large or frequently updated apps</p>
</div>
</div>
</div>
</section>
<!-- Solution Section -->
<section id="solution" class="solution-section">
<div class="container">
<h2 class="section-title">Solution: "URL to Test Case" Agent</h2>
<div class="solution-content">
<div class="solution-features">
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-spider"></i>
</div>
<div class="feature-content">
<h3>Smart Content Analysis</h3>
<p>Scrapes and analyzes web content including HTML, JavaScript, CSS, and APIs</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-brain"></i>
</div>
<div class="feature-content">
<h3>LLM-Powered Intelligence</h3>
<p>Uses Large Language Models to infer page purpose and user workflows</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-list-check"></i>
</div>
<div class="feature-content">
<h3>Comprehensive Test Generation</h3>
<p>Generates high-level scenarios, detailed test cases, and expected outcomes</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-code"></i>
</div>
<div class="feature-content">
<h3>Multiple Output Formats</h3>
<p>Structured outputs in Gherkin, JSON, and Markdown formats</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-plug"></i>
</div>
<div class="feature-content">
<h3>Tool Integration</h3>
<p>Seamlessly integrates with Jira, TestRail, Selenium, and Playwright</p>
</div>
</div>
</div>
</div>
<!-- Example Section -->
<div class="example-section">
<h3 class="example-title">Example Use Case: Login Page</h3>
<div class="example-content">
<div class="example-input">
<h4><i class="fas fa-input-pipe"></i> Input</h4>
<div class="code-block">
<code>URL: https://example.com/login</code>
</div>
</div>
<div class="example-arrow">
<i class="fas fa-arrow-right"></i>
</div>
<div class="example-output">
<h4><i class="fas fa-output"></i> Generated Output</h4>
<ul class="test-cases">
<li><i class="fas fa-check-circle"></i> Scenarios: Successful login, invalid credentials, empty fields, forgot password</li>
<li><i class="fas fa-list-check"></i> Test Cases: Include steps, expected results, and preconditions</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Success Metrics Section -->
<section id="metrics" class="metrics-section">
<div class="container">
<h2 class="section-title">Success Metrics</h2>
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-icon">
<i class="fas fa-tachometer-alt"></i>
</div>
<h3>Efficiency</h3>
<p class="metric-goal">Reduce manual effort</p>
<p class="metric-measure">Time comparison</p>
</div>
<div class="metric-card">
<div class="metric-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Coverage</h3>
<p class="metric-goal">Increase unique test cases</p>
<p class="metric-measure">Case count & diversity</p>
</div>
<div class="metric-card">
<div class="metric-icon">
<i class="fas fa-bullseye"></i>
</div>
<h3>Accuracy</h3>
<p class="metric-goal">Improve test case quality</p>
<p class="metric-measure">Human QA review</p>
</div>
<div class="metric-card">
<div class="metric-icon">
<i class="fas fa-link"></i>
</div>
<h3>Integration</h3>
<p class="metric-goal">Tool compatibility</p>
<p class="metric-measure">Export validation</p>
</div>
<div class="metric-card">
<div class="metric-icon">
<i class="fas fa-rocket"></i>
</div>
<h3>Scalability</h3>
<p class="metric-goal">Handle 100 URLs/hour</p>
<p class="metric-measure">Performance benchmarks</p>
</div>
<div class="metric-card">
<div class="metric-icon">
<i class="fas fa-users"></i>
</div>
<h3>Adoption</h3>
<p class="metric-goal">QA team satisfaction</p>
<p class="metric-measure">Survey feedback</p>
</div>
</div>
</div>
</section>
<!-- Current Gap Section -->
<section class="gap-section">
<div class="container">
<h2 class="section-title">Current Gap</h2>
<div class="gap-content">
<p>While our QA team has robust automation using Selenium and Pytest, there is no existing tooling for automated test case generation. This proposal fills that gap and aligns with our roadmap to explore LLM-based QA innovation.</p>
</div>
</div>
</section>
<!-- Scope Section -->
<section id="scope" class="scope-section">
<div class="container">
<h2 class="section-title">Scope</h2>
<div class="scope-content">
<div class="scope-column">
<h3 class="scope-title in-scope">
<i class="fas fa-check-circle"></i> In Scope
</h3>
<ul class="scope-list">
<li>Web-based UI applications</li>
<li>Test case generation from URL, screenshot, or document</li>
<li>Integration with Selenium & Pytest</li>
<li>Structured outputs (Gherkin, JSON, Markdown)</li>
<li>Prompt engineering for LLMs</li>
</ul>
</div>
<div class="scope-column">
<h3 class="scope-title out-scope">
<i class="fas fa-times-circle"></i> Out of Scope
</h3>
<ul class="scope-list">
<li>Mobile or desktop apps</li>
<li>Manual test writing</li>
<li>Performance, security, or real-time monitoring</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Target Audience Section -->
<section class="audience-section">
<div class="container">
<h2 class="section-title">Target Audience</h2>
<div class="audience-grid">
<div class="audience-card">
<div class="audience-icon">
<i class="fas fa-bug"></i>
</div>
<h3>QA Engineers</h3>
<p>Streamline test creation and improve coverage</p>
</div>
<div class="audience-card">
<div class="audience-icon">
<i class="fas fa-robot"></i>
</div>
<h3>Automation Testers</h3>
<p>Generate automated test scenarios efficiently</p>
</div>
<div class="audience-card">
<div class="audience-icon">
<i class="fas fa-project-diagram"></i>
</div>
<h3>Product Managers</h3>
<p>Ensure comprehensive product quality coverage</p>
</div>
<div class="audience-card">
<div class="audience-icon">
<i class="fas fa-code"></i>
</div>
<h3>Developers</h3>
<p>Developers involved in testing</p>
</div>
<div class="audience-card">
<div class="audience-icon">
<i class="fas fa-users"></i>
</div>
<h3>Large App Teams</h3>
<p>Teams managing large or frequently updated web apps</p>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>