Cypress Testing: راهنمای اجرای تست های کاربردی وب

در این مقاله، به تست Cypress می پردازیم. Cypress یک ابزار اتوماسیون تست متن باز مدرن برای برنامه های کاربردی وب است. ما نگاهی به نحوه راه اندازی و استفاده از Cypress برای آزمایش برنامه های کاربردی وب خواهیم داشت و همچنین به برخی از ویژگی هایی که Cypress را به گزینه ای جذاب تبدیل می کند نگاه خواهیم کرد. نحوه یادگیری طراحی وب (در 9 مرحله)

Cypress بر روی Electron ساخته شده است که توسط ویرایشگر متن Atom و بسیاری از برنامه های کاربردی دیگر. نصب آن آسان است و یک API ساده و واضح دارد.

طرح کلی آزمایش سرو

تست نرم افزار چیست؟

تست نرم افزار توسط Nick Youngson CC BY-SA 3.0 Pix4free.or

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

چرا تست نرم افزار مهم است

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

مزایای تست های خودکار نرم افزار

مزایای زیادی برای آزمایش خودکار نرم افزار وجود دارد:

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

آیا دوست دارید در مورد تست frontend اطلاعات بیشتری کسب کنید؟ آخرین راهنمای ما را بررسی کنید، A Frontend Web Developer’s راهنمای تست. شما را با طیف وسیعی از چارچوب‌های پیشرو و قدرتمند، مانند سلنیوم، سرو، عروسک‌ساز، و نمایشنامه‌نویس آشنا می‌کند و به عنوان راهنمای استفاده از قابلیت پوشش آزمایشی آنها عمل می‌کند.

Cypress چیست؟

Cypress یک مجموعه آزمایشی مدرن و منبع باز برای برنامه های کاربردی وب است. این بر روی Electron ساخته شده است که توسط ویرایشگر متن Atom و بسیاری از برنامه های کاربردی دیگر استفاده می شود. Cypress به راحتی قابل نصب است و یک API ساده و واضح دارد.

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

ویژگی های Cypress

برخی از ویژگی هایی که Cypress را به گزینه ای جذاب برای تست های خودکار تبدیل می کند عبارتند از:

• نصب ساده: Cypress را می توان با استفاده از npm یا Yarn نصب کرد. نیازی به نصب وابستگی دیگری نیست.
• Clear API: API ارائه شده توسط Cypress ساده و قابل درک است. همه دستورات زنجیره‌ای هستند و خواندن و نوشتن کد را آسان می‌کنند.
• انتظار خودکار: Cypress به طور خودکار منتظر می ماند تا عناصر قبل از انجام هر کاری روی آنها ظاهر شوند. این باعث می‌شود کد قابل اعتمادتر و نوشتن آسان‌تر شود.
• اجرای موازی: آزمایش‌ها را می‌توان به صورت موازی در چندین مرورگر و دستگاه با استفاده از Cypress Test Runner اجرا کرد. این باعث می شود آزمایش ها سریعتر اجرا شوند.

آغاز با تست سرو

Cypress روی Node.js 12 یا 14 و بالاتر کار می کند، بنابراین باید Node داشته باشید. js قبل از نصب و استفاده از Cypress روی رایانه شما نصب شده است.

نصب سرو

می توانید Cypress را از طریق npm نصب کنید:

npm نصب سرو --save-dev

یا می‌توانید آن را با استفاده از Yarn نصب کنید:

نخ افزودن سرو --dev

پس از نصب Cypress، می‌توانید آن را با استفاده از دستور زیر اجرا کنید:

$(npm bin)/cypress open

با این کار دونده آزمایشی Cypress باز می شود. سپس می‌توانید آزمایش‌های خود را از اینجا اجرا کنید.

پیکربندی سرو

Cypress را می توان با استفاده از فایل cypress.json پیکربندی کرد. این فایل باید در ریشه پروژه شما قرار گیرد. مثال زیر یک مثال اساسی است:

{
  "baseUrl": "http://localhost:8080"،
  "viewportWidth": 1200،
  "viewportHeight": 800،
  "fixturesFolder": "tests/e2e/fixtures" ،
  "integrationFolder": "tests/e2e/specs" ،
  "pluginsFile": "cypress/plugins.js" ،
  "supportFile": نادرست،
  "screenshotsFolder": ".cypress/screenshots"
}

برای اطلاعات بیشتر در مورد پیکربندی Cypress، به اسناد مراجعه کنید.

