تست چیدمان بصری کارآمد با ابزارهای توسعه دهنده کروم

یک تست کننده وب، علاوه بر تست عملکرد، با بررسی های غیرعملکردی مختلفی مانند تست UI، تست قابلیت استفاده، تست عملکرد و غیره روبرو می شود. یکی از جنبه های مهم تست رابط وب، بررسی طرح بندی صفحات وب است. در این صورت ما نه تنها ظاهر صفحه را بررسی می کنیم، بلکه مطابقت آن با طراحی، نمایش انیمیشن ها و سایر جنبه هایی که ممکن است بر تجربه کاربر تأثیر بگذارد را نیز بررسی می کنیم.

البته هر آزمایش کننده ای با ابزارهای توسعه دهنده آشنایی دارد و آن ها را در کار خود به کار می گیرد. با این حال، همه نمی دانند که ابزارهای توسعه دهنده می توانند ویژگی های اضافی را ارائه دهند که می تواند آزمایش را به طور قابل توجهی ساده کند. در این مقاله، ما بر روی ابزارهای توسعه‌دهنده کروم تمرکز می‌کنیم و برخی از ترفندهای مفید را بررسی می‌کنیم که به شما کمک می‌کند به راحتی طرح‌بندی را بررسی کنید و نتایج دقیق‌تری کسب کنید.

تست رنگ ها

چگونه می توانیم بررسی کنیم که رنگ های یک صفحه وب با راهنمای سبک مطابقت دارند؟ چگونه می توانیم رنگ هایی را که به طرح احترام نمی گذارند شناسایی کنیم؟ البته، شما می توانید به چشمان خود تکیه کنید، می توانید هر عنصر را بررسی کنید و به ویژگی های CSS آن نگاه کنید، اما یک راه ساده تر برای کشف تمام رنگ های استفاده شده در صفحه وجود دارد – پانل CSS Overview. این یک ویژگی جدید است که هنوز در حالت پیش نمایش است که به شما امکان می دهد آن را به عنوان یک کاربر آزمایش کنید و بازخورد ارائه دهید.

از دو طریق می توانید به پنل دسترسی داشته باشید:

• از طریق منوی کباب (سفارشی کردن و کنترل DevTools) → ابزارهای بیشتر → نمای کلی Css
• از طریق منوی فرمان → نمایش نمای کلی CSS

علاوه بر اطلاعات دیگر، این پنل اطلاعات مربوط به تمام رنگ های صفحه را ارائه می دهد. رنگ ها بر اساس نوع (پس زمینه، رنگ متن، رنگ حاشیه و غیره) گروه بندی می شوند. با کلیک بر روی هر رنگ، لیستی از عناصری که در آن رنگ استفاده می شود، نمایش داده می شود. نگه داشتن ماوس روی یک عنصر از لیست، آن را در صفحه برجسته می کند. همچنین اطلاعاتی در مورد ترکیبات کم کنتراست وجود دارد که برای تست دسترسی مهم است.

هنگام بررسی عناصر جداگانه، می‌توانیم ببینیم که رنگ در قالب‌های مختلف – HEX، RGB، HSL نمایش داده می‌شود. برای به دست آوردن سریع فرمت مورد نظر برای تأیید، کلید Shift را نگه دارید و روی نماد رنگ کلیک کنید. در نتیجه، لیستی از نمایش رنگ ها را در قالب های مختلف دریافت خواهید کرد – به سرعت و به راحتی بدون کلیک اضافی برای باز کردن پانل رنگ.

تست فونت

چالش دیگر در طول آزمایش صفحات وب این است که چگونه مطمئن شویم که همه فونت ها با طراحی مطابقت دارند؟ ساده ترین راه برای انجام این کار استفاده مجدد از پنل CSS Overview است. این پنل همچنین اطلاعاتی در مورد تمام فونت های استفاده شده در صفحه ارائه می دهد. این کار شناسایی فونت‌هایی را که به راهنمای سبک مطابقت ندارند، تعیین عناصری که از آنها استفاده می‌کنند و گزارش‌های اشکال بر اساس این اطلاعات را آسان می‌کند. عملکرد یکسان است – با کلیک بر روی فونت، عناصر را با آن دریافت می کنیم و با نگه داشتن ماوس روی عنصر، عنصر مربوطه در صفحه برجسته می شود.

تست پاپ آپ

یکی از مشکلات رایج در تست بصری نحوه آزمایش عناصر پاپ آپی است که به صورت پویا در صفحه نمایش داده می شوند. به خصوص اگر اشکالی در آنها وجود داشته باشد و باید آن را با پیوست کردن یک اسکرین شات مستند کنید. دو روش برای فریز کردن چنین عناصری برای آزمایش وجود دارد. روش اول شامل استفاده از یک دیباگر ویژه در عنصر والد است.

اگر برای شما دشوار است که دقیقاً در کجای درخت عنصر ظاهر شود، می توانید یک نقطه انفصال برای اصلاح کل تعیین کنید.

