سرو در مقابل نمایشنامه نویس برای گره: مقایسه سر به سر

آزمایش برنامه های کاربردی وب برای اطمینان از قابلیت اطمینان، عملکرد و تجربه کاربری خوب ضروری است. به همین دلیل است که چارچوب های تست قوی برای توسعه دهندگان وب بسیار مهم شده است. در میان انبوهی از ابزارهای موجود، Cypress و Playwright به عنوان دو مورد از محبوب‌ترین گزینه‌ها برای خودکارسازی تست سرتاسر ظاهر شده‌اند.

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

سرو یا نمایشنامه نویس؟ پیدا کنید که کدام به بهترین وجه با نیازهای شما مطابقت دارد!

مقدمه ای بر سرو و نمایشنامه نویس

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

زمان آن رسیده است که درک بهتری از دو چارچوب اتوماسیون مرورگر وب داشته باشید.

سرو چیست؟

Cypress یک فریم ورک آزمایشی مدرن، جلویی و سرتاسر است که برای برنامه های کاربردی وب ساخته شده است. این به شما امکان می‌دهد تست‌های کارآمد را بنویسید و نگهداری کنید، و می‌تواند آزمایش‌های نوشته شده با جاوا اسکریپت را مستقیماً در مرورگر اجرا کند. به عبارت دیگر، می‌تواند هر چیزی را که در مرورگر اجرا می‌شود آزمایش کرده و با آن تعامل داشته باشد. مخاطبین هدف این فناوری، توسعه دهندگان یا مهندسان QA هستند که با استفاده از چارچوب های جاوا اسکریپت مدرن، اپلیکیشن های وب می سازند.

انواع تست های پشتیبانی شده توسط Cypress عبارتند از:

• تست های پایانی: کل جریان مربوط به سناریوهای موردی کاربر در دنیای واقعی را اعتبارسنجی کنید.
• تست های مولفه: بررسی عملکرد اجزای UI منفرد به صورت مجزا.
• تست های یکپارچه سازی: اطمینان حاصل کنید که ماژول ها یا اجزای مختلف به طور یکپارچه با هم کار می کنند.
• تست های واحد: رفتار عملکردها یا روش‌ها را به صورت مجزا آزمایش کنید.

این تست ها چیزی بیش از فایل های جاوا اسکریپت نیستند که از دستور Mocha BDD پیروی می کنند و از Chai به عنوان موتور ادعا استفاده می کنند. Cypress دارای یک ابزار رابط کاربری گرافیکی محلی است که در Electron تعبیه شده است که راه‌اندازی، اجرا و اشکال‌زدایی تست‌ها را آسان‌تر می‌کند. از طرف دیگر، می‌توانید از Cypress CLI برای راه‌اندازی آزمایش‌ها بدون سر استفاده کنید. برای نوشتن منطق تست، به یک IDE جاوا اسکریپت نیاز دارید.

در اینجا برخی از آمار در مورد Cypress (به روز در زمان نوشتن):

• ستاره های GitHub: 45k+
• دانلودهای هفتگی npm: 4.8 متر +
• مشارکت کنندگان: بیش از 480 نفر
• انتشار اول: 10 سپتامبر 2017

نمایشنامه نویس چیست؟

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

به لطف API بصری و بسیاری از ویژگی‌های موجود، Playwright در جامعه فناوری اطلاعات محبوبیت زیادی به دست آورده است، حتی اگر از سال 2020 در دسترس بوده است. توسعه دهندگان وب اکنون از آن برای آزمایش و سایر کارهای اتوماسیون مرورگر، مانند خراش دادن وب استفاده می‌کنند. .

نمایشنامه‌نویس از تست سرتاسر، تست ادغام، تست واحد و حتی تست رگرسیون بصری پشتیبانی می‌کند. این شامل تشخیص و گزارش خودکار هر گونه تفاوت بصری یا اختلاف بین دو نسخه از یک برنامه وب است. زبان برنامه نویسی پیشنهادی پیش فرض Playwright TypeScript است، به این معنی که معمولاً اسکریپت های آزمایشی هستند .ts فایل ها.