نوشتن تست سرو

یک تست Cypress با استفاده از جاوا اسکریپت نوشته شده و در مرورگر اجرا می شود. این کار نوشتن و درک تست ها را آسان می کند.

هر تست Cypress در “مشخصات” سازماندهی شده است. مشخصات مجموعه ای از آزمایشات برای یک ویژگی یا عملکرد خاص است. مشخصات در integrationFolder قرار دارند (به طور پیش فرض tests/e2e/specs). یک فایل مشخصات یا آزمایشی می‌تواند شامل یک یا چند آزمایش باشد.

در اینجا یک مثال اساسی از یک فایل مشخصات آورده شده است:

توصیف('برنامه من'، عملکرد() {

  این("کاری انجام می دهد"، عملکرد() {
    
  });

  این("کار دیگری انجام می دهد"، عملکرد() {
    
  });

});

مثال آزمایش سرو 1: آزمایش فرم ورود

در این مثال، ما برای تست Cypress یک فرم ورود می نویسیم. فرض می کنیم فرم دارای دو فیلد نام کاربری و password و یک دکمه ارسال است.

ابتدا باید صفحه ای را که حاوی فرم ورود است باز کنیم. ما می توانیم این کار را با دستور cy.visit() انجام دهیم:

توصیف('برنامه من'، عملکرد() {

  این("کاری انجام می دهد"، عملکرد() {
    cy.بازدید('http://localhost:8080/login');
  });

  
});

بعد، باید فیلدهای نام کاربری و password را پر کرده و روی دکمه ارسال کلیک کنیم. ما می توانیم این کار را با دستورات cy.get()، cy.type() و cy.click() انجام دهیم:

توصیف('برنامه من'، عملکرد() {

  این("کاری انجام می دهد"، عملکرد() {
    cy.بازدید('http://localhost:8080/login');
    cy.دریافت('#username').نوع('testuser') ;
    cy.دریافت('#password').نوع('secret') ;
    cy.دریافت('.btn-submit').کلیک کنید(); 

  });

  
});

مثال آزمایش سرو 2: تست سبد خرید

در این مثال، ما مشخصاتی را برای آزمایش ویژگی سبد خرید می نویسیم. ما فرض می‌کنیم که سبد خرید دارای دو فیلد مقدار و item و یک دکمه “افزودن به سبد خرید” است.

ابتدا باید صفحه ای را که حاوی فرم سبد خرید است باز کنیم. ما می توانیم این کار را با دستور cy.visit() انجام دهیم:

توصیف('برنامه من'، عملکرد() {

  این("کاری انجام می دهد"، عملکرد() {
    cy.بازدید('http://localhost:8080/cart');
  });

  
});

در مرحله بعد، باید فیلدهای مقدار و item را پر کنیم و روی دکمه “افزودن به سبد خرید” کلیک کنیم. ما می توانیم این کار را با دستورات cy.get()، cy.type() و cy.click() انجام دهیم:

توصیف('برنامه من'، عملکرد() {

  این("کاری انجام می دهد"، عملکرد() {
    cy.بازدید('http://localhost:8080/cart');
    cy.دریافت('#quantity').نوع(5);
    cy.دریافت('#item').نوع('pants') ;
    cy.دریافت('.btn-add-to-cart').کلیک کنید();

  });

  
});

مثال 3 تست Cypress: آزمایش یک برنامه تک صفحه ای

در این مثال، یک برنامه تک صفحه ای (SPA) را آزمایش می کنیم که از چارچوب React frontend استفاده می کند. این برنامه یک مدیر وظیفه ساده است که به کاربران امکان می دهد وظایف را اضافه، ویرایش و حذف کنند.

ابتدا، ما باید چند وابستگی را نصب کنیم. ما به موارد زیر نیاز داریم:

ما می‌توانیم این وابستگی‌ها را با npm نصب کنیم:

npm نصب - -save react react-dom create-react-app cypress

اکنون می‌توانیم یک برنامه React جدید با استفاده از Create React App ایجاد کنیم:

create-react-app my-app

بعد، باید چند وابستگی Cypress اضافی را نصب کنیم:

cd my-app
npm نصب --save-dev cypress

اکنون که وابستگی‌های ما نصب شده‌اند، می‌توانیم آزمایش‌های خود را بنویسیم. یک فایل جدید به نام tasks.spec.js در پوشه cypress/integration با محتوای زیر ایجاد کنید:

