Dev Tools
純前端檔案不上傳

Mock API 設計器

設計 endpoint + response,輸出可直接用於 Mockoon、Playwright、Postman、json-server 的 config 檔。純前端、零成本、自己拿回去跑。

Endpoints

import type { Page } from "@playwright/test";

export async function mockEndpoints(page: Page) {
  await page.route("**/api/users", async (route) => {
    if (route.request().method() !== "GET") return route.continue();
    await route.fulfill({
      status: 200,
      headers: { "Content-Type": "application/json" },
      body: "[{\"id\":1,\"name\":\"Mark\"}]",
    });
  });
}

// Usage in a test:
//   test.beforeEach(async ({ page }) => { await mockEndpoints(page); });

⚠️ 本工具不在伺服器開啟任何 endpoint,輸出的 config 請自己拿回去跑(本機 / CI / 自己的 server)。

怎麼用(這是設計器,不是 live mock server)
  1. 在左邊新增 endpoint:選 method、寫 path、設 status / delay / response body。
  2. 右上選輸出格式(Playwright / Mockoon / Postman / json-server)。
  3. 右側即時看到產出的 config,按 CopyDownload
  4. 拿到你選的工具裡跑(往下看 Tips)。
Tips
  • Playwright:把下載的 .ts 加進你的測試專案,在每個 test 前呼叫 await mockEndpoints(page)
  • Mockoon:打開 Mockoon GUI → File → Open environment → 選下載的 JSON → 按啟動,API 在 http://localhost:3001
  • json-server:在 terminal 跑 npx json-server db.json → API 在 http://localhost:3000
  • Postman:File → Import → 選 collection,在 Postman 裡建 mock server。

⚠️ 為避免被濫用,我們沒有dev.9niche.com 直接開出 endpoint。要 hosted mock 服務未來會另外做(Phase 2),需要登入 + rate limit + TTL 才會上。

相關工具