در زمان نگارش، برخی از آمارهای کلیدی نمایشنامه‌نویس عبارتند از:

• ستاره های GitHub: 62k+
• دانلودهای هفتگی npm: 4.6 متر +
• مشارکت کنندگان: 500+
• انتشار اول: 31 ژانویه 2020

آنچه نمایشنامه نویس و سرو باید ارائه دهند

مقاله مقایسه Cypress و Playwright بدون فهرستی از ویژگی های ارائه شده توسط این دو ابزار کامل نخواهد بود.

سرو: ویژگی های اصلی

اینها مهمترین ویژگی های سرو عبارتند از:

• باتری های شامل: این فریم ورک همه چیز مورد نیاز برای نوشتن، اجرا و اشکال زدایی تست ها را بدون نیاز به نصب وابستگی های خارجی ارائه می دهد.
• تست بین مرورگرها: می‌توانید آزمایش‌ها را به صورت محلی در فایرفاکس و همه مرورگرهای خانواده Chrome (از جمله Chrome، Chromium، Brave، Edge و Electron) اجرا کنید.
• اشکال زدایی ساده: با تشکر مستقیماً در Developer Tools .debug() روش. Cypress همچنین خطاهای قابل خواندن و ردپای پشته ای را ارائه می دهد که به طور خاص برای تسهیل اشکال زدایی طراحی شده اند.
• انتظار خودکار: Cypress به طور خودکار منتظر یک بازه زمانی ثابت برای موفقیت آمیز بودن دستورات و ادعاها قبل از حرکت است. این به شما امکان می‌دهد از اضافه کردن دستورالعمل‌های خواب صریح به تست‌های خود اجتناب کنید، که باعث پوسته پوسته شدن آنها می‌شود.
• سفر در زمان: Cypress در حین اجرای آزمایش‌های شما، عکس‌های فوری می‌گیرد و آن‌ها را به گزارش فرمان اضافه می‌کند تا بتوانید بفهمید در هر مرحله چه اتفاقی می‌افتد.
• کنترل ترافیک شبکه: بدون تغییر منطق سرور خود، ترافیک شبکه محلی را کاهش دهید.
• اسکرین شات ها و فیلم ها: آزمایش‌های خود را برای تولید اسکرین‌شات یا فیلم‌های ضبط‌شده هنگام اجرا از CLI پیکربندی کنید.
• کنترل ساعت، زمان و تاریخ: زمان برنامه خود را تغییر دهید یا دستکاری کنید Date اشیاء، و setTimeout()، clearTimeout()، setInterval()، و clearInterval() کارکرد.
• جاسوسان کارکرد: مطمئن شوید که یک تابع با آرگومان های مناسب یا تعداد مشخصی بار فراخوانی شده است. همچنین می توانید بررسی کنید که یک تابع مقدار مورد انتظار را برمی گرداند و در زمینه مناسب فراخوانی می شود.
• قابل توسعه از طریق پلاگین ها: Cypress را می توان از طریق افزونه های توسعه یافته توسط انجمن گسترش داد.
• ابر سرو: یک پلتفرم آنلاین که قابلیت های اتوماسیون تست Cypress را با ارائه اجرای تست موازی، هماهنگ سازی هوشمند، تشخیص پوسته پوسته در خطوط لوله CI، پخش مجدد ویدئو و موارد دیگر افزایش می دهد.

نمایشنامه نویس: ویژگی های اصلی

اینها برخی از مفیدترین ویژگی های ارائه شده توسط Playwright هستند:

