เครื่องมือทดสอบภาระงานที่พัฒนาด้วย Next.js และ k6 สำหรับทดสอบประสิทธิภาพของ Web API และเว็บไซต์

• หลักการทำงาน
• ฟีเจอร์หลัก
• การติดตั้ง
• วิธีใช้งาน
• การอ่านผลลัพธ์
• ตัวอย่างการใช้งาน
• โครงสร้างโปรเจค

• ฟอร์มกรอกข้อมูล: ผู้ใช้กรอก URL, HTTP Method, Headers, Parameters, Body และค่าการทดสอบ
• การแสดงผล: แสดงผลลัพธ์เป็นกราฟและตารางแบบ real-time
• UI/UX: ใช้ Tailwind CSS และ Recharts สำหรับ data visualization

• รับข้อมูล: รับ configuration จาก frontend
• สร้าง k6 Script: แปลงข้อมูลเป็น JavaScript script สำหรับ k6
• รัน Load Test: เรียกใช้ k6 เพื่อทำการทดสอบ
• ประมวลผล: แปลงผลลัพธ์จาก k6 JSON format เป็นข้อมูลสำหรับแสดงผล

• Virtual Users: จำลองผู้ใช้หลายคนเข้าใช้งานพร้อมกัน
• Scenarios: กำหนดรูปแบบการทดสอบ (ramp-up, steady state, ramp-down)
• Metrics Collection: เก็บข้อมูล response time, throughput, error rate
• Real-time Monitoring: ติดตามผลการทดสอบแบบ real-time

• หากไม่มี k6 ติดตั้ง ระบบจะสร้าง Mock Data ที่มีลักษณะใกล้เคียงกับผลการทดสอบจริง
• ช่วยให้สามารถทดลองใช้ UI และฟีเจอร์ต่างๆ ได้โดยไม่ต้องติดตั้ง k6

• URL Configuration: รองรับ HTTP และ HTTPS
• HTTP Methods: GET, POST, PUT, DELETE, PATCH
• Request Parameters: Query string parameters
• Headers Management: เพิ่ม/ลบ HTTP headers
• Request Body: รองรับ JSON และ Form Data
• Load Configuration: Virtual Users, Duration, Ramp-up Time

• Summary Cards: ข้อมูลสรุปโดยรวม
• Response Time Chart: กราฟแสดง response time ตลอดการทดสอบ
• HTTP Status Codes: แสดงสัดส่วน status codes
• Percentile Analysis: วิเคราะห์ response time percentiles
• Detailed Metrics: ข้อมูลรายละเอียด

• Responsive Design: ใช้งานได้ทั้ง Desktop และ Mobile
• Real-time Updates: แสดงผลทันทีเมื่อการทดสอบเสร็จ
• Loading States: แสดงสถานะการโหลด
• Error Handling: จัดการข้อผิดพลาดอย่างเหมาะสม

git clone <repository-url>
cd loadtest-tool

npm install

# สำหรับ macOS
./install-k6.sh

# หรือติดตั้งแยก
# macOS
brew install k6

# Ubuntu/Debian
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys C5AD17C747E3415A3642D57D77C6C491D6AC1D69
echo "deb https://dl.k6.io/deb stable main" | sudo tee /etc/apt/sources.list.d/k6.list
sudo apt-get update
sudo apt-get install k6

# Windows
winget install k6
# หรือ
choco install k6

npm run dev

เปิดเบราว์เซอร์ไปที่ http://localhost:3000

URL: https://jsonplaceholder.typicode.com/posts
Method: GET

Key: _limit    Value: 10
Key: _page     Value: 1

Key: Authorization    Value: Bearer your-token
Key: Content-Type     Value: application/json

{
  "title": "Test Post",
  "body": "This is a test post",
  "userId": 1
}

Virtual Users: 10        (จำนวนผู้ใช้จำลอง)
Duration: 30s            (ระยะเวลาทดสอบ)
Ramp-up Time: 5s         (เวลาเพิ่มผู้ใช้ค่อยๆ)

กดปุ่ม "เริ่มทดสอบ" และรอผลลัพธ์

• ความหมาย: จำนวนผู้ใช้จำลองที่กำหนด
• การอ่าน: ตัวเลขนี้ควรตรงกับที่ตั้งค่าไว้

• ความหมาย: จำนวน HTTP requests ทั้งหมดที่ส่งไป
• การอ่าน: ยิ่งมากยิ่งดี แสดงว่าระบบรับโหลดได้มาก

• ความหมาย: เวลาตอบสนองเฉลี่ย (มิลลิวินาที)
• การอ่าน:
  • < 100ms: ดีเยี่ยม
  • 100-300ms: ดี
  • 300-1000ms: พอใช้
  • > 1000ms: ช้า ต้องปรับปรุง

• ความหมาย: จำนวน requests ที่ล้มเหลว
• การอ่าน: ควรน้อยที่สุด หรือ 0

