estructura_automation
Version:
Paquete de estructura de automation
212 lines (184 loc) • 8.03 kB
HTML
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Casos de Prueba - Example</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="styles/styles.css" rel="stylesheet">
</head>
<body>
<div class="logo-container">
<img src="styles/logo_paguetodo.png" alt="PagueTodo Logo" class="company-logo">
</div>
<div class="container">
<h1>Casos de Prueba - Example</h1>
<div class="fecha">Fecha de generación: 27/6/2025</div>
<div class="search-box">
<input type="text" id="searchInput" placeholder="Buscar por nombre o ID de caso...">
<button id="searchButton">Buscar</button>
</div>
<div id="content">
<div id="example-view" class="node-view ">
<div class="breadcrumbs">
<a href="http://127.0.0.1:5501/report/matrizPrueba.html">Aplicaciones</a><span class="separator">/</span><span>Example</span>
</div>
<div class="grid-container">
<div class="card" onclick="navigateToNode('example_example')">
<div class="card-header">Example</div>
<div class="card-content">
<div class="count-badge">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 11 12 14 22 4"></polyline>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
</svg>
1 test
</div>
</div>
</div>
</div>
</div>
<div id="example_example-view" class="node-view hidden">
<div class="breadcrumbs">
<a href="http://127.0.0.1:5501/report/matrizPrueba.html">Aplicaciones</a><span class="separator">/</span><a href="#" onclick="navigateToNode('example'); return false;">Example</a><span class="separator">/</span><span>Example</span>
</div>
<div class="grid-container">
<div class="card test-case-card" data-id="example_example_tc_1" data-name="Inicio de sesión exitoso con credenciales válidas" onclick="showSteps('example_example_tc_1')">
<div class="card-header">Inicio de sesión exitoso con credenciales válidas</div>
<div class="card-content">
<div class="count-badge">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 11 12 14 22 4"></polyline>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
</svg>
6 pasos
</div>
<div class="test-id-badge">ID: example_example_tc_1</div>
</div>
</div>
</div>
</div>
<div id="example_example_tc_1-steps-view" class="steps-view hidden">
<div class="breadcrumbs">
<a href="http://127.0.0.1:5501/report/matrizPrueba.html">Aplicaciones</a><span class="separator">/</span><a href="#" onclick="navigateToNode('example'); return false;">Example</a><span class="separator">/</span><a href="#" onclick="navigateToNode('example_example'); return false;">Example</a><span class="separator">/</span><span>Inicio de sesión exitoso con credenciales válidas</span>
</div>
<div class="test-steps-container">
<div class="test-steps-header">
<span>Inicio de sesión exitoso con credenciales válidas</span>
<span class="test-case-id">ID: example_example_tc_1</span>
</div><div class="step-item">En la página de inicio de sesión con RIF/Cédula</div><div class="step-item">Ingreso mi RIF/Cédula "1234567890"</div><div class="step-item">Ingreso mi contraseña "Test123!"</div><div class="step-item">Hago click en el botón "Ingresar"</div><div class="step-item">Debo ser redirigido a la página de aplicaciones</div><div class="step-item">Debo ver mi panel de cuenta</div>
</div>
</div>
</div>
</div>
<script>
// Sistema de navegación dinámico universal
const navigateToNode = (nodeId) => {
hideAllViews();
const targetView = document.getElementById(nodeId + '-view');
if (targetView) {
targetView.classList.remove('hidden');
} else {
console.error('Vista no encontrada:', nodeId + '-view');
}
}
const showSteps = (testCaseId) => {
hideAllViews();
const targetView = document.getElementById(testCaseId + '-steps-view');
if (targetView) {
targetView.classList.remove('hidden');
}
}
const hideAllViews = () => {
const allViews = document.querySelectorAll('.node-view, .steps-view');
allViews.forEach(view => view.classList.add('hidden'));
// Limpiar vistas de búsqueda
const searchView = document.getElementById('search-results-view');
if (searchView) {
searchView.remove();
}
}
// Funcionalidad de búsqueda mejorada
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
const searchTestCases = () => {
const searchTerm = searchInput.value.toLowerCase().trim();
if (!searchTerm) {
hideAllViews();
const firstView = document.querySelector('.node-view:not(.hidden)') || document.querySelector('.node-view');
if (firstView) {
firstView.classList.remove('hidden');
}
return;
}
const allTestCards = document.querySelectorAll('.test-case-card');
let exactMatch = null;
let foundCards = [];
allTestCards.forEach((card) => {
const cardName = card.getAttribute('data-name');
const cardId = card.getAttribute('data-id');
if (!cardName || !cardId) return;
const cardNameLower = cardName.toLowerCase();
const cardIdLower = cardId.toLowerCase();
if (cardIdLower === searchTerm) {
exactMatch = card;
return;
}
if (cardNameLower.includes(searchTerm) || cardIdLower.includes(searchTerm)) {
foundCards.push(card);
}
});
if (exactMatch) {
showSearchResults([exactMatch], searchTerm, true);
} else if (foundCards.length > 0) {
showSearchResults(foundCards, searchTerm, false);
} else {
alert('No se encontró: ' + searchTerm);
}
}
const showSearchResults = (matchingCards, searchTerm, isExactMatch = false) => {
// Limpiar vista anterior
const oldView = document.getElementById('search-results-view');
if (oldView) oldView.remove();
// Crear nueva vista
const searchResultsView = document.createElement('div');
searchResultsView.id = 'search-results-view';
searchResultsView.className = 'node-view';
const resultType = isExactMatch ? '🎯 ID Exacto' : '🔍 Resultados';
const breadcrumbsHTML = '<div class="breadcrumbs">' +
'<a href="http://127.0.0.1:5501/report/matrizPrueba.html">Aplicaciones</a>' +
'<span class="separator">/</span>' +
'<span>' + resultType + ': "' + searchTerm + '" (' + matchingCards.length + ')</span>' +
'</div>';
let cardsHTML = '';
matchingCards.forEach(card => {
cardsHTML += card.outerHTML;
});
const gridHTML = '<div class="grid-container">' + cardsHTML + '</div>';
searchResultsView.innerHTML = breadcrumbsHTML + gridHTML;
// Ocultar todo y mostrar resultados
hideAllViews();
document.getElementById('content').appendChild(searchResultsView);
searchResultsView.style.display = 'block';
// Resaltar la tarjeta
const newCards = searchResultsView.querySelectorAll('.test-case-card');
newCards.forEach(card => {
card.classList.add('highlight');
});
}
searchButton.addEventListener('click', function(e) {
e.preventDefault();
searchTestCases();
});
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
searchTestCases();
}
});
// La vista raíz ya está visible por defecto
});
</script>
</body>
</html>