تست E2E در React with Cypress

Summarize this content to 400 words in Persian Lang

مقدمه

در مقاله سپتامبر، من در مورد چگونگی راه اندازی Cypress برای فعال کردن تست انتها به انتها در React نوشتم و دو روش برای اجرای تست ها (از طریق رابط و از طریق ترمینال) را نشان دادم. در حال حاضر، ایده این است که نشان دهیم تست چگونه کار می کند، همراه با چند مفهوم و مثال.

ساختار تست ها

ساختار آزمون از این فرمت پیروی می کند:

describe: نشان دهنده بلوک آزمایشی است که باید اجرا شود، که می تواند به یک زمینه یا جریان خاص اشاره کند
it: نشان دهنده آزمایشی است که باید اجرا شود، با دنبال کردن این مراحل

به صفحه ای که آزمون شروع می شود دسترسی داشته باشید
یک عنصر HTML را روی صفحه جستجو کنید
تعامل با عنصر
یک ادعا برای آزمون تعریف کنید

describe(“Block description”, () => {
it(“test description”, () => {
access the page
search for an element on the screen
interaction with the element

test assertion
})

it(“another test description”, () => {
(…)
})
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

به صفحه دسترسی داشته باشید

برای دسترسی به یک صفحه، cy.visit() استفاده خواهد شد، که امکان پیمایش به یک URL را می دهد که به عنوان نقطه شروع آزمایش ها عمل می کند.

یک عنصر را روی صفحه جستجو کنید

راه های مختلفی برای جستجوی عناصر HTML وجود دارد. در اینجا چند نمونه آورده شده است:

پرس و جو
جستجو کنید
کد

شامل
توسط متن
حاوی (متن)

دریافت کنید
توسط انتخابگر
دریافت (انتخاب کننده)

جستجو با استفاده از get می توان به روش های مختلف انجام داد:

جستجو کنید
مثال

توسط data-cy
cy.get('[data-cy=”example”]')

با نام
cy.get('[name=”submit”]')

توسط شناسه
cy.get('#اصلی')

با نام کلاس
cy.get('.btn')

بر اساس نقش
cy.get ('دکمه')

را data-cy مطابق با تعریف عنصری است که برای مکان یابی آن در آزمایشات انحصاری است.

تعامل با عنصر

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

تعامل
اقدام

کلیک کنید()
کلیک کنید

dblclick()
دوبار کلیک کنید

type()
یک متن را تایپ کنید

چک ()
چک باکس/دکمه رادیویی

تیک ()
علامت چک را بردارید

ارسال ()
یک فرم ارسال کنید

ادعای آزمایشی

برای تعریف ادعای آزمون should() استفاده خواهد شد که دارای نام مستعار است and(). در اینجا چند راه موجود وجود دارد:

ادعا
اعتبار سنجی

باید ('have.value', value)
ارزش

باید ('be.enabled')
فعال است

باید ('be.disabled')
از کار افتاده است

باید (“حاوی”، متن)
متن

باید ('have.length', طول)
طول

باید (“وجود”)
وجود

باید ('شامل')
شمول

برای تأیید نفی ادعاها، not. را می توان به عنوان قسمت اول در داخل قرار داد shouldبه عنوان مثال should(‘not.exist’).

اجرای تست ها

در مقاله ماه گذشته لینک شده در مقدمه این مقاله، دو روش برای اجرای تست ها در package.json از طریق رابط و از طریق ترمینال تعریف شدند:

{
“scripts”: {
//…
“cy:open”: “cypress open”, // interface
“cy:run”: “cypress run” // terminal
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای اجرای تست ها به صورت محلی در Cypress، ابتدا برنامه باید به صورت محلی در یک ترمینال راه اندازی شود و سپس تست ها در ترمینال دیگر اجرا شود.از آنجایی که هنگام راه‌اندازی برنامه به صورت محلی، همان پورت تعریف می‌شود، و برای جلوگیری از نوشتن نقطه شروع یکسان در مرحله اول همه آزمایش‌ها (به عنوان مثال، شروع از پورت 3000)، می‌توانید این را در cypress.config.js:

const { defineConfig } = require(‘cypress’)

module.exports = defineConfig({
e2e: {
baseUrl: ‘http://localhost:3000’,
},
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به این ترتیب، هر آزمونی که با آن شروع می شود cy.visit(“https://dev.to/”) به صفحه هدایت خواهد شد http://localhost:3000/.مشاهده: هنگام اجرای آزمایش در خطوط لوله محیطی آزمایشی، یک ENV متغیر را می توان در آن تنظیم کرد baseUrl برای دسترسی به url مورد انتظار مرتبط با محیطی که آزمایش ها در آن اجرا می شوند.

نمونه تست ها

برای مثال های زیر، از صفحه نمونه ای که خود Cypress ارائه می دهد استفاده می شود: https://example.cypress.ioبرای این مقاله نشان‌دهنده آدرس اینترنتی مربوط به برنامه‌ای است که به صورت محلی در ترمینال اجرا می‌شود.از آنجایی که همه مثال‌ها از این url شروع می‌شوند، به عنوان baseUrl در تنظیم می‌شود cypress.config.js:

const { defineConfig } = require(‘cypress’)

module.exports = defineConfig({
e2e: {
baseUrl: ‘https://example.cypress.io’,
},
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

آزمون حضوری

در این آزمایش اول، بررسی می‌شود که آیا پس از کلیک کردن بر روی پیوندی در صفحه نمونه Cypress، به صفحه مورد انتظار می‌رسیم (ایجاد ادعا در آدرس اینترنتی) و اینکه آیا عناصر خاصی روی صفحه وجود دارد یا خیر.ابتدا فایل را در داخل قرار می دهد cypress/e2e پوشه، جایی که Cypress به دنبال تست هایی برای اجرا می گردد و نام فایل را نامگذاری می کند presence.cy.js:

describe(‘Presence tests’, () => {
beforeEach(() => {
cy.visit(‘/’)

cy.contains(‘get’).click()
})

it(‘reach expected page’, () => {
cy.url().should(‘include’, ‘/commands/querying’)
})

it(‘has queries options’, () => {
cy.get(‘#querying’).should(‘contain’, ‘get()’)
.and(‘contain’, ‘contains()’)
.and(‘contain’, ‘within()’)
.and(‘contain’, ‘root()’)
})
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این بلوک آزمایشی ابتدا به صفحه مثال Cypress و سپس لینک حاوی متن دسترسی پیدا می کند get کلیک شده است. از آنجایی که تمام تست ها در بلوک یکسان شروع می شوند، این قسمت در داخل a قرار گرفت beforeEach قبل از آزمایشاتدر اولین آزمایش، انتظار می رود که صفحه ای که به آن رسیده است شامل شود /commands/querying در url و در آزمون دوم، انتظار می رود که پرس و جوهای مختلف موجود بر روی صفحه نمایش داده شوند و با متن آنها اعتبارسنجی شود.

در حال دویدن yarn cy:run در ترمینال اطلاعاتی در مورد نتایج آزمایش برمی‌گرداند که برای توضیح بیشتر آن‌ها را قسمت‌هایی می‌شکنم.ابتدا جزئیات اجرا، از جمله نسخه Cypress مورد استفاده، مرورگر، نسخه گره، تعداد فایل‌های آزمایشی و محل بازیابی آنها را نشان می‌دهد:

در مرحله بعد، فایل اجرا شده، بلوک تست، و تست‌های انجام شده (با یک نشانگر مثبت که نشان می‌دهد آزمون قبول شده) را به همراه تعداد کل تست‌های گذرانده نمایش می‌دهد:

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

در نهایت، جدولی وجود دارد که فایل اجرا شده، زمان اجرا، تعداد تست‌ها، تعداد تست‌هایی که قبول شده‌اند، چند مورد ناموفق، چند مورد در انتظار و چند مورد نادیده گرفته شده را نشان می‌دهد. از آنجایی که تمام آزمایشات گذرانده شده است، پیام را نشان می دهد All specs passed!:

راه دیگر برای اجرای تست ها از طریق رابط است که مراحل زیر را دنبال کنید:

اجرا کنید yarn cy:open

را انتخاب کنید E2E Testing جعبه
مرورگر مورد نظر خود را انتخاب کنید
را کلیک کنید Start E2E Testing

روی فایلی که می خواهید اجرا کنید کلیک کنید
منتظر بمانید تا تست ها اجرا شوند

در حین اجرا، با توجه به تست ها، ناوبری در سمت راست نمایش داده می شود. پس از اتمام اجرا، بلوک تست اجرا شده و تست ها در سمت چپ ظاهر می شوند. در این صورت، از زمانی که آنها گذشتند، یک شاخص مثبت در کنار آنها وجود خواهد داشت. در سمت راست، نقطه ای که اجرا متوقف شد نشان داده می شود:

در سمت چپ، می‌توانید یکی از تست‌ها را باز کنید و روی هر قسمتی که در داخل تست اجرا شده است بروید تا در سمت راست ببینید که در حین پیمایش کجا بودید:

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

بخش نتایج با رنگ قرمز برجسته می شود، که نشان می دهد یک آزمایش شکست خورده است و یک اسکرین شات گرفته شده است که نشان می دهد صفحه نمایش در لحظه شکست چگونه به نظر می رسید:

در نهایت، جدولی نشان می‌دهد که از بین دو آزمون، یکی قبول شده و دیگری شکست خورده است، با یک برجسته قرمز در پایین 1 of 1 failed (100%). این اطلاعات به تعداد بلوک‌های تست شکست خورده اشاره دارد، نه خود آزمایش‌های فردی. از آنجایی که Presence tests یک بلوک در داخل آن یک تست ناموفق داشت، کل بلوک شکست خورده در نظر گرفته می شود:

در مورد اجرا از طریق رابط، به طور خاص نشان می دهد که در آن تست شکست خورده است، با تصویر نمایش داده شده در کنار آن:

تست تعاملات چندگانه

در این تست پس از کلیک بر روی type پیوند در صفحه مثال Cypress، در صورت رسیدن به صفحه مورد انتظار (با ذکر آدرس) تأیید می شود و پس از وارد کردن متن در یک فیلد ورودی، بررسی می شود که آیا مقدار داخل آن با آنچه نوشته شده مطابقت دارد یا خیر.فایل در داخل قرار خواهد گرفت cypress/e2e پوشه، جایی که Cypress به دنبال تست هایی برای اجرا می گردد و نام فایل را نامگذاری می کند actions.cy.js:

describe(‘Actions tests’, () => {
beforeEach(() => {
cy.visit(‘/’)

cy.contains(‘type’).click()
})

it(‘reach expected page’, () => {
cy.url().should(‘include’, ‘/commands/actions’)
})

it(‘fill email address’, () => {
cy.contains(‘Email address’).next().type(‘example@aloha.com’)

cy.contains(‘Email address’).next().should(‘have.value’, ‘example@aloha.com’)
})
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این بلوک تست، next() برای دسترسی به عنصر HTML بلافاصله بعد از عنصر جستجو شده استفاده می شود. به این ترتیب، امکان دسترسی به فیلد ورودی برای پر کردن آن وجود دارد که بعد از عنوان جستجو شده قرار دارد. پس از اجرا، تست ها با موفقیت سپری می شوند.

بهترین شیوه ها

اسناد Cypress بهترین شیوه‌هایی را که باید در طول آزمایش دنبال کنید، تشریح می‌کند. در زیر تعدادی از آنها را ارائه می کنم:

جهانی را تعریف کنید baseUrl

برای تست هایی که همیشه از یک دامنه شروع می شوند، مقدار را تنظیم کنید baseUrl در cypress.config.js:

const { defineConfig } = require(‘cypress’)

module.exports = defineConfig({
e2e: {
baseUrl:,
},
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده کنید beforeEach برای کد مشترک بین تست ها

توصیه می شود کد اشتراکی را در داخل a قرار دهید beforeEach:

beforeEach(() => {
// shared code
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چندین ادعا را با هم بیان کنید

به‌جای تفکیک ادعاها به آزمون‌های مختلف برای یک عنصر، چندین ادعا بنویسید:

// Not recommended
it(‘has get query option’, () => {
cy.get(‘[data-cy=”queries”]’).should(‘contain’, ‘get()’)
})

it(‘has within query option’, () => {
cy.get(‘[data-cy=”queries”]’).should(‘contain’, ‘within()’)
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

// Recommended
it(‘has queries options’, () => {
cy.get(‘[data-cy=”queries”]’).should(‘contain’, ‘get()’)
.and(‘contain’, ‘within()’)
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اولویت جستجوی عنصر

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

<button
id=”example”
class=”btn-primary”
name=”submission”
role=”button”
data-cy=”primary”
>
Submit
</button>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در زیر ترتیب افزایش اولویت و دلایل ارائه شده در مستندات آمده است:

انتخابگر
توصیه می شود
دلیل

cy.get('button'). کلیک کنید()
هرگز
بدترین – بیش از حد عمومی، بدون زمینه

cy.get('.btn-primary').click()
هرگز
بد همراه با یک ظاهر طراحی شده. به شدت در معرض تغییر است

cy.get('#example'). کلیک کنید()
کم کم
بهتر است. اما همچنان با استایل یا شنوندگان رویداد JS همراه است

cy.get('[name=”submission”]'). کلیک کنید()
کم کم
جفت شده به name ویژگی که دارای معنای HTML است

cy.contains('Submit'). کلیک کنید()
بستگی دارد
خیلی بهتره اما همچنان با محتوای متنی همراه است که ممکن است تغییر کند

cy.get('[data-cy=”primary”]'). کلیک کنید()
همیشه
بهترین. جدا از همه تغییرات

نتیجه گیری

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

پیوندها

نگارش و سازماندهی آزمون هامراحل اجرای تستبهترین شیوه هادستوراتدسترسی به آدرس اینترنتیجستجو با استفاده از getتعاملاتادعاهااجرای تست ها

describe("Block description", () => {
  it("test description", () => {
    access the page
    search for an element on the screen
    interaction with the element

    test assertion
  })

  it("another test description", () => {
    (…)
  })
})

{
  "scripts": {
    //...
    "cy:open": "cypress open", // interface
    "cy:run": "cypress run" // terminal
  }
}

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
  },
})

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://example.cypress.io',
  },
})

describe('Presence tests', () => {
  beforeEach(() => {
    cy.visit('/')

    cy.contains('get').click()
  })

  it('reach expected page', () => {
    cy.url().should('include', '/commands/querying')
  })

  it('has queries options', () => {
    cy.get('#querying').should('contain', 'get()')
                       .and('contain', 'contains()')
                       .and('contain', 'within()')
                       .and('contain', 'root()')
  })
})

describe('Actions tests', () => {
  beforeEach(() => {
    cy.visit('/')

    cy.contains('type').click()
  })

  it('reach expected page', () => {
    cy.url().should('include', '/commands/actions')
  })

  it('fill email address', () => {
    cy.contains('Email address').next().type('example@aloha.com')

    cy.contains('Email address').next().should('have.value', 'example@aloha.com')
  })
})

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl:,
  },
})

beforeEach(() => {
// shared code
})

// Not recommended
it('has get query option', () => {
  cy.get('[data-cy="queries"]').should('contain', 'get()')
})

it('has within query option', () => {
  cy.get('[data-cy="queries"]').should('contain', 'within()')
})

// Recommended
it('has queries options', () => {
  cy.get('[data-cy="queries"]').should('contain', 'get()')
                               .and('contain', 'within()')
})

<button
  id="example"
  class="btn-primary"
  name="submission"
  role="button"
  data-cy="primary"
>
  Submit
</button>