如何在Cypress中使用TypeScript获取网页文本

1. 前置准备 #

确保你的Cypress项目已经完成TypeScript基础配置，Cypress 7.0及以上版本默认支持TypeScript，只需在项目根目录补充符合要求的tsconfig.json即可，核心配置参考如下：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": ["**/*.ts"]
}

2. 单个元素文本提取 #

选中目标元素后调用invoke('text')即可获取文本内容，可直接添加TS类型标注保证类型安全：

// 提取class为article-title的元素文本
cy.get('.article-title')
  .invoke('text')
  .then((titleText: string) => {
    // 处理提取到的文本
    const cleanedTitle = titleText.trim()
    // 可直接用于断言或存储到全局变量供后续用例调用
    expect(cleanedTitle).to.eq('预期标题')
    Cypress.env('currentPageTitle', cleanedTitle)
  })

3. 批量元素文本提取 #

如果要提取列表类的多个元素文本，可通过jQuery的map方法批量处理，TS会自动推导返回值类型：

// 提取商品列表所有项的名称
cy.get<HTMLLIElement>('ul.product-list li.item')
  .then($itemList => {
    // 批量提取文本并返回字符串数组
    const productNameList = $itemList.map((_, element) => {
      return Cypress.$(element).text().trim()
    }).get()
    // 后续可直接对数组做断言
    expect(productNameList).to.have.length(10)
    expect(productNameList).to.contain('测试商品A')
  })

4. 特殊场景处理 #

• 提取input/textarea等表单元素的输入内容，不要用invoke('text')，改用invoke('val')即可：

  cy.get<HTMLInputElement>('input#username')
    .invoke('val')
    .then((inputValue: string) => {
      console.log('输入框内容：', inputValue)
    })
  

• 动态渲染的文本不需要额外加等待逻辑，Cypress自带元素存在性重试，会等元素加载完成后自动执行文本提取操作

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