使用 Cypress 根据后端的值有条件地断言 DOM 中的元素值？

发布于 2025-01-13 02:02:41 字数 479 浏览 2 评论 0原文

尝试使用我的 React 应用程序进行 Cypress 测试。

我正在从后端检索具有属性 expirationDate 的对象。它是一个格式为 YYYYMMDD 的整数。在组件中相应的前端中，它呈现为 YYYY-MM-DD 字符串。

但是，该对象可以选择根本没有到期日期，而是表示为 -1 或 -2 属性。这在中显示为空字符串 ''。

因此我需要有条件地检查该值。我该如何使用 Cypress 来做到这一点？

我现在最接近的是

cy.get('#input-expiration-date').should('have.value', expirationDate || '')

但这并不是对上述条件的准确测试。

原文

Trying to do Cypress Testing with my React app.

I'm retrieving an object with an attribute expirationDate from the backend. It's an integer with format YYYYMMDD. In my corresponding frontend in the <input> component, it's rendered as an YYYY-MM-DD string.

However the object may optionally not have an expiration date at all, which is instead represented as the attribute being -1 or -2. This is presented as an empty string '' in the <input>.

I thus need to conditionally check the value. How do I go about doing this with Cypress?

Closest I have right now is

cy.get('#input-expiration-date').should('have.value', expirationDate || '')

But this is not really an accurate test of the above conditions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧话新听 2025-01-20 02:02:41

条件测试可以按如下方式完成，但这是不好的做法。

cy.get('#input-expiration-date')
  .invoke('val')
  .then(val => {
    
    if (val === expirationDate) {     // fails because page is still fetching
      ...
    }
  })

测试的运行速度快于从服务器获取值的速度。

您可以通过使用 cy.intercept() 等待对象获取并然后进行条件检查来避免此问题。

let expirationDate = 'YYYYMMDD'

cy.intercept(url).as('object')

cy.visit(...)

cy.wait('@object').then(object => {

  if (object.expirationDate) {
    cy.get('#input-expiration-date')
      .should('have.value', expirationDate)
  }
})

Conditional testing can be done as follows, but this is bad practice.

cy.get('#input-expiration-date')
  .invoke('val')
  .then(val => {
    
    if (val === expirationDate) {     // fails because page is still fetching
      ...
    }
  })

The test runs faster than the value can be fetched from the server.

You can avoid the issue by waiting for the object fetch with cy.intercept() and do the conditional check then.

let expirationDate = 'YYYYMMDD'

cy.intercept(url).as('object')

cy.visit(...)

cy.wait('@object').then(object => {

  if (object.expirationDate) {
    cy.get('#input-expiration-date')
      .should('have.value', expirationDate)
  }
})

回复收藏 0 原文

许你一世情深 2025-01-20 02:02:41

您可以使用 Chai 方法 oneOf() 。

Cypress 在内部使用 Chai，因此表达式在 .should() 内部工作。

cy.get('#input-expiration-date')
  .invoke('val')
  .should('have.oneOf', [expirationDate, ''])

直接使用 Chai

cy.get('#input-expiration-date').then($input => {
  expect($input.val()).to.have.oneOf([expirationDate, ''])
})

There a Chai method oneOf() you can use.

Cypress uses Chai internally, so the expression works inside .should().

cy.get('#input-expiration-date')
  .invoke('val')
  .should('have.oneOf', [expirationDate, ''])

Using Chai directly

cy.get('#input-expiration-date').then($input => {
  expect($input.val()).to.have.oneOf([expirationDate, ''])
})

回复收藏 0 原文

半窗疏影 2025-01-20 02:02:41

使用 cy.intercept() 获取来自后端的值。

一般方法（可能会根据响应模式而有所不同）：

cy.intercept('some-api-request').as('api')

// trigger the backend request/response
cy.get('button').click()


cy.wait('api').then(interception => {

  const obj = interception.response.body;     // extract object
  const expirationDate  = obj.expirationDate  // and it's expirationDate 
  const hasNoExpiration = expirationDate === -1 && expirationDate === -2

  cont expectedValue = hasNoExpiration ? '' : 
    `${expirationDate.slice(0,4)}-${expirationDate.slice(4,2)}-${expirationDate.slice(6,2)}`

  cy.get('#input-expiration-date').should('have.value', expectedValue)

})

您还可以更进一步，通过存根消除任何后端变化

cy.intercept('some-api-request', {body: { expirationDate: -1 }).as('api')

// trigger the backend request/response
cy.get('button').click()

cy.wait('api')
cy.get('#input-expiration-date').should('have.value', '')

cy.intercept('some-api-request', {body: { expirationDate: '20220319' }).as('api')

// trigger the backend request/response
cy.get('button').click()

cy.wait('api')
cy.get('#input-expiration-date').should('have.value', '2022-03-19')

Use cy.intercept() to get the value coming from the back-end.

General approach (may vary depending on response pattern):

cy.intercept('some-api-request').as('api')

// trigger the backend request/response
cy.get('button').click()


cy.wait('api').then(interception => {

  const obj = interception.response.body;     // extract object
  const expirationDate  = obj.expirationDate  // and it's expirationDate 
  const hasNoExpiration = expirationDate === -1 && expirationDate === -2

  cont expectedValue = hasNoExpiration ? '' : 
    `${expirationDate.slice(0,4)}-${expirationDate.slice(4,2)}-${expirationDate.slice(6,2)}`

  cy.get('#input-expiration-date').should('have.value', expectedValue)

})

You can also go one step further and eliminate any backend variation by stubbing

cy.intercept('some-api-request', {body: { expirationDate: -1 }).as('api')

// trigger the backend request/response
cy.get('button').click()

cy.wait('api')
cy.get('#input-expiration-date').should('have.value', '')

cy.intercept('some-api-request', {body: { expirationDate: '20220319' }).as('api')

// trigger the backend request/response
cy.get('button').click()

cy.wait('api')
cy.get('#input-expiration-date').should('have.value', '2022-03-19')

回复收藏 0 原文

旧人哭 2025-01-20 02:02:41

你可以这样做：

cy.get('#input-expiration-date').then(element => {
//and here you can have conditions and access the DOM element

})

you can do:

cy.get('#input-expiration-date').then(element => {
//and here you can have conditions and access the DOM element

})

回复收藏 0 原文

原野 2025-01-20 02:02:41

或者，如果您想检查并根据该值进一步执行一些操作，您可以执行以下操作：

cy.get('#input-expiration-date')
  .invoke('val')
  .then((val) => {
    if (val == expirationDate) {
      //Do something
    } else if (val == '') {
      // Do something
    } else {
      //Do something
    }
  })

Or if you want to check and further do some actions based on the value, you can do something like this:

cy.get('#input-expiration-date')
  .invoke('val')
  .then((val) => {
    if (val == expirationDate) {
      //Do something
    } else if (val == '') {
      // Do something
    } else {
      //Do something
    }
  })

回复收藏 0 原文

~没有更多了~