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>Flujo Secuencial de API</title>7 <link rel="stylesheet" href="styles.css">8 </head>9 <body>10 <div class="container">11 <h1>Flujo Secuencial de API</h1>12 <div id="flow-container">13 <!-- Bloque de Variables -->14 <div class="block">15 <h2>Variables Iniciales</h2>16 <div class="variable">17 <label>user-id:</label>18 <input type="text" id="user-id" value="uuid">19 </div>20 </div>21 22 <!-- Bloque de Aserciones -->23 <div class="block">24 <h2>Aserciones</h2>25 <div class="assert">26 <label>user-id es uno de:</label>27 <span id="assert-user-id">201, 409</span>28 </div>29 </div>30 31 <!-- Bloque de Llamadas HTTP -->32 <div class="block">33 <h2>Llamadas HTTP</h2>34 <div class="request">35 <div class="method">GET</div>36 <div class="url">http://host//robots.txt</div>37 <button onclick="makeRequest()">Ejecutar</button>38 </div>39 <div class="headers">40 <h3>Headers</h3>41 <input type="text" placeholder="Authorization" id="auth-header">42 </div>43 <div class="response">44 <h3>Respuesta</h3>45 <pre id="response-output"></pre>46 </div>47 <div class="assert">48 <label>Verificar status:</label>49 <span id="assert-status">success</span>50 </div>51 </div>52 53 <!-- Bloque de Pausa -->54 <div class="block">55 <h2>Pausa</h2>56 <div class="sleep">57 <label>Duración:</label>58 <span>10s</span>59 </div>60 </div>61 62 <!-- Bloque de Repetición -->63 <div class="block">64 <h2>Repetición</h2>65 <div class="repeat">66 <label>Repetir desde:</label>67 <span>1</span>68 <label>hasta:</label>69 <span>5</span>70 </div>71 </div>72 73 <!-- Bloque de Llamada a Flujo -->74 <div class="block">75 <h2>Llamada a Flujo</h2>76 <div class="flow">77 <label>Flujo:</label>78 <span>Create Payment</span>79 <div class="input">80 <label>payment-id:</label>81 <span>[uuid]</span>82 </div>83 <div class="input">84 <label>amount:</label>85 <span>[=] >></span>86 </div>87 <div class="input">88 <label>IBAN:</label>89 <span>my-iban</span>90 </div>91 </div>92 </div>93 94 <!-- Bloque de Resultados -->95 <div class="block">96 <h2>Resultado</h2>97 <div class="result">98 <label>Status:</label>99 <span id="status">ACCEPTED</span>100 </div>101 </div>102 </div>103 </div>104 <script src="script.js"></script>105 </body>106 </html>107 Enlace
El enlace para compartir es: