115 lines
12 KiB
Markdown
115 lines
12 KiB
Markdown
# مشخصات درس‌نامه: بررسی خروجی، تست دستی و چک‌لیست تضمین کیفیت (QA Checklist)
|
||
- **شناسه در سیلابس:** `L9.4`
|
||
- **فصل:** فصل ۹: تست و Debugging (Ch 9)
|
||
- **نوع محتوا:** 📘 درس‌نامه متنی
|
||
- **زمان تقریبی مطالعه:** ۱۵ دقیقه
|
||
- **پیش‌نیازهای مستقیم:** `L9.3` (انواع تست و اهمیت آن‌ها)
|
||
|
||
---
|
||
|
||
## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
|
||
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
|
||
- [ ] **درک کند (Understand):** چرا تست‌های خودکار سبز (Automated Tests) هرگز کافی نیستند و چرا بررسی چشمی، تست دستی اکتشافی (Exploratory Testing) و بازبینی خط‌به‌خط تغییرات (Diff Review) آخرین سنگر دفاعی محصول هستند.
|
||
- [ ] **تحلیل/ارزیابی کند (Evaluate):** تغییرات کدی که ایجنت در فایل‌های پروژه ایجاد کرده است را با مهارت Code Review غیربرنامه‌نویسی (بررسی کدهای اضافه، پکیج‌های مخفی، کلیدهای هاردکد شده و کامپوننت‌های دست‌نخورده) ارزیابی کند.
|
||
- [ ] **به‌کار ببندد (Apply):** چک‌لیست جامع تضمین کیفیت (QA Checklist) ۱۰ مرحله‌ای شامل: اعتبارسنجی فرم‌ها، سناریوهای مرزی (Edge Cases)، وضعیت‌های خطا، رفتار در صفحات کوچک موبایل، وضعیت بدون اینترنت و رندر فونت‌های فارسی را روی پورتفولیوی شخصی اجرا کند.
|
||
- [ ] **ایجاد کند (Create):** یک پرامپت استاندارد گزارش تست دستی به همراه اسکرین‌شات و شرح گام‌به‌گام بازتولید باگ (Reproduction Steps) تدوین کند تا ایجنت مشکل را در اولین تلاش رفع کند.
|
||
|
||
---
|
||
|
||
## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)
|
||
|
||
### آنچه باید پوشش داده شود (In-Scope):
|
||
1. **تفاوت تست خودکار و احساس کاربر واقعی:**
|
||
* کامپیوترها منطق شرط‌ها را می‌سنجند، اما چشم انسان ناهماهنگی چیدمان، شکستن خط متن، دکمه‌های ناخوانا و حس بد کاربر را درک می‌کند.
|
||
2. **هنر Code Review بدون نیاز به تسلط بر نحو برنامه‌نویسی:**
|
||
* خواندن Git Diff در Cursor و VS Code: آیا فقط فایل‌های مرتبط تغییر کرده‌اند؟
|
||
* شناسایی «کدهای سرگردان و فراموش‌شده» (Ghost Code / Hallucinated Imports).
|
||
* کشف کلیدهای محرمانه و توکن‌هایی که ممکن است ناخواسته داخل کامپوننت‌ها نوشته شده باشند.
|
||
3. **چک‌لیست ۱۰ گانه QA برای وایب کدرها:**
|
||
* ۱. تست مسیرهای بحرانی (Happy Path): لاگین ادمین، ثبت پروژه، ذخیره تنظیمات سئو.
|
||
* ۲. تست ورودی‌های مخرب و غیرمعمول (Edge Cases): فیلدهای بسیار طولانی، کاراکترهای ایموجی، متن خالی و لینک‌های نامعتبر.
|
||
* ۳. تست نمایش در موبایل واقعی و صفحات باریک (۳۲۰ تا ۳۹۰ پیکسل).
|
||
* ۴. بررسی تایپوگرافی فارسی و راست‌چین (RTL) در تمام فرم‌ها و خطاها.
|
||
* ۵. تست وضعیت‌های شبکه: قطع اتصال، اینترنت کند و خطاهای سرور.
|
||
* ۶. چک کردن مسیرهای ناموجود (صفحه ۴۰۴ اختصاصی).
|
||
* ۷. تست دسترسی‌پذیری سریع (فوکوس با کلید Tab روی دکمه‌ها و فرم‌ها).
|
||
* ۸. تست خروج از سیستم (Logout) و پاک شدن سشن‌ها.
|
||
* ۹. بازبینی کنسول مرورگر برای نبود هشدارهای زرد و خطاهای قرمز (Hydration Errors).
|
||
* ۱۰. تست کش مرورگر و رفرش سخت (Hard Reload).
|
||
4. **جعبه پرامپت طلایی گزارش باگ به ایجنت:**
|
||
* فرمول گزارش باگ: «رفتار مورد انتظار (Expected) + رفتار واقعی رخ داده (Actual) + گام‌های بازتولید (Steps) + اسکرین‌شات یا خطای کنسول».
|
||
5. **دستورات چندسکویی برای بررسی پروژه و ساخت Build تست:**
|
||
* اجرای تست ساخت کامل (`npm run build`) برای کشف خطاهای زمان کامپایل قبل از تست دستی.
|
||
6. **کال‌اوت‌های آموزشی و هشدار کوئرا:**
|
||
* کال‌اوت بنفش (`<details class="violet">`): مفهوم تست اکتشافی (Monkey Testing / Exploratory Testing).
|
||
* کال‌اوت سبز (`<details class="green">`): توصیه به تست با گوشی واقعی به جای شبیه‌ساز مرورگر.
|
||
* کال‌اوت قرمز (`<details class="red">`): تله «تأیید کورکورانه تغییرات ایجنت» (Accept All بدون دیدن Diff).
|
||
|
||
### آنچه نباید وارد آن شویم (Out-of-Scope):
|
||
- مباحث تکنیکال تست نفوذ امنیتی SQL Injection و XSS پیشرفته (فصل ۱۱).
|
||
- ابزارهای تحلیل رفتار کاربر مانند Hotjar و مانیتورینگ آنلاین لاگ‌های سرور بعد از دیپلوی (فصل ۱۳).
|
||
|
||
---
|
||
|
||
## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
|
||
|
||
| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
|
||
| :--- | :--- | :--- |
|
||
| Code Review | بازبینی کد | بررسی دقیق تغییرات پیش از اعمال در شاخه اصلی پروژه برای کشف باگ و خطای ناخواسته |
|
||
| Git Diff | نمایش تفاوت کدها | ابزار بصری مقایسه نسخه قبلی و تغییرات جدید با رنگ سبز (اضافه) و قرمز (حذف) |
|
||
| Exploratory Testing | تست اکتشافی | آزمودن آزادانه نرم‌افزار توسط انسان برای پیدا کردن رفتارهای غیرمنتظره و عجیب |
|
||
| Edge Case | حالت حدی و نامتعارف | شرایط استثنایی یا ورودی‌های غیرمعمول که معمولاً در سناریوهای عادی تست از قلم می‌افتند |
|
||
| Reproduction Steps | گام‌های بازتولید خطا | مراحل ترتیبی و گام‌به‌گامی که هر فرد برای تکرار دقیق باگ در سیستم باید طی کند |
|
||
| Blind Acceptance | پذیرش کورکورانه | خطای رایج زدن دکمه «قبول همه تغییرات» ایجنت بدون خواندن فایل‌های دستکاری‌شده |
|
||
|
||
---
|
||
|
||
## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
|
||
> **راهنمای ایجنت نویسنده:** تصاویر باید در پوشهٔ `images/` ذخیره شده و در جدول تک‌خانه‌ای قرار گیرند:
|
||
|
||
1. **تصویر کاور درس:** `images/cover.png`
|
||
* **موضوع:** کاربری با ذره‌بین دیجیتال در حال بررسی کدهای پروژه روی یک تبلت و تیک زدن چک‌لیست تضمین کیفیت.
|
||
2. **پنجره بازبینی Diff در ادیتور:** `images/git-diff-inspection.png`
|
||
* **موضوع:** نمایش خطوط قرمز (حذف‌شده) و سبز (اضافه‌شده) در ابزار کامپوزر Cursor با نشانه‌گذاری کدهای خطرناک یا اضافه.
|
||
3. **اینفوگرافیک چک‌لیست ۱۰ مرحله‌ای QA:** `images/qa-checklist-infographic.png`
|
||
* **موضوع:** طراحی بصری ۱۰ گام بازرسی طلایی با آیکون‌های فرم، موبایل، شبکه، کنسول و سشن ادمین.
|
||
4. **گزارش باگ سیستماتیک در گفتگو با ایجنت:** `images/structured-bug-report-prompt.png`
|
||
* **موضوع:** چت‌باکس ادیتور که گزارش منظم خطا با فرمت ۴ مرحله‌ای به ایجنت ارائه شده و ایجنت در حال اصلاح دقیق است.
|
||
|
||
---
|
||
|
||
## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)
|
||
|
||
1. **تیتر اصلی:** `# بررسی خروجی، تست دستی و چک‌لیست تضمین کیفیت (QA Checklist)`
|
||
2. **مقدمه:** ایجنت می‌گوید «کار تمام شد و تست‌ها سبز است!»؛ اما آیا پروژه واقعاً در دستان کاربر کار می‌کند؟
|
||
3. **جدول کاور درس**
|
||
4. **استعاره بازرس ساختمان در برابر کارگران ساختمانی:**
|
||
* بناها آجرها را می‌چینند، اما بازرس با چک‌لیست لوله‌کشی، برق، فشار آب و ارگونومی درها را بررسی می‌کند. شما بازرس کل پروژه خود هستید.
|
||
5. **مهارت بازبینی کد (Code Review) برای افراد غیربرنامه‌نویس:**
|
||
* سه سؤالی که هنگام دیدن Git Diff باید بپرسید:
|
||
1. آیا فایلی که ربطی به این تسک ندارد تغییر کرده است؟
|
||
2. آیا پکیج عجیب یا خط کدی با کامنت‌های عجیب اضافه شده؟
|
||
3. آیا کد کارآمد قبلی تصادفاً پاک یا ساده‌سازی نشده است؟
|
||
6. **چک‌لیست ۱۰ گانه QA برای وایب کدرها (با تمرکز روی پروژه پورتفولیو):**
|
||
* شرح گام‌به‌گام تست هر بخش: فرم لاگین ادمین، ثبت مشخصات، اعتبارسنجی ارقام، وضعیت بدون نت، و رسپانسیو بودن.
|
||
7. **باکس نکته Quera (`<details class="violet">`):** تست اکتشافی و تکنیک «میمون بازیگوش» (تایپ کاراکترهای عجیب و غریب و کلیک‌های پشت‌سرهم سریع روی دکمه‌ها).
|
||
8. **دستورات چندسکویی ساخت تست پروداکشن قبل از QA:**
|
||
* اجرای Build پروژه برای اطمینان از عدم وجود خطای تایپ یا ایمپورت ناقص.
|
||
* منوی کشویی سه‌گانه برای ویندوز، مک و لینوکس:
|
||
- Windows (PowerShell): `npm run build`
|
||
- macOS (Terminal): `npm run build`
|
||
- Linux (Bash): `npm run build`
|
||
9. **جعبه پرامپت طلایی: انتقال گزارش باگ به ایجنت بدون افتادن در سردرگمی:**
|
||
* ساختار قالب گزارش باگ برای ایجنت.
|
||
10. **باکس هشدار Quera (`<details class="red">`):** خطای پذیرش کورکورانه (Blind Accept)؛ هرگز بدون بازبینی سریع تغییرات فایل‌ها، کد را تحویل نگیرید.
|
||
11. **باکس رضایت‌بخش Quera (`<details class="green">`):** تست روی موبایل واقعی از طریق هات‌اسپات و آی‌پی لوکال؛ تجربه‌ای که هیچ شبیه‌سازی جای آن را نمی‌گیرد.
|
||
12. **جمع‌بندی درس‌نامه:** تثبیت چک‌لیست بازبینی و آماده‌سازی برای ورود به جهان دیباگ تخصصی و خواندن پیام‌های خطا در درس بعد.
|
||
|
||
---
|
||
|
||
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||
- [ ] روش بازبینی Git Diff به صورت کاربردی برای افراد غیر فنی تشریح شده باشد.
|
||
- [ ] چک‌لیست ۱۰ مرحله‌ای QA با مثال‌های مستقیم از پروژه پورتفولیو ارائه گردد.
|
||
- [ ] ساختار ۴ مرحله‌ای گزارش باگ به ایجنت به همراه پرامپت نمونه آماده کپی گنجانده شود.
|
||
- [ ] دستورات اجرای بیلد چندسکویی در تب‌های کشویی ویندوز، مک و لینوکس درج شده باشد.
|