Which Tool Best Visualizes API Comparison Results: Allure, Flask, or Next.js?

1 Background

In daily work we often need to run comparison tests to ensure data or response consistency between old and new versions, reducing potential issues. Our team records traffic using internal CapPlan (based on Goreplay) or a traffic replay tool (based on jvm‑sandbox‑repeater), then runs Python code locally to compare results. When differences appear, a clear visual method is needed for developers to quickly identify problems and adjust.

2 Solution Exploration

Based on the background we explored three different ways to present comparison results:

2.1 Solution 1: Allure Report

Using the Allure report generator, each HTTP request result can be recorded into a report. This method is easy to implement and well supported, but may lack flexibility for complex data presentation.

2.2 Solution 2: Flask Log Parser

Parse log files with a Flask application and render them as a Jinja2 HTML page. This approach allows custom styling and rich information display, but is more complex because it must handle log format and page rendering.

2.3 Solution 3: Next.js Data Display

Build a modern, responsive UI with Next.js, which interacts efficiently with an SQLite database to present comparison data. Compared with the other two, this solution offers superior user experience and scalability.

3 Implementation

The following sections describe how to implement each solution using Python + pytest as the base framework.

3.1 Allure Report

Pytest integrates well with Allure. After each HTTP request, the

show_response

method writes the result to the report by extracting the needed information.

<code>attach_text(f'以「{response.request.method}」方式请求「{response.url}」;'
           f'返回状态码为「{response.status_code}」'
           f'返回内容为「{response.text}」',
           "接口请求")
</code>

3.2 Flask Log Parser

The approach first records responses into a log file in a defined format, then Flask reads and parses these logs, rendering them on a Jinja2 HTML page.

3.3 Next.js Data Display

3.3.0 Framework Introduction

Next.js (https://nextjs.org/) is a React‑based open‑source framework offering server‑side rendering (SSR), static site generation (SSG), API routes, dynamic routing, automatic code splitting, and hot reload.

SSR : pre‑render pages on the server for faster load and SEO.

SSG : generate static HTML at build time for high performance.

API Routes : create backend endpoints directly in the app.

Dynamic Routing : file‑system based routing simplifies management.

Code Splitting : automatic per‑page bundling improves load efficiency.

Hot Reload : see changes instantly during development.

Prisma (https://www.prisma.io/) is a modern database toolkit that provides ORM, type safety, multi‑database support, auto‑generated CRUD operations, and migration management, making it ideal for interacting with SQLite in this scenario.

ORM : work with databases using JavaScript/TypeScript without raw SQL.

Type Safety : generated types catch errors at compile time.

Multi‑Database : supports PostgreSQL, MySQL, SQLite, MongoDB.

Auto CRUD : generates basic create/read/update/delete APIs.

Migration Management : simplifies schema changes and version control.

3.3.1 Create Project

<code>npx create-next-app api_compare
cd api_compare
</code>

3.3.2 Install Dependencies

<code>yarn add prisma @prisma/client antd
</code>

3.3.3 Configure Prisma

Step 1: Initialize Prisma

<code>npx prisma init
</code>

This generates

api_compare/prisma/schema.prisma

.

Step 2: Edit

schema.prisma

to point to the SQLite database

<code>datasource db {
  provider = "sqlite"
  url      = "file:./log.db"
}
model logs {
  id       Int    @id @default(autoincrement())
  url1     String
  curl1    String
  request1 String
  remark1  String
  // ... other fields
}
</code>

Step 3: Generate Prisma Client

<code>npx prisma generate
</code>

Step 4: Migrate Database

<code>npx prisma migrate dev --name init
</code>

The command creates migration files and the SQLite database.

3.3.4 Write API

File

api_compare/src/app/api/logs/all/route.js

exposes the endpoint

http://127.0.0.1:3000/api/logs/all

:

<code>import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default async function handler(req, res) {
  if (req.method === 'GET') {
    const logs = await prisma.logs.findMany();
    res.status(200).json(logs);
  } else {
    res.setHeader('Allow', ['GET']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}
</code>

Typical Prisma queries used:

<code>await prisma.logs.findMany(); // fetch all rows
await prisma.logs.groupBy({ by: ['url1', 'url2'], _count: { id: true } }); // group statistics
await prisma.logs.findMany({ where: { id: { in: intIds } } }); // conditional query
await prisma.logs.create({ data }); // insert
await prisma.logs.update({ where: { id: Number(id) }, data: { deleted: true } }); // update
</code>

Additional UI components (JSON diff viewer, etc.) can be integrated to visualize differences directly.

Conclusion

Overall, each solution has pros and cons:

Allure reports are simple but limited in flexibility.

Flask offers high customizability but requires more implementation effort.

Next.js provides the best user experience and extensibility for frequent traffic comparison and real‑time monitoring.

For projects that need rapid iteration, good UX, and scalable data presentation, Next.js combined with Prisma is the recommended choice.