توصیف("وظایف"، عملکرد() {

  قبل از هر کدام(عملکرد() {
    cy.بازدید('http://localhost:3000');
  });

  این('باید یک کار اضافه کرد'، عملکرد() {

    
    cy.دریافت('ورودی[name="taskName"]').نوع('وظیفه من');
    cy.دریافت('textarea[name="taskDescription"]').نوع('شرح من');
    cy.دریافت('form').ارسال();

    
    انتظار(cy.get('.tasks li').این است('طول')).به.برابر(1);
   });
});

عملکرد beforeEach قبل از هر آزمایش در مشخصات اجرا می شود. در این مورد، ما از URL اصلی برنامه خود بازدید می کنیم (http://localhost:3000).

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

با باز کردن تست‌های ادغام از زیر Test Explorer (View -> Test Explorer) می‌توانید تست‌های خود را از داخل Visual Studio Code اجرا کنید.

به طور متناوب، می توانید آنها را از پنجره ترمینال با استفاده از npm:

اجرا کنید

npm اجرای e2e
npm e2e:open را اجرا کنید

دونده تست سرو

دو راه برای اجرای هر تست Cypress وجود دارد: به صورت محلی و در فضای ابری.

آزمایش سرو به صورت محلی

می توانید Cypress Test Runner را با اجرای دستور زیر باز کنید:

node_modules/.bin/cypress باز

Test Runner در یک پنجره جدید باز می شود. از اینجا، می‌توانید با کلیک روی دکمه‌های اجرای همه مشخصات یا اجرای فایل آزمایشی، همه آزمایش‌ها یا آزمایش‌های فردی را اجرا کنید.

آزمایش سرو در فضای ابری

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

برای استفاده از سرویس تست Cypress مبتنی بر ابر، ابتدا باید برای یک حساب کاربری رایگان در https:// ثبت نام کنید www.cypress.io/. هنگامی که یک حساب کاربری دارید، می توانید مخزن GitHub خود را متصل کنید و انتخاب کنید که کدام شاخه را می خواهید آزمایش کنید. سپس Cypress به طور خودکار تست های شما را روی هر commit به آن شاخه اجرا می کند.

همچنین می‌توانید با کلیک بر روی دکمه «اجرای» در کنار نام پروژه خود، یک آزمایش آزمایشی را به صورت دستی از داشبورد Cypress آغاز کنید.

ادغام پیوسته

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

ابزارهای مختلف CI در دسترس هستند، اما ما روی سه مورد از محبوب‌ترین آنها تمرکز خواهیم کرد: Travis CI، CircleCI، و Jenkins.

Travis CI

Travis CI یک سرویس CI میزبانی شده محبوب است که برای پروژه های منبع باز رایگان است. با GitHub ادغام می شود و راه اندازی و استفاده از آن را آسان می کند.

برای استفاده از Travis CI با Cypress، باید یک فایل travis.yml در فهرست اصلی پروژه خود ایجاد کنید. این فایل به تراویس می گوید که چگونه پروژه خود را بسازد و آزمایش کند. این یک مثال ساده است:

زبان: node_js


node_js: 10


اسکریپت:
  
  - آزمایش npm اجرا شود


env: CYPRESS_BASE_URL=https://example. com

این فایل به تراویس می‌گوید که از Node v10 برای آزمایش استفاده کند و دستور npm run test را اجرا کند (یا yarn test، اگر از Yarn به جای npm استفاده می‌کنید) . همچنین متغیر محیطی CYPRESS_BASE_URL را تنظیم می‌کند که Cypress هنگام اجرای آزمایش‌ها از آن استفاده می‌کند.

می‌توانید در مستندات سرو.

CircleCI

CircleCI یکی دیگر از سرویس های میزبانی شده CI است که یک طرح رایگان برای پروژه های منبع باز ارائه می دهد. مانند تراویس، با GitHub ادغام می شود و راه اندازی و استفاده از آن را آسان می کند.

برای استفاده از CircleCI با Cypress، باید یک فایل circleci/config.yml در فهرست اصلی پروژه خود ایجاد کنید. این فایل به CircleCI می گوید که چگونه پروژه شما را بسازد و آزمایش کند.

یک مثال ساده در اینجا آمده است:

نسخه: 2.0
شغل:
  ساخت:
    دوکر:
      
      - تصویر: circleci/node:10

    مراحل:
      
      - اجرای: تست اجرای npm

      
      - run: echo "CYPRESS_BASE_URL=https://example.com" >> $BASH_ENV

  استقرار:
    

این فایل به CircleCI می‌گوید که از Node v10 برای آزمایش استفاده کند و دستور npm run test را اجرا کند. همچنین متغیر محیطی CYPRESS_BASE_URL را تنظیم می‌کند که Cypress هنگام اجرای آزمایش‌ها از آن استفاده می‌کند.

می‌توانید درباره پیکربندی CircleCI برای استفاده با Cypress در Cypress اطلاعات بیشتری کسب کنید. اسناد.

جنکینز

Jenkins یک سرور CI با میزبانی شخصی است که می تواند هم برای پروژه های منبع باز و هم برای پروژه های خصوصی استفاده شود. طیف گسترده ای از ویژگی ها و پلاگین ها را برای گسترش عملکرد خود ارائه می دهد.

To use Jenkins with Cypress, you’ll need to install the Cypress plugin from the Jenkins plugin repository. This plugin adds a new “Cypress” build step that can be used to run Cypress tests.

In your project’s Jenkins configuration, you’ll need to add a “Cypress” build step and specify the path to your project’s cypress.json file. You’ll also need to set the baseUrl property in this file to the URL of your application (such as https://example.com). Here’s an example cypress.json file:

{
  "baseUrl": "https://example.com"
}

You can learn more about configuring Jenkins for use with Cypress testing in the Cypress documentation.

Debugging Tests

Debugging Cypress tests is simple and straightforward. There are two ways to debug tests: using the command line, or using the browser DevTools.

Cypress testing with the command line

The Cypress command-line interface (CLI) has a built-in debugger that can be used to debug tests. To use the CLI debugger, simply run the cypress command with the --debug flag. This will open the Cypress GUI with the debugger enabled.

Once the GUI is open, you can set breakpoints in your test code by clicking on the line number in the left panel. The test will pause at each breakpoint and you’ll be able to inspect variables and see the call stack. You can also resume execution of the test and step through each line of code.

Cypress testing with the browser developer tools

If you aren’t using the CLI, you can still debug your Cypress tests using the browser DevTools. To do this, simply open the DevTools console and enter cypress into the console. This will give you access to all of the same debugging features as the CLI debugger, including setting breakpoints and inspecting variables.

Upgrading the Cypress Test Suite

When upgrading from one version of Cypress to another, it’s important to be aware of any breaking changes that have been introduced. These changes can potentially break your Cypress tests, and may require you to update your code in order to continue using the new version of Cypress.

Useful Resources

If you want to learn more about Cypress, here are some useful resources:

Migrating from Selenium

If you’re currently using Selenium for testing web applications, you may be considering migrating to Cypress. There are several reasons why you might want to do this:

• Cypress has a simpler, more intuitive API than Selenium.
• Cypress tests run in the same environment as the application being tested, which makes debugging easier.
• Cypress can automatically wait for elements to appear in the DOM before interacting with them, which makes tests more robust.

There are two main options for migrating from Selenium to Cypress: WebDriverIO and Protractor.

WebDriverIO

WebDriverIO is a Node.js library that wraps around the Selenium WebDriver API. It has a similar API to Cypress, making it easy to migrate existing Selenium tests to WebDriverIO. The WebdriverIO website has a guide on how to do this.

Protractor

Protractor is an end-to-end test framework for Angular applications that uses the Selenium WebDriver API under the hood. It has a similar architecture to Cypress, making it easy to migrate existing Selenium tests to Protractor. The Protractor website has a guide on how to do this.

نتیجه گیری

Automated testing tools like Cypress can make our lives as developers much easier. By running tests automatically, we can quickly catch errors and avoid potential regressions.

Although it can be tempting to rely solely on automated tests, manual testing is still important. Automated tests can catch some bugs, but they can’t catch everything. A human eye is still needed to catch things like typos, layout issues, and user experience problems.

If you’re not already using an automated tool, I recommend giving Cypress a try. It’s easy to set up and use, and Cypress testing can save you a lot of time and headaches in the long run.

Would you like to learn more about frontend testing? Check out our latest guide, A Frontend Web Developer’s Guide to Testing. It will introduce you to a range of leading, powerful frameworks, such as Selenium, Cypress, Puppeteer, and Playwright, and serve as a guide to leveraging their test coverage capability.

If you enjoyed this article, you might also find the following useful:

منبع :

https://salehmedia.ir/نحوه-یادگیری-طراحی-وب-در-9-مرحله/