Cypress测试如何通过trim处理空格判断两个元素内容是否一致

问题原因 #

你的修改存在两处问题：

• 仅对input的取值做了trim处理，但是存在首尾空格的td元素文本没有做去空处理，两边内容还是无法匹配
• 语法错误：toString.trim()写法错误，toString是方法，需要加括号调用，应为toString().trim()

修复方案 #

方案一：使用Cypress内置的trim文本断言（推荐）

Cypress 原生支持have.trimmed.text断言，会自动去除目标元素文本的首尾空白后再做匹配，代码最简洁：

Cypress.Commands.add('compareInputToText', (inputSelector, textSelector) => {
  cy.get(inputSelector)
    .invoke('val')
    .then(currentValue => {
      const expectedValue = currentValue?.toString().trim() || ''
      cy.get(textSelector)
        .should('have.trimmed.text', expectedValue)
    })
})

方案二：手动取出文本做去空对比

如果需要自定义处理逻辑，可以主动取出td的文本做trim之后再断言：

Cypress.Commands.add('compareInputToText', (inputSelector, textSelector) => {
  cy.get(inputSelector)
    .invoke('val')
    .then(currentValue => {
      const expectedValue = currentValue?.toString().trim() || ''
      cy.get(textSelector)
        .invoke('text')
        .then(actualText => {
          expect(actualText.trim()).to.equal(expectedValue)
        })
    })
})

内容的提问来源于stack exchange，提问作者Luca