• ความหมาย: แสดง response time ตลอดการทดสอบ
• การอ่าน:
  • เส้นตรง: ประสิทธิภาพคงที่ดี
  • เส้นขึ้น: ประสิทธิภาพลดลงเมื่อโหลดเพิ่ม
  • เส้นกระเซ็น: ไม่เสถียร มีปัญหา

• ความหมาย: จำนวน active users ในแต่ละช่วงเวลา
• การอ่าน: ควรเพิ่มขึ้นตาม ramp-up time ที่กำหนด

• ควรมี: 95-100% ของ total requests
• หากน้อย: มีปัญหาการทำงานของ API

• ความหมาย: URL ไม่ถูกต้องหรือ resource ไม่มี
• การแก้: ตรวจสอบ URL และ endpoints

• ความหมาย: เซิร์ฟเวอร์มีปัญหา
• การแก้: ตรวจสอบ server logs และแก้ไข bugs

• p50 (Median): 50% ของ requests ได้ response ≤ ค่านี้
• p90: 90% ของ requests ได้ response ≤ ค่านี้
• p95: 95% ของ requests ได้ response ≤ ค่านี้
• p99: 99% ของ requests ได้ response ≤ ค่านี้

p50: < 200ms
p90: < 500ms  
p95: < 800ms
p99: < 1500ms

• ความหมาย: เวลาทั้งหมดที่ใช้ในการทดสอบ
• การอ่าน: ควรใกล้เคียงกับที่กำหนดไว้

• ความหมาย: จำนวน requests ต่อวินาที
• การอ่าน: ยิ่งสูงยิ่งดี แสดงว่า throughput สูง

• ความหมาย: ปริมาณข้อมูลที่รับ/ส่ง
• การอ่าน: ใช้คำนวณ bandwidth และต้นทุน

• ความหมาย: เวลาตอบสนองที่เร็วที่สุด/ช้าที่สุด
• การอ่าน: ช่วงห่างไม่ควรกว้างเกินไป

URL: https://jsonplaceholder.typicode.com/posts
Method: POST
Headers: 
  Content-Type: application/json
Body:
{
  "title": "Load Test Post",
  "body": "Testing API performance",
  "userId": 1
}
Virtual Users: 20
Duration: 1m
Ramp-up: 10s

URL: https://example.com
Method: GET
Parameters:
  utm_source: loadtest
  page: home
Virtual Users: 50
Duration: 2m
Ramp-up: 15s

URL: https://api.example.com/users
Method: GET
Headers:
  Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
  Accept: application/json
Virtual Users: 15
Duration: 45s
Ramp-up: 5s

loadtest-tool/
├── app/                          # Next.js App Router
│   ├── api/
│   │   └── load-test/
│   │       └── route.ts          # API endpoint สำหรับรัน k6
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # หน้าหลัก
├── components/
│   ├── LoadTestForm.tsx          # ฟอร์มกรอกข้อมูลการทดสอบ
│   └── ResultsDisplay.tsx        # แสดงผลลัพธ์และกราฟ
├── public/                       # Static assets
├── styles/                       # CSS files
├── install-k6.sh               # สคริปต์ติดตั้ง k6
├── package.json                 # Dependencies
├── tailwind.config.js          # Tailwind configuration
├── tsconfig.json               # TypeScript configuration
└── README.md                   # เอกสารนี้

• Frontend: Next.js 14, React 18, TypeScript
• Styling: Tailwind CSS
• Charts: Recharts
• Icons: Lucide React
• Load Testing: k6
• HTTP Client: Built-in Fetch API

• ไม่ควรทดสอบ production servers ด้วยโหลดสูงเกินไป
• ขอความยินยอมก่อนทดสอบ external APIs
• ระวังการใช้ bandwidth มากเกินไป

• ผลการทดสอบขึ้นอยู่กับ network, server specs, และ database
• ควรทดสอบหลายครั้งเพื่อความแม่นยำ
• เปรียบเทียบผลกับ baseline metrics

• Mock data จะไม่แม่นยำเท่าการทดสอบจริงด้วย k6
• การทดสอบผ่าน browser อาจมี CORS limitations
• ไม่รองรับ WebSocket หรือ advanced protocols

สามารถขยายฟีเจอร์เพิ่มเติมได้:

• Test Scenarios: บันทึกและโหลด test configurations
• Historical Data: เก็บประวัติการทดสอบ
• Alerts: แจ้งเตือนเมื่อประสิทธิภาพลดลง
• Comparison: เปรียบเทียบผลการทดสอบ
• Export Reports: ส่งออกรายงานเป็น PDF/Excel
• Team Collaboration: แชร์ผลการทดสอบกับทีม

MIT License - ใช้งานได้อย่างอิสระ

Happy Load Testing! 🚀

หากมีคำถามหรือต้องการความช่วยเหลือ สามารถเปิด Issue ใน repository นี้ได้