‏Vitest یه Trace View دیباگ‌محور بهت می‌ده

Vitest یه ویژگی تجربی جدید به اسم browser.traceView معرفی کرده که مخصوص دیباگ کردن تست‌های مرورگریه. این قابلیت هر اکشن، assertion و رویداد چرخهٔ عمر تست رو به شکل DOM snapshot ضبط می‌کنه و بهت اجازه می‌ده بعد از تموم شدن تست، قدم به قدم برگردی و ببینی دقیقاً چی شده - حتی برای تست‌هایی که فیل شدن یا retry خوردن.

نکتهٔ مهم اینه که traceView جایگزین چیزی نمی‌شه، فقط بهش اضافه می‌شه. می‌تونی همزمان با نمای زندهٔ مرورگر کار کنی، یا با یه مرورگر headless و Vitest UI بری جلو، یا از گزارش HTML توی CI استفاده کنی. فعال کردنش هم ساده‌ست:

export default defineConfig({
  test: { browser: { traceView: true } },
})

ویووِر دو تا پنل داره: یه لیست از تمام قدم‌ها (کلیک، fill، assertion و...) سمت چپ، و یه بازسازی از DOM صفحه توی هر قدم سمت راست. رو هر قدم که کلیک کنی، اگه محل سورسش مشخص باشه، توی تب Editor هم باز می‌شه.

این ویژگی با browser.trace که مخصوص Playwrightه فرق داره؛ traceView رو فرمت rrweb کار می‌کنه و رو همهٔ providerها در دسترسه، در حالی که trace مخصوص پلی‌رایته و به ابزار جدا نیاز داره. هر دو رو می‌شه همزمان روشن کرد.

برای دقت بیشتر، دو تا آپشن اضافه هم هست: inlineImages عکس‌های داخل رو توی خود snapshot ذخیره می‌کنه تا گزارش HTML وابسته به لینک بیرونی نباشه، و recordCanvas پیکسل‌های canvas رو ضبط می‌کنه، هرچند یه replay کامل از ترسیم canvas یا WebGL نیست.

نکات کلیدی:

• قابلیت browser.traceView از نسخهٔ 5.0.0+ ویتست به‌صورت تجربی اضافه شده
• روی هر سه provider (playwright، webdriverio، preview) کار می‌کنه، برخلاف browser.trace که فقط مخصوص Playwright بود
• ویووِر رو می‌شه از browser UI، Vitest UI یا گزارش HTML باز کرد
• گزینه‌های inlineImages و recordCanvas برای پرتابل‌تر شدن گزارش و دیدن محتوای canvas اضافه شدن، ولی محدودیت‌هایی مثل عدم پشتیبانی از فونت و بک‌گراند CSS دارن