SentinAI Dashboard UI Testing Guide

We will guide you through how to manually/automatically verify the dashboard UI in your browser.

---

1. Prepare the test environment

# Start the dev server
npm run dev

# Access from browser
open http://localhost:3002

---

2. Manual testing checklist

2.1 Main dashboard

2.2 NLOps Chat UI

2.3 Testing by NLOps scenario

Scenario 1: Status inquiry
1. Open chat → Click on “Current status” example
2. Confirm: Response includes vCPU, CPU%, and component information

Scenario 2: Cost inquiry
1. Enter “Confirm Cost” → Submit
2. Check: Monthly cost, referrals included.

Scenario 3: Scaling (Confirmation Flow)
1. Enter “scale to 2 vCPU”
2. Confirm: Show confirmation bar, disable input
3. Click “Cancel” → confirmation bar disappears, input becomes active
4. Click “Scale to 2 vCPU” again → “Confirm”
5. Confirmation: Scaling complete response

Scenario 4: Change settings
1. “Turn off auto scaling” → Confirmation bar → “Confirm”
2. Confirmation: Setting change response
3. “Turn on automatic scaling” → Confirm → Restore

Scenario 5: Keep the conversation going
1. Sending multiple messages in succession
2. Confirmation: Maintain conversation history, scroll automatically

---

3. API Integration Testing (Vitest)

Verify NLOps core logic without a browser. No additional dependencies required.

# Run only NLOps tests
npx vitest run src/lib/__tests__/nlops-engine.test.ts

# full test
npm run test:run

Test coverage (31)

---

4. curl-based API testing

It's ready to use when the dev server is running.

BASE=http://localhost:3002

# Check status
curl -s $BASE/api/nlops | jq

# Status query
curl -s -X POST $BASE/api/nlops \
  -H "Content-Type: application/json" \
-d '{"message": "Tell me the current status"}' | jq '{intent, executed}'

# Cost inquiry
curl -s -X POST $BASE/api/nlops \
  -H "Content-Type: application/json" \
-d '{"message": "Check cost"}' | jq '{intent, executed}'

# Abnormal status
curl -s -X POST $BASE/api/nlops \
  -H "Content-Type: application/json" \
-d '{"message": "Show me the status of an error"}' | jq '{intent, executed}'

# Log analysis
curl -s -X POST $BASE/api/nlops \
  -H "Content-Type: application/json" \
-d '{"message": "Please analyze the log"}' | jq '{intent, executed}'

# Scaling (request confirmation)
curl -s -X POST $BASE/api/nlops \
  -H "Content-Type: application/json" \
-d '{"message": "Please scale to 2 vCPU"}' | jq '{intent, executed, needsConfirmation}'

# Scaling (run confirmation)
curl -s -X POST $BASE/api/nlops \
  -H "Content-Type: application/json" \
-d '{"message": "Scale to 2 vCPU", "confirmAction": true}' | jq '{intent, executed}'

# RCA
curl -s -X POST $BASE/api/nlops \
  -H "Content-Type: application/json" \
-d '{"message": "Analyze the root cause"}' | jq '{intent, executed}'

# explanation
curl -s -X POST $BASE/api/nlops \
  -H "Content-Type: application/json" \
-d '{"message": "What is a CPU?"}' | jq '{intent, executed}'

# Unknown
curl -s -X POST $BASE/api/nlops \
  -H "Content-Type: application/json" \
-d '{"message": "Unknown command"}' | jq '{intent, executed}'

# Error case (400)
curl -s -X POST $BASE/api/nlops \
  -H "Content-Type: application/json" \
  -d '{"message": ""}' | jq

---

5. Anomaly detection scenario test (Seed API)

# spike data injection → check anomaly detection banner
curl -X POST $BASE/api/metrics/seed?scenario=spike

# Check in browser:
# - display anomaly-banner
# - list of events in anomaly-feed

# restore normal
curl -X POST $BASE/api/metrics/seed?scenario=stable

---

6. When you need browser automation

If you need browser-level automated testing in the future, consider the following options:

6.1 Vitest Browser Mode (Recommended)

The most lightweight way to add browser mode to your existing Vitest setup.

npm install -D @vitest/browser playwright  # ~300MB (Chromium 1개)

// Add browser project to vitest.config.ts
export default defineConfig({
  test: {
// Maintain existing node tests
    include: ['src/**/*.test.ts'],
  },
// Browser testing can be separated into a separate workspace
});

Pros: Vitest integration, reuse of existing settings, minimal dependencies

6.2 Playwright (previously used)

This is when you need a full-stack E2E framework.

npm install -D @playwright/test # + browser ~1GB
npx playwright install chromium

Pros: 3 browsers, powerful debugging, trace/video capture

6.3 Cypress

This is the preferred alternative for front-end teams.

npm install -D cypress  # ~500MB

Advantages: Real-time reload, intuitive UI, Time Travel debugging

---

7. Full list of data-testid

The test ID currently set in the dashboard.

Main dashboard

NLOps Chat