کارگاه سرو قسمت 6: دستکاری عناصر – فهرست ها، انتخابگر تاریخ

لیست ها

همانطور که قبلاً تقریباً در هر برنامه‌ای که استفاده کرده‌اید، توسعه داده‌اید، آزمایش کرده‌اید دیده‌اید، فهرست‌ها عناصر بسیار رایج وب هستند. منوها، کرکره‌ها و انتخاب‌های مشابه جزء رایج برنامه‌های وب هستند.

ℹ️ درباره اقدامات لیست ها بیشتر بیاموزید:
انتخاب کنید
لیست های تست
هر یک

بنابراین، بیایید چند تست برای لیست ها بنویسیم:

1: یک فایل آزمایشی جدید در زیر ایجاد کنید e2e/elements_manipulation و مثلا اسمش را بگذار lists.cy.js.

2: تست های زیر را داخل آن بنویسید:

/// <reference types="Cypress" />

describe('Lists: Lists actions', () => {
  beforeEach('Navigate to lists page', () => {
    cy.visit('/select-menu');
  });

  it('Check selection of all list options - select method - colors menu', () => {
    // Load colors fixure json file to assert if all colors are present
    cy.fixture('colors').then((colors) => {
      // Get all options in the menu, get each option and indexes
      cy.get('#oldSelectMenu option').each((option, index) => {
        // Get option text
        const optionText = option.text();
        // Select each option and assert that it has correct option value and text
        cy.get('#oldSelectMenu')
          .select(optionText)
          .should('have.value', option.val())
          .contains(colors[index]);
      });
    });
  });

  it('Check selection of single list option - click method - title menu', () => {
    // Click on dropdown
    cy.get('#selectOne').click();
    // Select one option
    cy.get('#react-select-3-option-0-4').click();
    // Assert that dropdown has correct text after selection
    cy.get('#selectOne').contains('Prof.');
  });
});

3: حذف کنید example.json فایل در cypress/fixtures پوشه ای جدید به نام ایجاد کنید colors.json. داده های زیر را در آن بنویسید.

{
  "0": "Red",
  "1": "Blue",
  "2": "Green",
  "3": "Yellow",
  "4": "Purple",
  "5": "Black",
  "6": "White",
  "7": "Voilet",
  "8": "Indigo",
  "9": "Magenta",
  "10": "Aqua"
}

توضیح کد:

در فایل آزمایشی خود، ابتدا از صفحه برنامه خود که برای تست لیست ها-منوها اختصاص داده شده است، قبل از هر صفحه شروع آزمایش بازدید می کنیم.

• در اولین مورد آزمون، موضوع آزمون منوی رنگ‌ها (Old Style Select Menu) است. ما می خواهیم مقادیر و متن هر گزینه را در منو آزمایش کنیم.

خط 10: ما کل عمل/ادعا را با یک فیکسچر بسته بندی می کنیم، زیرا می خواهیم محتوای آن را بارگیری و استفاده کنیم (از colors.json فایل) برای اظهارات نتایج رنگ. (بارگیری یک بار به جای هر بار ادعا فراخوانی می شود، به همین دلیل است که آن را خارج از حلقه انتخاب فراخوانی می کنیم.)

خط 12: گزینه های کشویی دریافت می کنیم و برای هر گزینه مقدار و شاخص آن را دریافت می کنیم.

خط 14: برای هر گزینه متن (قرمز، آبی و غیره) را دریافت می کنیم.

خط 16-17: از گزینه Cypress استفاده می کنیم select() بجای click() برای انتخاب هر مقدار، و ما می توانیم از آن استفاده کنیم زیرا این عنصر دارای برچسب select در DOM است. از آنجایی که ما در داخل حلقه هستیم، این گزینه همه گزینه ها را یکجا انتخاب نمی کند، بلکه یکی پس از دیگری انتخاب می شود.

خط 18-19: برای هر انتخاب گزینه، ما ادعا می کنیم که حاوی مقدار مناسب است و رنگ ها بر اساس شاخص ها با محتوای فایل ثابت ما (نام رنگ ها) به ترتیب خاص مطابقت دارند.

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

خط 26: روی منو کلیک می کنیم تا باز شود.

خط 28: روی یک گزینه در منو کلیک می کنیم.

خط 30: ما ادعا می کنیم که عنصر منو دارای انتخابی است که ما انتخاب کرده ایم.

ℹ️ درباره وسایل بیشتر بدانید: وسایل

ℹ️ درباره انواع مختلف حلقه های JS که می توانید در تست ها نیز استفاده کنید بیشتر بیاموزید: حلقه ها

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

انتخابگر تاریخ

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

1: یک فایل آزمایشی جدید در زیر ایجاد کنید e2e/elements_manipulation و مثلا اسمش را بگذار datepicker.cy.js. تست زیر را داخل آن بنویسید.

/// <reference types="Cypress" />

