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