کارگاه سرو قسمت 5: دستکاری عناصر – دکمه، ورودی، دکمه رادیویی، چک باکس

اقدامات دکمه

اعمال دکمه – کلیک ها، یکی از پرکاربردترین ها در اتوماسیون وب UI هستند. برای نوشتن تست، باید یاد بگیرید که چگونه روی انواع دکمه ها کلیک کنید، بنابراین بیایید محبوب ترین آنها را پوشش دهیم.

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

1: پوشه جدید در زیر ایجاد کنید e2e و به عنوان مثال آن را صدا کنید elements_manipulation. در زیر آن پوشه، فایل آزمایشی جدید ایجاد کنید و برای مثال آن را فراخوانی کنید button.cy.js.

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

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

describe('Buttons: Button actions', () => {
  before('Navigate to buttons page', () => {
    cy.visit('/buttons');
  });

  it('Check different button actions', () => {
    // Double click on button
    cy.get('#doubleClickBtn').dblclick();
    cy.contains('You have done a double click').should('be.visible');

    // Right-click on button
    cy.get('#rightClickBtn').rightclick();
    cy.contains('You have done a right click').should('be.visible');

    // Click on button
    cy.get('[class="btn btn-primary"]').then((buttons) => {
      cy.wrap(buttons).eq(2).click();
      cy.contains('You have done a dynamic click').should('be.visible');
    });
  });
});

توضیح کد:

ما در حال بازدید از صفحه برنامه خود هستیم که برای تست دکمه ها (صفحه) اختصاص داده شده است. استفاده می کنیم before برای آن قلاب کنید، زیرا ما فقط 1 تست داریم.

در داخل بدنه تست، ما می توانیم 3 مثال را مشاهده کنیم: نحوه انجام دوبار کلیک روی دکمه، نحوه انجام راست کلیک و یک کلیک پویا.

• دابل کلیک: ما دکمه خود را پیدا می کنیم و عمل دوبار کلیک را انجام می دهیم dblclick() و پس از آن ما در حال انجام ادعا هستیم تا پس از دوبار کلیک کردن بر روی دکمه، متن مناسب قابل مشاهده باشد.

• کلیک راست: ما دکمه خود را پیدا می کنیم و عمل کلیک راست را انجام می دهیم rightclick() و پس از آن ما در حال انجام ادعا هستیم تا تأیید کنیم که پس از کلیک راست روی دکمه، متن مناسب قابل مشاهده است.

• یک کلیک: ما در حال یافتن دکمه خود هستیم و عمل تک کلیک را انجام می دهیم click() و پس از آن ما در حال انجام ادعا هستیم تا تأیید کنیم که پس از کلیک روی دکمه، متن مناسب قابل مشاهده است. متوجه خواهید شد که برای این دکمه ما یک دکمه منحصر به فرد نداشتیم id، در مقایسه با سایرین، بنابراین کلاسی را که متعلق به آن است در یک شی JQuery قرار دادیم و عنصر سوم را در آن کلاس (دکمه موضوع ما) انتخاب کردیم.

3: تست را اجرا کنید: cypress CLI را باز کنید و این تست را اجرا کنید. نگاهی به لاگ ها بیندازید.

اقدامات ورودی

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

درباره اقدامات ورودی بیشتر بدانید:
ℹ️ تایپ کنید
ℹ️ روشن

1: فایل آزمایشی جدید در زیر ایجاد کنید e2e/elements_manipulation و به عنوان مثال آن را صدا کنید input.cy.js. تست زیر را داخل آن بنویسید.

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

describe('Inputs: Input actions', () => {
  before('Navigate to input page', () => {
    cy.visit('/text-box');
  });

  it('Check different input actions', () => {
    // Fill the form details
    cy.get('#userName').type('Arya Stark');
    cy.get('#userEmail').type('noone@example.com');
    cy.get('#currentAddress').type('Braavos, East of Westeros');
    cy.get('#permanentAddress').type('Winterfell,{enter}Kingdom of the North,{enter}Westeros');

    // Submit form and check if expected text is dispalyed
    cy.get('#submit').click();

    // Example assertions - Verify that we got correct output for name and email
    cy.get('#name').contains('Arya Stark');
    cy.get('#email').contains('noone@example.com');

    // Edit username input field, submit form and assert that username is changed
    cy.get('#userName').clear().type('Jon Snow');
    cy.get('#submit').click();
    cy.get('#name').contains('Jon Snow');
  });
});

توضیح کد:

ما در حال بازدید از صفحه برنامه خود هستیم که برای تست ورودی ها (جعبه متن) اختصاص داده شده است. استفاده می کنیم before برای آن قلاب کنید، زیرا ما فقط 1 تست داریم.

همانطور که می بینید، در آن صفحه، چندین فیلد ورودی و یک دکمه ارسال داریم.

