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 Execution</title>7 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">8 </head>9 <body class="bg-gray-100">10 <div class="container mx-auto p-4">11 <h1 class="text-2xl font-bold mb-4">Flowtest Execution</h1>12 <div id="execution-log" class="space-y-4">13 <!-- Logs of requests execution will be appended here -->14 </div>15 <button id="start-execution" class="bg-green-500 text-white px-4 py-2 rounded mt-4">Start Execution</button>16 </div>17 18 <script>19 document.getElementById('start-execution').addEventListener('click', startExecution);20 21 async function startExecution() {22 const logContainer = document.getElementById('execution-log');23 logContainer.innerHTML = ''; // Clear previous logs24 25 const steps = [26 {27 type: 'request',28 method: 'GET',29 url: '{{ base_url }}/users/{{ user_id }}?format=json',30 headers: {31 'Application-ID': '{{ app_id }}'32 },33 body: null34 },35 // Add more steps here...36 ];37 38 const variables = {39 base_url: 'https://api.example.com',40 user_id: '12345',41 app_id: 'abcd1234'42 };43 44 for (const step of steps) {45 let logEntry = document.createElement('div');46 logEntry.classList.add('log-entry');47 logEntry.innerHTML = `<p><strong>${step.method}</strong> ${replaceVariables(step.url, variables)}</p>`;48 logContainer.appendChild(logEntry);49 50 try {51 const response = await executeStep(step, variables);52 logEntry.classList.add('success');53 logEntry.innerHTML += `<p>Response: ${JSON.stringify(response)}</p>`;54 } catch (error) {55 logEntry.classList.add('error');56 logEntry.innerHTML += `<p>Error: ${error.message}</p>`;57 break; // Stop execution on error58 }59 }60 }61 62 async function executeStep(step, variables) {63 const url = replaceVariables(step.url, variables);64 const headers = Object.keys(step.headers).reduce((acc, key) => {65 acc[key] = replaceVariables(step.headers[key], variables);66 return acc;67 }, {});68 const body = step.body ? JSON.stringify(replaceVariables(JSON.stringify(step.body), variables)) : null;69 70 const options = {71 method: step.method,72 headers: headers,73 body: body74 };75 76 const response = await fetch(url, options);77 78 if (!response.ok) {79 throw new Error(`HTTP error! status: ${response.status}`);80 }81 82 const data = await response.json();83 // Update variables based on response if necessary84 return data;85 }86 87 function replaceVariables(template, variables) {88 return template.replace(/{{s*([^}]+)s*}}/g, (match, p1) => variables[p1.trim()] || match);89 }90 91 92 </script>93 </body>94 </html>95 Enlace
El enlace para compartir es: