از Protractor

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

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

راه‌اندازی

API های Protractor و WebdriverIO در واقع بسیار شبیه به هم هستند، تا جایی که اکثر دستورات را می‌توان به صورت خودکار از طریق codemod بازنویسی کرد.

برای نصب codemod، اجرا کنید:

npm install jscodeshift @wdio/codemod

استراتژی

استراتژی‌های مهاجرت متعددی وجود دارد. بسته به اندازه تیم، تعداد فایل‌های تست و فوریت مهاجرت، می‌توانید سعی کنید همه تست‌ها را یکباره یا فایل به فایل تبدیل کنید. با توجه به اینکه Protractor تا نسخه 15 Angular (پایان 2022) همچنان پشتیبانی خواهد شد، شما هنوز زمان کافی دارید. می‌توانید تست‌های Protractor و WebdriverIO را همزمان اجرا کنید و شروع به نوشتن تست‌های جدید در WebdriverIO کنید. با توجه به بودجه زمانی خود، می‌توانید ابتدا تست‌های مهم را مهاجرت دهید و به تدریج به سمت تست‌هایی که حتی ممکن است بتوانید حذف کنید پیش بروید.

ابتدا فایل پیکربندی

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

برای اولین مهاجرت، فقط فایل پیکربندی را تبدیل می‌کنیم و اجرا می‌کنیم:

npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./conf.ts

اطلاعات

نام پیکربندی شما ممکن است متفاوت باشد، اما اصل باید یکسان باشد: ابتدا مهاجرت پیکربندی را شروع کنید.

نصب وابستگی‌های WebdriverIO

مرحله بعدی پیکربندی یک تنظیم حداقلی WebdriverIO است که ما شروع به ساخت آن می‌کنیم همزمان با مهاجرت از یک چارچوب به چارچوب دیگر. ابتدا CLI WebdriverIO را نصب می‌کنیم:

npm install --save-dev @wdio/cli

سپس برنامه پیکربندی را اجرا می‌کنیم:

npx wdio config

این شما را از چند سؤال عبور می‌دهد. برای این سناریوی مهاجرت:

• انتخاب‌های پیش‌فرض را انتخاب کنید
• ما توصیه می‌کنیم فایل‌های نمونه را به طور خودکار تولید نکنید
• پوشه متفاوتی برای فایل‌های WebdriverIO انتخاب کنید
• و Mocha را به جای Jasmine انتخاب کنید.

چرا Mocha؟

حتی اگر قبلاً از Protractor با Jasmine استفاده می‌کردید، Mocha مکانیسم‌های تکرار بهتری ارائه می‌دهد. انتخاب با شماست!

پس از پرسشنامه کوتاه، برنامه تمام بسته‌های ضروری را نصب کرده و آنها را در package.json شما ذخیره می‌کند.

مهاجرت فایل پیکربندی

پس از تبدیل conf.ts و ایجاد wdio.conf.ts جدید، اکنون زمان آن است که پیکربندی را از یک فایل به فایل دیگر مهاجرت دهیم. مطمئن شوید که فقط کدهایی را منتقل می‌کنید که برای اجرای همه تست‌ها ضروری هستند. در مورد ما، توابع hook و زمان‌بندی چارچوب را منتقل می‌کنیم.

ما اکنون فقط با فایل wdio.conf.ts خود ادامه می‌دهیم و بنابراین نیازی به تغییرات در پیکربندی اصلی Protractor نداریم. می‌توانیم آن را بازگردانیم تا هر دو چارچوب بتوانند در کنار هم اجرا شوند و ما بتوانیم یک فایل در یک زمان را منتقل کنیم.

مهاجرت فایل تست

اکنون آماده‌ایم تا اولین فایل تست را منتقل کنیم. برای شروع ساده، با فایلی شروع کنیم که وابستگی‌های زیادی به بسته‌های شخص ثالث یا فایل‌های دیگر مانند PageObjects ندارد. در مثال ما، اولین فایل برای مهاجرت first-test.spec.ts است. ابتدا دایرکتوری را ایجاد کنید که پیکربندی جدید WebdriverIO انتظار دارد فایل‌های خود را در آن قرار دهد و سپس آن را منتقل کنید:

mv mkdir -p ./test/specs/
mv test-suites/first-test.spec.ts ./test/specs

حالا بیایید این فایل را تبدیل کنیم:

npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./test/specs/first-test.spec.ts

همین! این فایل آنقدر ساده است که دیگر نیازی به تغییرات اضافی نداریم و می‌توانیم مستقیماً WebdriverIO را از طریق:

npx wdio run wdio.conf.ts

تبریک می‌گوییم 🥳 شما اولین فایل را مهاجرت دادید!

گام‌های بعدی

از این نقطه شما به تبدیل تست به تست و page object به page object ادامه می‌دهید. احتمال دارد که codemod برای برخی فایل‌ها با خطایی مانند:

ERR /path/to/project/test/testdata/failing_submit.js Transformation error (Error transforming /test/testdata/failing_submit.js:2)
Error transforming /test/testdata/failing_submit.js:2

> login_form.submit()
  ^

The command "submit" is not supported in WebdriverIO. We advise to use the click command to click on the submit button instead. For more information on this configuration, see https://webdriver.io/docs/api/element/click.
  at /path/to/project/test/testdata/failing_submit.js:132:0

برای برخی از دستورات Protractor، جایگزینی در WebdriverIO وجود ندارد. در این صورت codemod به شما توصیه‌هایی برای بازسازی آن ارائه می‌دهد. اگر خیلی با چنین پیام‌های خطایی مواجه می‌شوید، راحت باشید و یک مسئله مطرح کنید و درخواست کنید که یک تبدیل خاص اضافه شود. در حالی که codemod در حال حاضر اکثر API های Protractor را تبدیل می‌کند، هنوز جای پیشرفت زیادی وجود دارد.

نتیجه‌گیری

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