تست کامپوننت

با Browser Runner وب‌درایور IO، شما می‌توانید تست‌ها را در مرورگر واقعی دسکتاپ یا موبایل اجرا کنید، در حالی که از WebdriverIO و پروتکل WebDriver برای اتوماسیون و تعامل با آنچه در صفحه رندر می‌شود، استفاده می‌کنید. این رویکرد مزایای بسیاری در مقایسه با چارچوب‌های تست دیگری که فقط امکان تست در برابر JSDOM را فراهم می‌کنند، دارد.

چگونه کار می‌کند؟

Browser Runner از Vite برای رندر صفحه تست و راه‌اندازی یک چارچوب تست برای اجرای تست‌های شما در مرورگر استفاده می‌کند. در حال حاضر فقط از Mocha پشتیبانی می‌کند اما Jasmine و Cucumber در نقشه راه قرار دارند. این امکان تست هر نوع کامپوننت را حتی برای پروژه‌هایی که از Vite استفاده نمی‌کنند، فراهم می‌کند.

سرور Vite توسط testrunner وب‌درایور IO راه‌اندازی می‌شود و به گونه‌ای پیکربندی شده است که می‌توانید از تمام گزارش‌دهنده‌ها و سرویس‌ها مانند تست‌های معمولی e2e استفاده کنید. علاوه بر این، یک نمونه browser را راه‌اندازی می‌کند که به شما امکان دسترسی به زیرمجموعه‌ای از API وب‌درایور IO برای تعامل با هر عنصر در صفحه را می‌دهد. مشابه تست‌های e2e، می‌توانید به آن نمونه از طریق متغیر browser متصل به دامنه جهانی یا با وارد کردن آن از @wdio/globals بسته به نحوه تنظیم injectGlobals دسترسی پیدا کنید.

WebdriverIO دارای پشتیبانی داخلی برای چارچوب‌های زیر است:

• Nuxt: testrunner وب‌درایور IO یک برنامه Nuxt را تشخیص می‌دهد و به طور خودکار composables پروژه شما را تنظیم می‌کند و به شبیه‌سازی backend Nuxt کمک می‌کند، اطلاعات بیشتر را در مستندات Nuxt بخوانید
• TailwindCSS: testrunner وب‌درایور IO تشخیص می‌دهد که آیا از TailwindCSS استفاده می‌کنید و محیط را به درستی در صفحه تست بارگذاری می‌کند

راه‌اندازی

برای تنظیم WebdriverIO برای تست واحد یا کامپوننت در مرورگر، یک پروژه جدید WebdriverIO را از طریق زیر ایجاد کنید:

npm init wdio@latest ./
# یا
yarn create wdio ./

پس از شروع ویزارد پیکربندی، browser را برای اجرای تست واحد و کامپوننت انتخاب کنید و یکی از پیش‌تنظیمات را انتخاب کنید یا اگر تمایل دارید فقط تست‌های واحد پایه را اجرا کنید، گزینه "Other" را انتخاب کنید. همچنین می‌توانید یک پیکربندی سفارشی Vite را در صورتی که قبلاً از Vite در پروژه خود استفاده می‌کنید، پیکربندی کنید. برای اطلاعات بیشتر، تمام گزینه‌های runner را بررسی کنید.

اطلاعات

نکته: WebdriverIO به طور پیش‌فرض تست‌های مرورگر را در CI به صورت headless اجرا می‌کند، به عنوان مثال، یک متغیر محیطی CI به مقدار '1' یا 'true' تنظیم شده است. می‌توانید این رفتار را با استفاده از گزینه headless برای runner به صورت دستی پیکربندی کنید.

در پایان این فرآیند، باید یک wdio.conf.js پیدا کنید که شامل پیکربندی‌های مختلف WebdriverIO است، از جمله یک ویژگی runner، به عنوان مثال:

wdio.comp.conf.js

loading...

View on GitHub

با تعریف قابلیت‌های مختلف، می‌توانید تست‌های خود را در مرورگرهای مختلف، به صورت موازی در صورت تمایل، اجرا کنید.

اگر هنوز مطمئن نیستید که همه چیز چگونه کار می‌کند، آموزش زیر را در مورد نحوه شروع با تست کامپوننت در WebdriverIO مشاهده کنید:

ابزارک تست

کاملاً به شما بستگی دارد که چه چیزی را در تست‌های خود اجرا کنید و چگونه می‌خواهید کامپوننت‌ها را رندر کنید. با این حال، ما توصیه می‌کنیم از Testing Library به عنوان چارچوب ابزار استفاده کنید زیرا پلاگین‌هایی برای چارچوب‌های مختلف کامپوننت مانند React، Preact، Svelte و Vue ارائه می‌دهد. این برای رندر کردن کامپوننت‌ها در صفحه تست بسیار مفید است و به طور خودکار این کامپوننت‌ها را پس از هر تست پاک می‌کند.

