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

عناصر DOM

Document Object Model (DOM) یک ابزار ضروری برای تعامل وب است، زیرا یک نمایش مجازی از یک صفحه وب بارگذاری شده در یک مرورگر ایجاد می کند. این به عنوان یک رابط برنامه نویسی برای اسناد HTML و XML عمل می کند و به برنامه های وب اجازه می دهد ساختار، سبک و محتوای سند را تغییر دهند. DOM شامل گره ها و اشیایی است که سند را تشکیل می دهند و زبان های برنامه نویسی را قادر می سازند در صفحات مرورگر کار کنند. به طور معمول، DOM در یک مرورگر قرار دارد، در حالی که جاوا اسکریپت به عنوان زبان برنامه نویسی کلاینت عمل می کند که اتصال لازم را ایجاد می کند. جاوا اسکریپت مسئول دستکاری DOM در عملیات های مختلف وب سایت است، مانند ایجاد نمایش اسلاید، تأیید صحت فرم های ارسالی، و تغییر منوهای ناوبری.

به بیان ساده، هر صفحه وب که با آن برخورد کنید سند محسوب می شود. چه آن را به عنوان یک منبع HTML یا در یک پنجره مرورگر مشاهده کنید، اساساً نمایش متفاوتی از همان محتوا است. Document Object Model (DOM) به صفحه وب اجازه می دهد تا به عنوان اشیا نمایش داده شود و دستکاری را ممکن می سازد. با استفاده از یک زبان برنامه نویسی مانند جاوا اسکریپت، سند را می توان با هدف قرار دادن این اشیاء تغییر داد.

هنگام بررسی کد HTML، تمایز بین عناصر مختلف مانند برچسب ها، نام ویژگی ها، مقادیر ویژگی ها و غیره بسیار مهم است. به عنوان مثال، اجازه دهید ساختار عنصر ورودی HTML را به عنوان مثال در نظر بگیریم:

مفیدترین ابزاری که برای یافتن عناصر استفاده خواهیم کرد، ابزارهای توسعه دهنده، بازرس عناصر در مرورگر است. این یک نمونه ابزار بازرسی ساختار و عنصر HTML DOM است (در ابزارهای توسعه دهنده مرورگر، در این مورد کروم).

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

سرو یاب

سرو یاب چیست؟

انتخابگر یا مکان یاب شیئی است که آیتم ها/عناصر صفحه وب را بر اساس پرس و جو پیدا کرده و برمی گرداند. در Automation، برای انجام هر عملیاتی بر روی عناصر وب ابتدا باید یک عنصر را پیدا کنید و یک عمل را روی آن عنصر انجام دهید. Locator یا Selector به یافتن یک عنصر در صفحه وب کمک می کند. انواع مختلفی از مکان یاب ها وجود دارد، مانند id، CSS، XPath، انتخابگرهای مبتنی بر برچسب و غیره.

ℹ️ Cypress از مکان یاب های مختلفی مانند برچسب ها، شناسه، کلاس، ویژگی ها، متن و غیره پشتیبانی می کند. Cypress همچنین از XPath Selectors پشتیبانی می کند. با این حال، به نصب افزونه شخص ثالث cypress-xpath نیاز دارد. Xpath خارج از جعبه در چارچوب Cypress پشتیبانی نمی شود.

برای واکشی عنصر HTML در Cypress با استفاده از انواع مکان یاب cy.get() روش استفاده می شود.

چرا به Locators نیاز داریم؟

ما به Locators نیاز داریم تا بتوانیم عناصر موجود در صفحه را دستکاری کنیم، همانطور که کاربر به صورت دستی با آنها تعامل می کند. به عنوان مثال: برای کلیک بر روی یک عنصر خاص یا تایپ یک متن، ابتدا باید دقیقاً کدام عنصر را در صفحه پیدا کنید.

با دادن آنچه تاکنون می دانیم، بیایید این را عملی کنیم.

1: یک فایل آزمایشی دیگر در زیر ایجاد کنید /e2e/intro پوشه و برای مثال آن را فراخوانی کنید locators.cy.js. کد زیر را در آن فایل بنویسید.

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

