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>Flowtest Editor y Ejecución</title>7 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">8 <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>9 </head>10 <body class="bg-gray-100">11 <div class="container mx-auto p-4">12 <h1 class="text-2xl font-bold mb-4">Flowtest Editor y Ejecución</h1>13 14 <!-- Sección de Selección de Entorno -->15 <div class="mb-4">16 <label for="environment-select" class="block text-gray-700">Select Environment:</label>17 <select id="environment-select" class="mt-1 block w-full p-2 border border-gray-300 rounded">18 <option value="Local">Local</option>19 <option value="Staging">Staging</option>20 </select>21 </div>22 23 <!-- Modal de bienvenida -->24 <div id="welcome-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden">25 <div class="bg-white p-6 rounded-lg shadow-md max-w-lg">26 <h2 class="text-xl font-semibold mb-4">Bienvenido a Flowtest Editor</h2>27 <p class="mb-4">Aquí puedes agregar y editar variables, requests, asserts y esperas directamente en la lista. Usa los botones "+" para añadir nuevos elementos.</p>28 <button type="button" onclick="closeWelcomeModal()" class="bg-blue-500 text-white px-4 py-2 rounded">Entendido</button>29 </div>30 </div>31 32 <!-- Lista de Elementos -->33 <div id="elements-list" class="space-y-4">34 <div class="flex justify-center">35 <button type="button" onclick="showInsertMenu(this)" class="bg-gray-200 text-gray-600 px-2 py-1 rounded">+</button>36 </div>37 </div>38 39 <!-- Sección de Tabla de Pruebas -->40 <div class="mt-8">41 <h2 class="text-xl font-semibold mb-4">Tabla de Pruebas</h2>42 <table id="test-table" class="w-full border border-gray-300">43 <thead>44 <tr>45 <th class="border px-4 py-2">step</th>46 <th class="border px-4 py-2">expected_status</th>47 </tr>48 </thead>49 <tbody>50 <!-- Filas de la tabla se añadirán dinámicamente -->51 </tbody>52 </table>53 <button type="button" onclick="addTestCase()" class="bg-blue-500 text-white px-4 py-2 rounded mt-4">Add Test Case</button>54 </div>55 56 <!-- Sección de Ejecución -->57 <div id="execution-log" class="space-y-4 mt-8">58 <!-- Logs of requests execution will be appended here -->59 </div>60 61 <!-- Botones de Control -->62 <div class="flex justify-end mt-4 space-x-4">63 <button id="start-execution" class="bg-green-500 text-white px-4 py-2 rounded">Start Execution</button>64 <button type="button" onclick="saveTest()" class="bg-blue-500 text-white px-4 py-2 rounded">Save Test</button>65 </div>66 </div>67 68 <script src="script.js"></script>69 </body>70 </html>71 Enlace
El enlace para compartir es: