reactjs - سایپرس هنگام کلیک، آیا روشی وجود دارد تا صبر کند تا DOM بارگذاری شود؟ (بدون استفاده از wait())

من یک مشکل کوچک در پروژه React دارم، وقتی میخواهم از .click() در Cypress استفاده کنم، گاهی اوقات خطا failed because this element is detached from the dom. رخ میدهد. راه حل ساده این است که قبل از هر تست wait() اضافه کنیم تا اجازه دهد سایت به طور کامل رندر شود، اما این بهترین راه حل برای من نیست. آیا راهی هست که بدون استفاده از wait() این کار را انجام داد؟

پاسخ شماره ۱

این مربوط به یک مشکل شناختهشده در سیپرس است که آنها قول دادهاند به زودی آن را برطرف کنند: https://github.com/cypress-io/cypress/issues/7306

تا زمانی که این مشکل حل شود، شما میتوانید یا .wait() را اضافه کنید، اگر برای سناریوی شما کار میکند، یا به صورت جایگزین .click({force: true}) را امتحان کنید. هر دوی اینها با این حال دارای نقاط ضعف هستند.

پاسخ شماره ۲

اسناد سایپرس دوست شما هستند =)

من این وبلاگ را در داکیومنتها پیدا کردم. در آن استفاده از cypress-pipe برای داشتن یک تابع callback قبل از assertion توضیح داده شده است.

// create a click function as pipe does not take any cypress commands
const click = $el => $el.click()

cy.get('.your-element')
  .should('be.visible')
  .pipe(click)
  .should($el => {
    // whatever assertion you need after your click event is attached
  })

// calendar should close on the user click
cy.get('.owl-dt-popup').should('not.be.visible')