describe('Locators: Get elements by different locator strategies', () => {
  beforeEach('Navigate to test page', () => {
    cy.visit('/automation-practice-form');
  });

  it('Check different locators strategies', () => {
    // By id
    cy.get('#firstName');

    // By tag name
    cy.get('input');

    // By attribute name
    cy.get('[placeholder]');

    // By attribute name and value
    cy.get('[placeholder="First Name"]');

    // By class name
    cy.get('.col-md-3');

    // By class value
    cy.get('[class="mr-sm-2 form-control"]');

    // By tag name and attribute with value
    cy.get('input[placeholder="First Name"]');

    // By different attributes
    cy.get('[placeholder="First Name"][id="firstName"]');

    // By tag name, attribute with value, ID and class name
    cy.get('input[placeholder="First Name"]#firstName.form-control');

    // // Recommended way - unique attribute + value
    // cy.get('[data-test="first_name"]');
  });

  it('Check finding elements by travelling through DOM', () => {
    // Travel through DOM to find Submit button
    cy.get('#firstName').parents('form').find('button').should('contain', 'Submit');
  });
});

توضیح کد:

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

• در تست اول مشاهده می کنید که ما در تلاش هستیم تا با استفاده از استراتژی های مکان یاب مختلف با استفاده از تابع cypress عناصر را بدست آوریم. get(). برای برخی از آنها عناصر یافت شده منحصر به فرد خواهد بود و برای برخی از آنها خواهید دید که سرو با مکان یابی که ما مشخص کرده ایم چندین عنصر پیدا کرده است.

همیشه بهترین روش استفاده از استراتژی های مکان یاب منحصر به فرد است، مانند داشتن یک ویژگی منحصر به فرد برای آزمایش (data-test برای مثال)، یا اگر در برنامه وجود ندارد، می‌توانید استفاده کنید id به عنوان دومین مکان یاب برتر اغلب اتفاق می افتد که عناصر نیز شناسه ندارند، بنابراین سعی می کنید ویژگی هایی با مقادیر منحصر به فرد یا ترکیبی از آنها پیدا کنید. فقط از کلاس ها و برچسب ها استفاده نکنید، زیرا آن عناصر منحصر به فرد نیستند.

• در آزمایش دوم، می‌توانید نمونه‌ای از نحوه سفر از طریق DOM برای یافتن عناصر در صورتی که عنصر شما دارای ارزش منحصربه‌فرد نباشد را مشاهده کنید. کاری که ما اینجا انجام دادیم این است:

می خواستیم پیدا کنیم ارسال دکمه در فرم بیایید وانمود کنیم که آن دکمه هیچ عنصر منحصر به فردی ندارد. کار بعدی که انجام دادیم این است که یک عنصر در فرم موجود در صفحه پیدا کردیم که دارای ارزش منحصر به فردی است. ما والد آن – فرم را پیدا کردیم، سپس در داخل فرم همه دکمه ها را پیدا کردیم. از آنجایی که ما به یک دکمه خاص نیاز داریم، این ادعا را اضافه کردیم که آن دکمه باید حاوی متن باشد ارسال. توجه داشته باشید که متن نمایش داده شده در صفحه و متنی که در واقع در DOM است می تواند متفاوت باشد و اغلب به دلیل قالب بندی CSS است. همیشه از متنی استفاده کنید که می توانید در DOM ببینید، دقیقاً چگونه در DOM نوشته شده است.

2: بیایید این تست را در Cypress CLI اجرا کنیم و ببینیم چه چیزی بدست می آوریم:

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

می بینید که ما دکمه ارسال منحصر به فرد را با سفر از طریق DOM پیدا کرده ایم.

🌟 نکات:

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

همچنین می‌توانید از ابزارهای توسعه‌دهنده داخل Cypress CLI (انتخاب عنصر، گزارش‌های کنسول برنامه، گزارش‌های شبکه و غیره) استفاده کنید:

ℹ️ اطلاعات بیشتر درباره مکان یاب:
گرفتن
بهترین شیوه ها
یافتن عناصر html
مکان یاب ها

ادعاها

ادعاها با تأیید موفقیت یا شکست مراحل خاص، نقش مهمی در موارد آزمایش خودکار بازی می‌کنند. آنها برای تأیید وضعیت مورد نظر عناصر، اشیاء یا برنامه در حال آزمایش هستند. برای مثال، ادعاها به شما اجازه می‌دهند تا تأیید کنید که آیا یک عنصر قابل مشاهده است، دارای یک ویژگی خاص، کلاس CSS یا حالت است. اکیداً توصیه می‌شود که تمام موارد تست خودکار شامل مراحل ادعا باشند. بدون آنها، اعتبار سنجی اینکه آیا برنامه به حالت مورد انتظار دست یافته است، غیر عملی می شود. Cypress دارای ادعاهایی از کتابخانه‌های Chai، Sinon و jQuery است که مجموعه‌ای از قابلیت‌های ادعا را ارائه می‌دهد.