می‌توانید هر طور که می‌خواهید، ابتدایی‌های Testing Library را با دستورات WebdriverIO ترکیب کنید، مثلاً:

component-testing/svelte-example.js

loading...

View on GitHub

نکته: استفاده از متدهای رندر از Testing Library به حذف کامپوننت‌های ایجاد شده بین تست‌ها کمک می‌کند. اگر از Testing Library استفاده نمی‌کنید، مطمئن شوید که کامپوننت‌های تست خود را به یک کانتینر متصل کنید که بین تست‌ها پاک می‌شود.

اسکریپت‌های راه‌اندازی

می‌توانید تست‌های خود را با اجرای اسکریپت‌های دلخواه در Node.js یا در مرورگر تنظیم کنید، مثلاً تزریق استایل‌ها، شبیه‌سازی APIهای مرورگر یا اتصال به یک سرویس شخص ثالث. از هوک‌های WebdriverIO می‌توان برای اجرای کد در Node.js استفاده کرد در حالی که mochaOpts.require به شما امکان وارد کردن اسکریپت‌ها به مرورگر قبل از بارگذاری تست‌ها را می‌دهد، به عنوان مثال:

export const config = {
    // ...
    mochaOpts: {
        ui: 'tdd',
        // ارائه یک اسکریپت راه‌اندازی برای اجرا در مرورگر
        require: './__fixtures__/setup.js'
    },
    before: () => {
        // تنظیم محیط تست در Node.js
    }
    // ...
}

به عنوان مثال، اگر می‌خواهید تمام فراخوانی‌های fetch() را در تست خود با اسکریپت راه‌اندازی زیر شبیه‌سازی کنید:

import { fn } from '@wdio/browser-runner'

// اجرای کد قبل از بارگذاری همه تست‌ها
window.fetch = fn()

export const mochaGlobalSetup = () => {
    // اجرای کد پس از بارگذاری فایل تست
}

export const mochaGlobalTeardown = () => {
    // اجرای کد پس از اجرای فایل مشخصات
}

اکنون در تست‌های خود می‌توانید مقادیر پاسخ سفارشی برای تمام درخواست‌های مرورگر ارائه دهید. اطلاعات بیشتر در مورد فیکسچرهای جهانی را در مستندات Mocha بخوانید.

مشاهده فایل‌های تست و برنامه

روش‌های متعددی برای اشکال‌زدایی تست‌های مرورگر خود وجود دارد. ساده‌ترین راه، شروع testrunner WebdriverIO با پرچم --watch است، مثلاً:

$ npx wdio run ./wdio.conf.js --watch

این ابتدا تمام تست‌ها را اجرا می‌کند و پس از اجرای همه آنها متوقف می‌شود. سپس می‌توانید تغییراتی در فایل‌های فردی ایجاد کنید که سپس به صورت جداگانه دوباره اجرا خواهند شد. اگر filesToWatch را تنظیم کرده باشید که به فایل‌های برنامه شما اشاره می‌کند، هنگام ایجاد تغییرات در برنامه شما، تمام تست‌ها را مجدداً اجرا می‌کند.

اشکال‌زدایی

در حالی که (هنوز) امکان تعیین نقاط توقف در IDE شما و شناسایی آنها توسط مرورگر از راه دور وجود ندارد، می‌توانید از دستور debug برای توقف تست در هر نقطه استفاده کنید. این به شما امکان می‌دهد DevTools را باز کنید تا سپس با تعیین نقاط توقف در تب منابع تست را اشکال‌زدایی کنید.

زمانی که دستور debug فراخوانی می‌شود، همچنین یک رابط repl Node.js در ترمینال خود دریافت خواهید کرد که می‌گوید:

The execution has stopped!
You can now go into the browser or use the command line as REPL
(To exit, press ^C again or type .exit)

دکمه Ctrl یا Command + c را فشار دهید یا .exit را وارد کنید تا به تست ادامه دهید.

اجرا با استفاده از Selenium Grid

اگر یک Selenium Grid راه‌اندازی کرده‌اید و مرورگر خود را از طریق آن گرید اجرا می‌کنید، باید گزینه host browser runner را تنظیم کنید تا به مرورگر اجازه دهد به میزبان صحیحی که فایل‌های تست در آنجا قرار دارند، دسترسی داشته باشد، مثلاً:

export const config: WebdriverIO.Config = {
    runner: ['browser', {
        // آدرس IP شبکه دستگاهی که فرآیند WebdriverIO را اجرا می‌کند
        host: 'http://172.168.0.2'
    }]
}

این اطمینان حاصل می‌کند که مرورگر به درستی نمونه سرور درست را که در نمونه‌ای که تست‌های WebdriverIO را اجرا می‌کند، میزبانی شده است، باز می‌کند.

نمونه‌ها

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