. به این ترتیب، هنگامی که عناصر پاپ آپ فعال می شوند، اجرای اسکریپت هایی که مسئول رندر آنها هستند متوقف می شود و به شما امکان می دهد تا زمانی که عنصر مورد نظر در صفحه ظاهر شود، گام بردارید. با این حال، این روش به دلیل چالش های تعیین عنصر والد و غیرقابل پیش بینی بودن تعداد مراحل اشکال زدایی مورد نیاز برای دستیابی به نتیجه مطلوب، می تواند برای آزمایش کنندگان پیچیده باشد.

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

 setTimeout('debugger', 5000)

Enter را فشار دهید، موفق شوید عنصر پاپ آپ را در عرض 5 ثانیه (5000 میلی ثانیه) فراخوانی کنید و آن را با آرامش تست کنید. من شخصاً این روش را ترجیح می دهم زیرا سریعتر و راحت تر است.

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

چه چیزی برای تستر از نظر عامل کاربر سایه DOM مهم است؟ درک این نکته ضروری است که رفتار و ظاهر عناصر User Agent Shadow DOM توسط فروشنده مرورگر کنترل می شود. در حالی که توسعه‌دهندگان می‌توانند با استفاده از CSS سبک‌های عناصر DOM را تا حدی تغییر دهند، مهم است که توجه داشته باشیم که هرگونه تغییر ایجاد شده ممکن است اثرات غیرقابل پیش‌بینی داشته باشد و ممکن است در مرورگرهای مختلف پشتیبانی نشود. بنابراین در بیشتر موارد، آزمایش‌کنندگان نباید اشکالات یا مسائل مربوط به سبک‌های محصور شده یا رفتار این عناصر را به تیم توسعه‌دهنده خود گزارش دهند، زیرا کنترل محدودی بر روی آنها دارند.

تست انیمیشن

هنگام تست طرح‌بندی، گهگاه با انیمیشن‌ها مواجه می‌شویم. چگونه می توانیم اطمینان حاصل کنیم که انیمیشن ها مطابق طراحی به درستی پخش می شوند؟ ابزار TDeveloper یک ابزار تخصصی برای اشکال زدایی انیمیشن ها ارائه می دهد. راحت‌ترین ویژگی برای یک آزمایش‌کننده در اینجا، توانایی کاهش سرعت انیمیشن‌ها است که امکان مشاهده دقیق پیشرفت آن‌ها را فراهم می‌کند تا هر گونه اشکالی را پیدا کند. علاوه بر این، می‌توان یک انیمیشن را متوقف کرد تا مشکلاتی که با آن مواجه می‌شوند گزارش شوند.

تست پاسخگویی

همانطور که ممکن است متوجه شده باشید CSS Overview شامل اطلاعات بیشتر از فونت ها و رنگ ها نیست. یکی دیگر از داده‌های ضروری که آزمایش‌کنندگان می‌توانند از این پانل به دست آورند، فهرست پرسش‌های رسانه‌ای است. پرسش رسانه ای چیست و چرا دانش برای آزمایشگر مهم است؟ پرس و جو رسانه ای یک قانون CSS است که به شما امکان می دهد سبک های عناصر را بر اساس مقادیر پارامترهای دستگاه فنی کنترل کنید، مانند عرض درگاه دید که اندازه گیری اساسی برای تست پاسخگویی است.

از اینجا، می‌توانیم مقادیر مرزی viewport‌هایی را که باید در تست پاسخ‌گویی گنجانده شوند، دریافت کنیم. با استفاده از تکنیک های طراحی آزمایشی مانند کلاس های هم ارزی و مقادیر مرزی برای مقادیر عرض صفحه در پرس و جوهای رسانه، می توان تعداد دستگاه های مورد نیاز برای بررسی پاسخگویی طرح بندی را کاهش داد.

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

جایزه! افزونه مفید کروم برای تست پاسخگویی

تست محتوای پویا

گاهی اوقات، هنگام آزمایش، نیاز به بررسی طرح‌بندی با متن‌های مختلف وجود دارد تا اطمینان حاصل شود که عناصر به صورت پویا بر اساس محتوا تغییر می‌کنند یا اینکه چیدمان در دستگاه‌های تلفن همراه ثابت می‌ماند. می‌توانیم داده‌های آزمایشی مناسب را برای این کار آماده کنیم، یا به سادگی می‌توانیم عنصر لازم را در درخت DOM با استفاده از بازرس پیدا کنیم و متن درون آن را جایگزین کنیم. با این حال، اگر چندین عنصر نیاز به تغییر وجود داشته باشد، بهتر است به حالت طراحی تغییر دهید. برای این کار دستور زیر را در کنسول تایپ کنید:

document.designMode = 'on' 

پس از فعال شدن، هر متنی در صفحه را می توان مستقیماً ویرایش کرد.

اسکرین شات برای گزارش های آزمایشی

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

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

نتیجه

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