File size: 5,722 Bytes
289af61 279c973 289af61 279c973 289af61 279c973 289af61 279c973 289af61 279c973 289af61 279c973 289af61 279c973 289af61 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Cases - TestCaseMaster Pro</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="components/navbar.js"></script>
<script src="components/sidebar.js"></script>
<script src="components/test-case-item.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<div class="flex">
<custom-sidebar></custom-sidebar>
<main class="flex-1 p-8">
<div class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold text-gray-800" id="page-title">Test Cases</h1>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
<i data-feather="plus" class="mr-2"></i> Create Test Case
</button>
</div>
<div class="bg-white rounded-lg shadow p-6 mb-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold">Filter Test Cases</h2>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search test cases..."
class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
</div>
<select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>All Status</option>
<option>Passed</option>
<option>Failed</option>
<option>Pending</option>
</select>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-4" id="test-cases-container">
<!-- Test case items will be loaded here -->
</div>
</main>
</div>
<script>
feather.replace();
// Load test cases based on type from URL
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
const type = urlParams.get('type') || 'all';
// Update page title
document.getElementById('page-title').textContent =
`${type.charAt(0).toUpperCase() + type.slice(1)} Test Cases`;
// Load sample test cases
loadTestCases(type);
});
function loadTestCases(type) {
const container = document.getElementById('test-cases-container');
container.innerHTML = '';
// Sample test case data
const testCases = [
{
id: 1,
title: 'SIT - Login functionality',
description: 'Validate login flow in system integration environment',
priority: 'High',
status: 'Passed',
type: 'SIT',
lastRun: '2 hours ago'
},
{
id: 2,
title: 'UAT - Checkout process',
description: 'End-to-end checkout validation with real users',
priority: 'Critical',
status: 'Pending',
type: 'UAT',
lastRun: 'Not run yet'
},
{
id: 3,
title: 'Functional - Password reset',
description: 'Verify password reset functionality',
priority: 'High',
status: 'Passed',
type: 'Functional',
lastRun: '1 day ago'
},
{
id: 4,
title: 'SIT - API integration',
description: 'Validate all API integrations',
priority: 'Medium',
status: 'Warning',
type: 'SIT',
lastRun: '3 days ago'
},
{
id: 5,
title: 'UAT - Mobile responsiveness',
description: 'User acceptance testing for mobile devices',
priority: 'High',
status: 'Failed',
type: 'UAT',
lastRun: '5 days ago'
}
];
// Filter by type if specified
const filteredCases = type === 'all'
? testCases
: testCases.filter(c => c.type.toLowerCase() === type);
// Add test cases to container
filteredCases.forEach(testCase => {
const el = document.createElement('test-case-item');
el.setAttribute('data', JSON.stringify(testCase));
container.appendChild(el);
});
}
</script>
<script src="script.js"></script>
</body>
</html> |