describe('Date picker: Date picker actions', () => {
  beforeEach('Navigate to date picker page', () => {
    cy.visit('/date-picker');
  });

  it('Check fixed date selection', () => {
    // Open date picker
    cy.get('#datePickerMonthYearInput').click();
    // Select year
    cy.get('.react-datepicker__year-select').select('2030');
    // Select month
    cy.get('.react-datepicker__month-select').select('June');
    // Select day
    cy.get(`.react-datepicker__day--0${23}`).first().click();
    // Assert input date value
    cy.get('#datePickerMonthYearInput').should('have.value', '06/23/2030');
  });

  it('Check dynamic date selection', () => {
    // Increment Date by 1 month
    const date = new Date();
    date.setMonth(date.getMonth() + 1);
    // Set date to 23rd day of next month
    const year = date.getFullYear();
    const month = date.getMonth();
    const day = 23;
    // Open date picker
    cy.get('#datePickerMonthYearInput').click();
    // Select year
    cy.get('.react-datepicker__year-select').select(`${year}`);
    // Select month
    cy.get('.react-datepicker__month-select').select(`${month}`);
    // Select day
    cy.get(`.react-datepicker__day--0${day}`).first().click();
    // Assert input date value
    cy.get('#datePickerMonthYearInput').should(
      'have.value',
      `${`${month + 1}`.padStart(2, '0')}/${day}/${year}`
    );
  });

  it('Check applying date value directly in the input field', () => {
    // Clear date input and type new date
    cy.get('#datePickerMonthYearInput').clear().type('06/23/2030');
    // Assert input date value
    cy.get('#datePickerMonthYearInput').should('have.value', '06/23/2030');
  });
});

توضیح کد:

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

• تست 1 (ما در حال انتخاب مقدار تاریخ ثابت هستیم):

خط 10: ابتدا روی ورودی انتخابگر تاریخ کلیک می کنیم تا باز شود.

خط 12: ما در حال انتخاب مقدار ثابت برای سال هستیم.

خط 14: ما در حال انتخاب مقدار ثابت برای ماه هستیم.

خط 16: ما مقدار ثابتی را برای تاریخ انتخاب می‌کنیم و اولی را می‌گیریم، در صورتی که انتخابگر تاریخ، مقدار تکراری را برای ماه بعدی/قبلی نشان دهد.

خط 18: ما ادعا می کنیم که ورودی تاریخ دارای یک مقدار جدید است – مقدار انتخابی ما.

• تست 2 (ما در حال انتخاب تاریخ به صورت پویا هستیم):

خط 23: ما شیء Date را آغاز می کنیم.

خط 24: ماه را در شیء Date تنظیم می کنیم که همیشه 1 ماه نسبت به ماه جاری افزایش یابد.

خط 26: از شیء Date یک سال می گیریم

خط 27: ماه از شی Date دریافت می کنیم

خط 28: ما در حال ایجاد ثابت هستیم تا به عنوان ارزش روز استفاده شود

خط 30: انتخابگر تاریخ را باز می کنیم

خطوط 32 – 36: سال، ماه، روز را در انتخابگر تاریخ انتخاب می کنیم

خطوط 38 – 41: ما ادعا می کنیم که ورودی تاریخ دارای مقدار صحیحی است که برای تاریخ تعیین کرده ایم. به دلیل نمایه‌سازی متفاوت ماه از شی Date و مقدار کشویی، ما 1 را به ماه اضافه می‌کنیم و اگر مقدار کمتر از 10 باشد، برای رعایت قالب‌بندی فیلد ورودی تاریخ، 0 را اضافه می‌کنیم.

• تست 3 (ما مقدار تاریخ ثابت را مستقیماً بدون انتخاب در قسمت ورودی وارد می کنیم):

خط 46: مقدار پیش فرض را از قسمت ورودی پاک می کنیم و یک مقدار ثابت جدید را تایپ می کنیم.

خط 48: ما ادعا می کنیم که ورودی تاریخ دارای یک مقدار جدید است – مقدار انتخابی ما.

👉 همیشه توصیه می شود از مقادیر ثابت برای تاریخ ها استفاده نکنید زیرا بسته به موارد استفاده در پروژه، پس از گذشت آن تاریخ و غیره، آزمایش ها با شکست مواجه می شوند. در صورت امکان از محاسبات، مقادیر پویا و شیء JS Date بومی یا کتابخانه دیگری مانند moment.js استفاده کنید. ما مثال‌هایی را در اینجا فقط برای اهداف یادگیری ثابت کرده‌ایم، تا با روش‌های متعدد نحوه تعامل با انتخاب‌کنندگان تاریخ آشنا شویم.

ℹ️ درباره JS Date Objects: date Objects بیشتر بیاموزید

مشق شب:

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

• سناریوهای بیشتری را برای انتخابگر تاریخ اضافه کنید. سعی کنید با استفاده از پیکان چپ/راست در ماه های مختلف پیمایش کنید. سعی کنید انتخابگر تاریخ دوم را خودکار کنید که حاوی زمان نیز باشد. با محاسبات زمان بازی کنید.

فراموش نکنید که تمام کارهایی را که امروز انجام دادید در Github فشار دهید 😉 دستورات git را به خاطر دارید؟

git add .

git commit -am "add: lists, date pickers tests"

git push

شما را در درس 7 می بینم!

کد تکمیل شده این درس

اگر چیز جدیدی یاد گرفتید با خرید یک قهوه از کار من حمایت کنید ☕