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</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 <form class="space-y-6">12 <!-- Variables Section -->13 <div class="bg-white p-6 rounded-lg shadow-md">14 <h2 class="text-xl font-semibold mb-4">Variables</h2>15 <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">16 <div>17 <label for="variable-name" class="block text-gray-700">Variable Name</label>18 <input type="text" id="variable-name" class="w-full p-2 border border-gray-300 rounded mt-1">19 </div>20 <div>21 <label for="variable-value" class="block text-gray-700">Variable Value</label>22 <input type="text" id="variable-value" class="w-full p-2 border border-gray-300 rounded mt-1">23 </div>24 </div>25 <button type="button" onclick="addVariable()" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Add Variable</button>26 <ul id="variables-list" class="mt-4 space-y-2"></ul>27 </div>28 29 <!-- HTTP Requests Section -->30 <div class="bg-white p-6 rounded-lg shadow-md">31 <h2 class="text-xl font-semibold mb-4">HTTP Requests</h2>32 <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">33 <div>34 <label for="http-method" class="block text-gray-700">HTTP Method</label>35 <select id="http-method" class="w-full p-2 border border-gray-300 rounded mt-1">36 <option value="GET">GET</option>37 <option value="POST">POST</option>38 <option value="PUT">PUT</option>39 <option value="DELETE">DELETE</option>40 </select>41 </div>42 <div>43 <label for="api-url" class="block text-gray-700">API URL</label>44 <input type="text" id="api-url" class="w-full p-2 border border-gray-300 rounded mt-1">45 </div>46 </div>47 <div class="mt-4">48 <label for="headers" class="block text-gray-700">Headers (JSON)</label>49 <textarea id="headers" rows="2" class="w-full p-2 border border-gray-300 rounded mt-1"></textarea>50 </div>51 <div class="mt-4">52 <label for="request-body" class="block text-gray-700">Request Body</label>53 <textarea id="request-body" rows="4" class="w-full p-2 border border-gray-300 rounded mt-1"></textarea>54 </div>55 <button type="button" onclick="addRequest()" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Add Request</button>56 <ul id="requests-list" class="mt-4 space-y-2"></ul>57 </div>58 59 <!-- Assertions Section -->60 <div class="bg-white p-6 rounded-lg shadow-md">61 <h2 class="text-xl font-semibold mb-4">Assertions</h2>62 <div>63 <label for="assertion-expression" class="block text-gray-700">Assertion Expression</label>64 <input type="text" id="assertion-expression" class="w-full p-2 border border-gray-300 rounded mt-1">65 </div>66 <button type="button" onclick="addAssertion()" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Add Assertion</button>67 <ul id="assertions-list" class="mt-4 space-y-2"></ul>68 </div>69 70 <!-- Save Button -->71 <div class="flex justify-end">72 <button type="button" onclick="saveTest()" class="bg-green-500 text-white px-4 py-2 rounded">Save Test</button>73 </div>74 </form>75 </div>76 77 <script src="script.js"></script>78 </body>79 </html>80 Enlace
El enlace para compartir es: