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)
- 在左邊新增 endpoint:選 method、寫 path、設 status / delay / response body。
- 右上選輸出格式(Playwright / Mockoon / Postman / json-server)。
- 右側即時看到產出的 config,按 Copy 或 Download。
- 拿到你選的工具裡跑(往下看 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 才會上。