如何在Cypress中测试字符串长度不超过指定字符数

你当前写的代码无法实现字符串长度校验的需求，存在两个核心错误：

• 直接对cy.get()返回的DOM元素对象做长度断言，此时length属性指代的是匹配到的DOM元素数量，不是输入框内的文本长度
• 断言参数的引号书写错误，且没有提前获取输入框的实际值，断言作用对象完全错误

根据校验对象的不同，分两种常见场景写断言：

场景1：校验输入框内输入内容的长度 #

需要先通过invoke('val')拿到输入框的value值，再做长度判断：

// 输入测试文本
cy.get('[data-testid="textfield"]').type('Automation')

// 校验内容长度 ≤ 100（即最多100字符）
cy.get('[data-testid="textfield"]')
  .invoke('val')
  .should('have.length.of.at.most', 100)

// 如果要严格校验长度 < 100（即小于100字符），写法如下
cy.get('[data-testid="textfield"]')
  .invoke('val')
  .then(inputVal => {
    expect(inputVal.length).to.be.lessThan(100)
  })

场景2：校验普通文本元素的展示内容长度 #

针对非输入框的普通页面文本元素，用invoke('text')拿到展示文本后再断言：

cy.get('[data-testid="target-text-node"]')
  .invoke('text')
  .should('have.length.of.at.most', 100)

提示：所有针对文本内容的长度校验，都必须先取出元素对应的字符串值，不能直接对DOM元素对象调用长度断言，否则校验的是匹配到的DOM节点数量，和预期校验目标完全不符。

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