• پشتیبانی از مرورگرهای متقابل: Playwright امکان آزمایش در چندین مرورگر از جمله Chrome، Firefox، WebKit، Edge و همه مرورگرهای مبتنی بر Chromium را می‌دهد.
• موجود در چندین زبان برنامه نویسی: زبان پیش فرض پشتیبانی شده توسط Playwright TypeScript است. همچنین از پایتون، جاوا، سی شارپ و جاوا اسکریپت پشتیبانی می کند.
• اجرای آزمون موازی: به‌طور پیش‌فرض، Playwright برای بهبود عملکرد مجموعه آزمایشی و کاهش زمان کلی اجرای آزمایش‌ها را به صورت موازی اجرا می‌کند. برای موازی‌سازی حتی بیشتر، می‌توانید اجرای آزمایش را روی چندین ماشین نیز مقیاس‌بندی کنید.
• پسوند کد ویژوال استودیو برای اشکال زدایی: یک برنامه افزودنی اختصاصی برای اشکال‌زدایی تست‌های شما درست در Visual Studio Code، دیدن پیام‌های خطا، تعیین نقاط شکست و قدم در منطق تست شما.
• ویدئوها، اسکرین شات ها و مقایسه های بصری: ویدیوهای اجرای آزمایش را ضبط کنید، تصاویری از صفحه ایجاد کنید و تصاویر را به صورت بصری مقایسه کنید تا آزمایش رگرسیون بصری انجام شود.
• تولید تست خودکار: به ابزار اجازه دهید هنگام انجام اقداماتی در مرورگر، برای شما آزمایش هایی ایجاد کند.
• گزارشگران نتایج متفاوت: گزارشگری را تنظیم کنید که به بهترین وجه با نیازهای شما مطابقت دارد تا نتایج آزمایش را به صورت لیست، در HTML، به عنوان یک تصویر، در JSON و موارد دیگر تولید کند.
• رهگیری شبکه: درخواست‌های شبکه را برای شبیه‌سازی سناریوهای مختلف بدون نیاز به تغییر سرور خود، خرد و دستکاری کنید.
• شبیه سازی دستگاه: به لطف دستگاه های شبیه سازی شده، از جمله دستگاه های تلفن همراه، آزمایش را بدون نیاز به دستگاه های فیزیکی اجرا کنید.
• انتظار خودکار: نمایشنامه‌نویس به‌طور خودکار منتظر می‌ماند تا عناصر رابط کاربری آماده شوند، که نیاز به دستورات انتظار دستی را از بین می‌برد و پوسته پوسته شدن را کاهش می‌دهد.
• تعامل کامل با مرورگر: برای باز کردن برگه های جدید، پیمایش بین صفحات و مدیریت سوئیچ های زمینه، با مرورگر تعامل کنید. همچنین، می‌توانید APIهای آزمایشی مرورگر را مسخره کنید.

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

حال بیایید تحلیل کنیم که این دو ابزار در چه مواردی مشترک هستند و در کجا تفاوت دارند.

جنبه های مشابه

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

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

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

تفاوت های اصلی

یک راه موثر برای دیدن تفاوت‌های نمایشنامه‌نویس و سرو، نگاهی به نحو آنهاست. فرض کنید می‌خواهید یک فرم ورود به سیستم با اطلاعات کاربری «myusername» و «mypassword» ارسال کنید و تأیید کنید که کاربران را همانطور که انتظار می‌رود هدایت می‌کند. این روشی است که می توانید در Cypress این کار را انجام دهید:

describe("Login form test", () => {
  it("should log in successfully", () => {
    // visit the login page
    cy.visit("/login");
    // type the username into input field
    cy.get("#username").type("myusername");
    // type the password into input field
    cy.get("#password").type("mypassword");
    // submit the form
    cy.get("form").submit();
    // verify that the app redirect you to the dashboard page
    cy.url().should("include", "/dashboard");
  });
});

در اینجا چگونه می توانید در Playwright به آن دست پیدا کنید:

import { test, expect } from "@playwright/test";

