# JSON Formatter snapshot QA

วันที่ตรวจ: 2026-08-27

## Desktop ภาษาไทย

หน้า `/tools/json` โหลดสำเร็จบน local preview ที่ viewport ประมาณ 893×772 และไม่มีปัญหาการ render ที่สังเกตได้จาก screenshot. ข้อความ privacy ระบุชัดว่า processing อยู่ใน browser และข้อมูลไม่ถูกอัปโหลด. แผง `บันทึกงานในเครื่อง` แสดงชื่อ snapshot, usage และรายการ named snapshot ได้จริง.

ทดสอบกรอก JSON `{\"hello\":\"world\",\"nested\":{\"ok\":true}}`, ตั้งชื่อ `QA desktop snapshot` และกด `บันทึก snapshot`; UI แสดง `1 รายการ · 38 B`, รายการชื่อ snapshot พร้อมเวลา/ขนาด, ปุ่ม `กู้คืน`, `ทำสำเนา`, `ลบ` และ toast `บันทึก snapshot แล้ว`. ไอคอน tool header และปุ่มหลักแสดงผลได้ ไม่พบ broken icon หรือ horizontal overflow จาก screenshot นี้.

## ข้อสังเกต

ปุ่ม action ของ snapshot ปรากฏหลังบันทึกและใช้งานได้จาก automated UI regression. ต้องตรวจซ้ำภาษาอังกฤษและ mobile ต่อ รวมถึงล้างข้อมูล QA ใน browser context ก่อนสรุปผล.

## Mobile visual inspection

สร้าง screenshot ที่ 390×844 ทั้งภาษาไทยและอังกฤษ. ทั้งสอง locale ผ่าน no-overflow และมี snapshot controls/privacy disclosure ครบ. ลำดับ layout เป็น single-column ตามคาด และแผง snapshot จัดเรียง input ต่อด้วยปุ่มบันทึกเต็มแถว เหมาะกับการแตะบนมือถือ.

พบข้อสังเกตจาก first-visit state: กล่อง `Privacy settings` และการ์ด `New tools are being added` เป็น transient overlays ที่ซ้อนกันบริเวณล่างจอและบังส่วนหนึ่งของ editor; ไม่ใช่ปัญหา snapshot panel หรือ horizontal overflow. ควรพิจารณาปรับ stacking/spacing ของ onboarding และ consent banners ใน UX pass ถัดไป โดยไม่เปลี่ยนพฤติกรรม consent/privacy.

## DOM measurement ของ overlay

ตรวจ DOM บน preview พบว่า beta notice และ consent banner ใช้ตำแหน่ง fixed bottom เดียวกัน: beta notice สูงประมาณ 114.6px และ consent banner สูงประมาณ 136.2px โดยมี overlap ประมาณ 114.6px. จึงยืนยันว่าข้อสังเกตจาก mobile screenshot เป็นการซ้อนจริง ไม่ใช่เพียงภาพหลอกตา. การปรับที่เหมาะสมคือเลื่อน beta notice ขึ้นเมื่อ consent banner ยังแสดง โดยคง z-index/logic ของ consent เดิม.

## Shared capability details QA

ขยาย contract เป็น schema v2 และสร้าง shared panel ใต้ standalone tool ทุกหน้า โดย panel แสดงสถานะ local/network, capability chips, accepted inputs, file-size limit, privacy note และข้อจำกัดจาก i18n. Contract validator ผ่าน catalog 159/159; metadata ระบุ `needsNetwork` เฉพาะ `bg-remover`, `diagram` และ `excel-chat`.

Focused browser QA ผ่าน 34/34 checks สำหรับ JSON ไทย/อังกฤษ, Batch Text อังกฤษ, Background Remover อังกฤษ, Diagram ไทย และ Excel Chat อังกฤษ. ตรวจ title/label สองภาษา, privacy copy, `.txt`/5 MB ของ Batch Text, `.xlsx` ของ Excel Chat และ first-use network/model disclosure ของ network-dependent tools.