ابتدا باید این فرم را پر کنیم. ما وارد می کنیم: نام کاربری، ایمیل، آدرس فعلی و آدرس دائمی. استفاده می کنیم type() تابع سرو برای نوشتن متن. در آدرس دائمی متوجه خواهید شد که ما در حال شبیه سازی هم هستیم که کاربر فشار داده است ENTER کلید با {enter} گزینه، به منظور نوشتن آدرس آنها در چند خط.

سپس برای ارسال فرم بر روی دکمه ارسال کلیک می کنیم. به دلیل محدودیت این برنامه (دکمه از type="button" و نه "submit" ، نمی توانیم از گزینه سرو بومی که برای ارسال فرم ها توصیه می شود استفاده کنیم (ادامه مطلب را اینجا بخوانید)

بعد از اینکه فرم را ارسال کردیم، در حال انجام اظهارات هستیم تا بررسی کنیم که آیا خروجی مورد انتظار خود را دریافت کرده‌ایم، برای مثال در این مورد، فرض کنید می‌خواهیم بررسی کنیم که آیا خروجی متن نام و ایمیل را به درستی دریافت کرده‌ایم یا خیر.

در مرحله بعد، فرض کنید می خواهیم دوباره فرم را با مقادیر مختلف نام کاربری ارسال کنیم. بنابراین، ما از تابع سرو استفاده می کنیم clear() برای حذف مقدار اضافه شده قبلی نام کاربری، و ما در حال تایپ نام جدید هستیم.

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

2: تست را اجرا کنید: Cypress CLI را باز کنید و این تست را اجرا کنید. نگاهی به لاگ ها بیندازید.

اقدامات دکمه رادیویی

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

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

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

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

describe('Radio Buttons: Radio Button actions', () => {
  before('Navigate to radio buttons page', () => {
    cy.visit('/radio-button');
  });

  it('Check different radio button actions', () => {
    cy.get('.custom-radio')
      .find('[type="radio"]')
      .then((radio) => {
        /* Get all radio buttons, select first one and verify that it is 
         checked and that we got confirmation text */
        cy.wrap(radio).first().check({ force: true }).should('be.checked');
        cy.contains('.text-success', 'Yes');

        /* Get all radio buttons, select second one and verify that it is 
         checked and that we got confirmation text */
        cy.wrap(radio).eq(1).check({ force: true }).should('be.checked');
        cy.contains('.text-success', 'Impressive');

        // Verify that first radio button is no longer checked
        cy.wrap(radio).eq(0).should('not.be.checked');

        // Verify that third button is disabled
        cy.wrap(radio).eq(2).should('be.disabled');
      });
  });
});

توضیح کد:

ما در حال بازدید از صفحه برنامه خود هستیم که برای آزمایش دکمه های رادیویی (صفحه) اختصاص داده شده است. استفاده می کنیم before برای آن قلاب کنید، زیرا ما فقط 1 تست داریم.

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

سپس، ما شیء JQuery را ایجاد می کنیم و تمام دکمه های رادیویی خود را جمع می کنیم.

ابتدا اولین دکمه رادیویی با عملکرد سرو را انتخاب می کنیم .first() (توجه: این همان چیزی است که اگر نمایه بنویسیم .eq(0)). ما این اقدام را مجبور می کنیم زیرا عنصر دیگری در DOM در حال شناور بودن عنصر ماست ({ force: true }) و ما بررسی می کنیم که دکمه رادیویی ما علامت زده شده است و متن مورد انتظار نمایش داده می شود.

سپس، دکمه رادیویی دوم را با شاخص دوم انتخاب می کنیم .eq(1) و ما همان بررسی‌های مثال قبلی را انجام می‌دهیم، با این تفاوت که اکنون ادعای جدیدی اضافه کردیم – برای بررسی اینکه آیا دکمه رادیویی قبلی دیگر انتخاب نشده است.

سپس، ما بررسی می‌کنیم که دکمه رادیویی سوم غیرفعال است – غیرقابل کلیک.

ℹ️ در پروژه‌های واقعی، اغلب اتفاق می‌افتد که دکمه‌های رادیویی، چک باکس‌ها و موارد مشابه – شناسه‌های منحصربه‌فرد ندارند. به همین دلیل است که این تست بدون استفاده از شناسه های ارائه شده و جستجوی عناصر توسط ویژگی های دیگر نوشته شده است (نکته تکلیف: می توانید این تست را به روش دیگری تمرین کرده و بنویسید، سعی کنید از شناسه های ارائه شده برای دکمه های رادیویی استفاده کنید).

2: تست را اجرا کنید: Cypress CLI را باز کنید و این تست را اجرا کنید. نگاهی به لاگ ها بیندازید.

اقدامات کادر انتخاب

عملکردهای چک باکس بسیار شبیه به دکمه‌های رادیویی هستند، با این تفاوت که شما می‌توانید چند چک باکس را انتخاب کنید، در مقایسه با دکمه‌های رادیویی که معمولاً یک انتخاب است. بیایید تلاش کنیم.

درباره اقدامات کادر تأیید بیشتر بدانید:
ℹ️ بررسی کنید
ℹ️ علامت را بردارید

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

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

describe('Checkboxes: Checkbox actions', () => {
  before('Navigate to checkbox page', () => {
    cy.visit('/checkbox');
  });

  it('Check different checkbox actions', () => {
    // Open home dropdown
    cy.get('button[aria-label="Toggle"]').click();

    // Open Desktop dropdown
    cy.get('button[aria-label="Toggle"]').eq(1).click();

    // Get all checkboxes, select Desktop folder and everything under desktop folder.
    cy.get('[type="checkbox"]').then((checkbox) => {
      cy.wrap(checkbox).eq(1).check({ force: true }).should('be.checked');
      // Verify that correct text is displayed for chosen options
      cy.contains('.text-success', 'desktop');
      cy.contains('.text-success', 'notes');
      cy.contains('.text-success', 'commands');

      // Uncheck notes
      cy.wrap(checkbox).eq(2).uncheck({ force: true }).should('not.be.checked');
      cy.contains('.text-success', 'notes').should('not.exist');

      /* Select every checkbox in the tree, uncheck Notes and then select Notes by 
          not specifying exact Notes checkbox index */
      cy.wrap(checkbox).eq(0).check({ force: true }).should('be.checked');
      cy.wrap(checkbox).eq(2).uncheck({ force: true }).should('not.be.checked');

      cy.wrap(checkbox).check({ force: true }).should('be.checked');
      cy.contains('.text-success', 'notes');
    });
  });
});

توضیح کد:

ما در حال بازدید از صفحه برنامه خود هستیم که برای آزمایش دکمه های رادیویی (صفحه) اختصاص داده شده است. استفاده می کنیم before برای آن قلاب کنید، زیرا ما فقط 1 تست داریم.

ابتدا روی عنصر پیکان Home کلیک می کنیم تا درخت کشویی گسترش یابد.

سپس روی پیکان Desktop کلیک می کنیم تا فرزندان آن گسترش یابد.

همانطور که در DOM می بینید، این چک باکس هایی که می بینیم، شناسه های منحصر به فرد ندارند. بنابراین، ما در جستجوی همه عناصر هستیم type="checkbox" ، ما شیء JQuery را ایجاد می کنیم و سپس آنها را در عناصر واحدی که می خواهیم استفاده کنیم قرار می دهیم.

اول، ما روی چک باکس دوم کلیک می کنیم که پوشه Desktop را نشان می دهد. سپس بر روی چک باکس کلیک می کنیم تا همه چیز در پوشه Desktop انتخاب شود. ما ادعا می کنیم که چک باکس والد دسکتاپ علامت زده شده است، و ما ادعا می کنیم که خروجی متنی برای دسکتاپ و پوشه های فرزندان آن – یادداشت ها و دستورات دریافت کرده ایم.

سپس، ما علامت چک باکس Notes را برداریم، ادعا می‌کنیم که اکنون علامت آن برداشته شده است و متن خروجی «یادداشت‌ها» دیگر وجود ندارد. برای این استفاده کردیم uncheck() تابع. چرا؟ زیرا check() عملکرد فقط بررسی چیزی است و اگر می خواهید علامت چیزی را بردارید، باید از آن استفاده کنید uncheck() یا click().

در مرحله بعد، می‌خواهیم تمام چک باکس‌های درخت خانه و همه فرزندان را انتخاب کنیم. اما، برای نشان دادن حالتی که به نمایه مشخصی برای چک باکس نیاز نداریم، تیک Notes را برداریم (خط: 30). در خط 32، می بینید که ما مشخص نکرده ایم که کدام چک باکس را بررسی کنیم، اما می بینید که Notes علامت زده شده است (خط: 32، 33). سرو از کجا می دانست که کدام را چک کند؟ زیرا check() تابع همیشه تمام چک باکس های موجود در صفحه را تأیید می کند، وضعیت آنها را دریافت می کند و اگر فقط یک مورد بدون علامت باقی بماند، آن یکی را انتخاب می کند. اگر موارد بیشتری وجود دارد، باید مشخص کنید که کدام یک را می خواهید بررسی کنید، همانطور که در مثال های قبلی انجام دادیم.

2: تست را اجرا کنید: cypress CLI را باز کنید و این تست را اجرا کنید. به لاگ ها نگاهی بیندازید.

مشق شب:

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

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

git add .

git commit -am "add: button, radio button, input, checkbox tests"

git push

به یادگیری ادامه دهید، شما را در درس 6 می بینم!

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

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