یک چک‌لیست کاربردی برای تست چند مرورگری (Cross-Browser Testing)

ممکن است یک چیدمان (layout) در Chrome عالی به نظر برسد، اما در یک گوشی اندرویدی ارزان‌قیمت یا یک لپ‌تاپ قدیمی با زوم ۱۲۵٪ به‌هم بریزد.

با تست کردن به عنوان یک مرحله نهایی و مبهم برخورد نکنید. با آن مانند یک چک‌لیست تکرارپذیر رفتار کنید.

تست کردن تمام دستگاه‌ها و تمام مرورگرها وقت تلف کردن است. در عوض، به یک ماتریس سبک (lean matrix) نیاز دارید.

این موارد ضروری را انتخاب کنید:

  • یک مرورگر Chromium در دسکتاپ
  • یک محیط Safari
  • یک محیط Firefox
  • یک گوشی اندرویدی
  • یک iPhone

تست‌های خود را بر اساس نحوه استفاده واقعی کاربران از محصولتان تنظیم کنید. لازم نیست یک صفحه در همه جا کاملاً یکسان به نظر برسد؛ بلکه باید کاربردی، خوانا و پایدار باقی بماند.

چک‌لیست خود را کوتاه نگه دارید. اگر اجرای آن نیم روز طول بکشد، تیم شما از آن صرف‌نظر خواهد کرد. یک بررسی سریع یک‌ساعته بهتر است.

با ساختار شروع کنید:

  • صفحه اصلی، صفحات محتوا و فرم‌ها را بررسی کنید.
  • اندازه صفحه را از دسکتاپ عریض به عرض‌های باریک موبایل تغییر دهید.
  • زوم کنید تا از شکستن خط دکمه‌ها یا بریده شدن تیترها مطمئن شوید.
  • مراقب اسکرول افقی یا هدرهای چسبان (sticky headers) که محتوا را می‌پوشانند، باشید.

سپس، تعاملات را تست کنید:

  • از بالا به پایین اسکرول کنید.
  • منوها را باز کنید و مودال‌ها (modals) را فعال کنید.
  • با استفاده از کیبورد، با کلید Tab در صفحه جابه‌جا شوید.
  • فرم‌ها را با ورودی‌های متنی، انتخاب‌گرهای تاریخ (date pickers) و آپلود فایل تست کنید.
  • بررسی کنید که آیا قابلیت پر کردن خودکار (autofill) چیدمان شما را به‌هم می‌ریزد یا خیر.

کامپوننت‌های JavaScript را تست کنید:

  • آکاردئون‌ها، تب‌ها و پیشنهادات جستجو را بررسی کنید.
  • مراقب مشکلات زمانی باشید، جایی که یک اسکریپت در اتصال به یک دکمه شکست می‌خورد.
  • بارگذاری مجدد صفحه و رفتار دکمه بازگشت را تست کنید.

در نهایت، محدودیت‌ها را تحت تست فشار (stress test) قرار دهید:

  • سرعت شبکه خود را محدود (throttle) کنید.
  • کش (cache) خود را غیرفعال کنید.
  • از رشته‌های متنی طولانی در فیلدهای ورودی استفاده کنید.
  • بررسی کنید که جداول بزرگ یا تعداد زیاد کارت‌ها چه تأثیری بر چیدمان دارند.

بهترین چک‌لیست، خسته‌کننده است. این چک‌لیست باید با کادرهای ساده‌ی «قبول» یا «رد»، در فرآیند انتشار (release) شما جای بگیرد.

هر بار که باگی به محیط عملیاتی (production) نفوذ می‌کند، آن را به لیست خود اضافه کنید. ارزش یک چک‌لیست زمانی مشخص می‌شود که آنچه تیم شما فراموش کرده است را به یاد بیاورد.

منبع: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a