انواع مختلف اظهارات سرو کدامند؟

Cypress چندین ادعا را از کتابخانه های مختلف JS assertion مانند Chai، jQuery و غیره ادغام می کند. ما می توانیم به طور کلی همه این ادعاها را بر اساس موضوعی که می توانیم آنها را فراخوانی کنیم به دو بخش طبقه بندی کنیم:

ادعاهای ضمنی

هنگامی که این ادعا برای شیء ارائه شده توسط فرمان زنجیره ای والد اعمال می شود، به آن ادعای ضمنی می گویند. علاوه بر این، این دسته از ادعاها به طور کلی شامل دستوراتی مانند .should() و .and(). از آنجایی که این دستورات مستقل نیستند و همیشه به دستور والد زنجیره‌ای قبلی بستگی دارند، به‌طور خودکار به ارث می‌برند و بر روی شی به دست آمده توسط فرمان قبلی عمل می‌کنند.

به طور کلی، زمانی که می خواهیم از اظهارات ضمنی استفاده می کنیم:

• اعتبارسنجی های متعددی را در مورد یک موضوع اعلام کنید.
• قبل از اظهار نظر در مورد موضوع موضوع را تغییر دهید.

ادعاهای صریح

زمانی که نیاز به گذراندن موضوع صریح برای ادعا باشد، در دسته ادعای صریح قرار می گیرد. این دسته از ادعاها شامل دستوراتی مانند expect() و assert()، که به شما امکان می دهد یک موضوع / شی صریح را منتقل کنید.

به طور کلی، زمانی که بخواهید از «ادعاهای صریح» استفاده می کنید:

• قبل از اظهار نظر در مورد موضوع مورد نظر، منطق سفارشی را انجام دهید.
• پس از اعمال منطق سفارشی، چندین ادعا را علیه یک موضوع مشابه انجام دهید.

متداول ترین اظهارات مورد استفاده هستند باید و انتظار. ادعا کنید معمولاً در تست e2e استفاده نمی شود، بلکه در تست واحد یا تست جزء استفاده می شود. بیایید سعی کنیم چند کد بنویسیم و دو نوع را که اغلب در تست‌های e2e استفاده می‌شوند با هم مقایسه کنیم:

اضافه کردن تست جدید به locators.cy.js فایل و تست را اجرا کنید:

  it('Check different types of assetions', () => {
    // Should assertion
    cy.get('[for="gender-radio-2"]')
      .should('contain', 'Female')
      .and('have.class', 'custom-control-label');

    // Expect assertion
    cy.get('[for="gender-radio-2"]').then((element) => {
      expect(element).to.have.text('Female');
      expect(element).to.have.class('custom-control-label');
    });
  });

توضیح کد:

این دو ادعا در حال آزمایش یک چیز هستند – ابتدا آنها ادعا می کنند که گزینه ای برای انتخاب جنسیت “مونث” (متن را جستجو می کند) در فرم وجود دارد و سپس بررسی می کنند که آیا آن عنصر دارای کلاس است یا خیر. custom-control-label. اینها فقط نمونه هایی از روش های ادعا هستند که در طول این کارگاه شاهد موارد بیشتری از آنها خواهیم بود. مگر اینکه با عناصر پیچیده JQuery و دستکاری آنها یا ادعاهای API سر و کار داشته باشید، توصیه می شود به آن پایبند باشید. .should نحو.

ℹ️ اطلاعات بیشتر درباره اظهارات سرو:

چای
اظهارات سرو به طور کلی

مشق شب

تست‌های بیشتری بنویسید که سعی می‌کنند عناصر را در صفحه دموکا بیابند و ادعاهای مختلفی را روی آن عناصر انجام دهند (آن عنصر قابل مشاهده است، عنصر قابل مشاهده نیست، متن قابل مشاهده است یا نه، عنصر حاوی کلاس خاصی است، تعداد عناصر پیدا شده در صفحه را بررسی کنید ( طول) و غیره

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

git add .

git commit -am "add: locators and assertions tests"

git push

شما شگفت انگیز انجام می دهید، شما را در درس 5 می بینم!

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

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