describe("Login form test", () => {
  it("should log in successfully", async () => {
    // visit the login page
    await page.goto("http://example.com/login");
    // type the username into input field
    await page.fill("#username", "myusername");
    // type the password into input field
    await page.fill("#password", "mypassword");
    // submit the form
    await page.click('form [type="submit"]');
    // verify the app redirect you to the dashboard page
    expect(page.url()).toContain("/dashboard");
  });
});

اگرچه هر دو فریم ورک بر اساس سینتکس موکا برای تست های ساختاری هستند، API های آنها کاملاً متفاوت است. این تفاوت در نحو بر خوانایی و سهولت نوشتن تست، بسته به اولویت توسعه‌دهنده تأثیر می‌گذارد. توجه داشته باشید که Playwright’s API غنی‌تر است زیرا به شما امکان کنترل برگه‌های مرورگر را نیز می‌دهد که توسط Cypress پشتیبانی نمی‌شود.

تفاوت مهم دیگر در قابلیت موازی سازی آنهاست. نمایشنامه نویس به طور بومی از اجرای آزمایشی موازی خارج از جعبه پشتیبانی می کند. برعکس، Cypress به طور پیش فرض از موازی سازی پشتیبانی نمی کند. در این مورد، توسعه دهندگان باید به افزونه هایی مانند cypress-parallel.

در حالی که Cypress را می توان با افزونه ها گسترش داد، Playwright دارای ویژگی های داخلی بیشتری است. در همان زمان، Cypress Cloud پیشنهادات را با عملکردهای اضافی جالب تکمیل می کند. متأسفانه، همه آنها رایگان نیستند.

کدام را انتخاب کنیم – نمایشنامه نویس یا سرو؟

اینکه آیا شما از Playwright و Cypress استفاده می کنید بستگی به شرایط و زمینه خاص یک پروژه دارد. هیچ پاسخی برای همه وجود ندارد، زیرا هر چارچوب دارای نقاط قوت و ضعف است.

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

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

اجازه دهید برخی از مزایا و معایب هر ابزار را خلاصه کنیم.

سرو: مزایا و معایب

👍 جوانب مثبت

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

👎 معایب

• فقط در جاوا اسکریپت موجود است.
• بدون پشتیبانی از چند تب
• نمی توان همزمان دو مرورگر را کنترل کرد.

نمایشنامه نویس: جوانب مثبت و منفی

👍 جوانب مثبت

• پشتیبانی از مرورگرهای متقابل و چند زبانه.
• بسیاری از ویژگی‌ها، مانند گزارش‌گیری، تولید تست خودکار و اشکال‌زدایی کد VS.
• اجرای موازی خارج از چارچوب.

👎 معایب

• از طریق افزونه ها قابل تمدید نیست.
• هنوز نسبتا جدید است.
• بدون پشتیبانی از جاسوسان.

جدول مقایسه نمایشنامه نویس در مقابل سرو

بسته بندی

در این پست وبلاگ نمایشنامه نویس در مقابل سرو، نگاهی به آنچه سرو و نمایشنامه نویس دارند انداختیم و مزایا و معایب آنها را سنجیدیم.

اکنون می دانید:

• چرا Cypress و Playwright دو تا از محبوب ترین ابزارهای تست سرتاسری هستند
• ویژگی های ارائه شده توسط هر دو چارچوب
• کجا و چگونه این دو ابزار متفاوت هستند
• کدام یک را باید برای آزمایش برنامه وب خود انتخاب کنید

با تشکر برای خواندن!

PS اگر این پست را دوست داشتید، در لیست جادوی جاوا اسکریپت ما مشترک شوید تا به نکات و ترفندهای جادویی جادوی جاوا اسکریپت بپردازید.

PPS اگر برای برنامه Node.js خود به APM نیاز دارید، بروید و AppSignal APM را برای Node.js بررسی کنید.