Cypress中正确获取和验证HTML元素文本内容的方法

苏承栈

2026-09-15 • 👁 0人浏览过

本文详细介绍了在cypress测试框架中如何准确获取并验证 html 元素的文本内容。核心在于区分`have.value`和`have.text`断言，前者适用于表单元素，后者则用于获取非表单元素的内部文本。此外，教程还演示了如何利用`invoke('text')`结合类型转换，对提取的数值文本进行高级的数值比较验证。 Cypress中HTML元素文本内容的提取与断言在进行前端自动化测试时，经常需要验证页面上各种元素的文本内容，例如标题、段落、或显示数据的区域。Cypress作为一款流行的端到端测试框架，提供了强大的断言机制来处理这些场景。然而，对于初学者来说，一个常见的困惑是何时使用have.value以及何时使用have.text。本文将深入探讨这两种断言的区别，并展示如何正确地提取和验证HTML元素的文本内容，包括高级的数值比较。理解 have.value 与 have.text 的区别 Cypress的should()命令可以与多种断言链式调用，其中have.value和have.text是用于验证元素内容的两种常见断言。它们的区别在于所针对的HTML元素类型和内容类型： have.value : 此断言主要用于验证表单元素（如、

、<select>）的value属性。例如，一个文本输入框的当前值。
have.text
: 此断言用于验证非表单元素（如<h1>、<span>、<p>、<div>等）的内部文本内容（即DOM节点之间的文本）。
常见误区：
许多用户在尝试获取<h1>或<span>这类元素的内部文本时，会错误地使用have.value。例如，对于以下HTML结构：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h1 class="heading-1 page-header-heading">Collectie</h1>
<span class="results">4655</span></code></div>
如果尝试使用cy.get('.heading-1').should('have.value', 'Collectie')，Cypress会报告错误，因为<h1>元素没有value属性，其内部文本不通过value属性暴露。
正确做法：使用 have.text
立即学习
“
前端免费学习笔记（深入）
”；
要正确获取并验证<h1>或<span>等元素的内部文本，应使用have.text断言。
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">// 验证<h1>元素的文本内容
cy.get('.heading-1').should('have.text', 'Collectie');

// 验证<span>元素的文本内容
cy.get('.results').should('have.text', '4655');</code></div>
此外，在选择元素时，为了提高选择器的精确性，可以组合使用多个类名：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">// 使用多个类名精确选择<h1>元素
cy.get('.heading-1.page-header-heading').should('have.text', 'Collectie');</code></div>
高级文本内容验证：数值比较
在某些场景下，元素的内部文本可能是一个数字，并且我们需要对其进行数值上的比较，例如判断一个数量是否大于某个阈值。在这种情况下，仅仅使用have.text断言是不够的，因为它只能进行字符串的精确匹配。
Cypress提供了invoke('text')命令来提取元素的内部文本，然后我们可以利用JavaScript的特性将其转换为数字，再进行数值比较。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">cy.get('.results')
  .invoke('text') // 提取<span>元素的内部文本，返回一个字符串
  .then((text) => +text) // 使用一元加号操作符将字符串转换为数字
  .should('be.gt', 4000); // 断言数字大于4000 (greater than)

cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.gte', 4000); // 断言数字大于或等于4000 (greater than or equal to)

cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.lt', 9000); // 断言数字小于9000 (less than)

cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.lte', 9000); // 断言数字小于或等于9000 (less than or equal to)</code></div>
在这个例子中：
cy.get('.results').invoke('text')：获取.results元素的内部文本，例如"4655"，它是一个字符串。
.then((text) => +text)：这是一个
回调函数
，text参数接收上一步获取的字符串。+text是JavaScript中将字符串快速转换为数字的一种方法（等同于Number(text)或parseInt(text, 10)）。
.should('be.gt', 4000)：Cypress集成了Chai断言库，be.gt（greater than）是Chai提供的数值比较断言，用于判断当前值是否严格大于4000。类似地，还有be.gte (greater than or equal to), be.lt (less than), be.lte (less than or equal to)。
总结与注意事项
区分 have.value 和 have.text
：这是Cypress中验证元素内容的关键。记住have.value用于表单元素的value属性，而have.text用于获取其他元素的内部文本。
精确选择器
：使用组合类名（如.class1.class2）可以更精确地定位元素，减少测试的脆弱性。
数值验证
：当需要对提取的文本进行数值比较时，务必使用invoke('text')获取文本，并通过then((text) => +text)将其转换为数字，再利用Chai的数值比较断言。
错误信息
：仔细阅读Cypress的错误信息。例如，"expected ... to have value ..., but the value was ''"通常意味着你错误地使用了have.value来验证非表单元素的内部文本。
掌握这些技巧将使您在Cypress中进行元素文本内容的验证更加高效和准确，从而构建出更健壮的自动化测试套件。
                            </div>

<nav class="jxgpc-article-nav" aria-label="文章导航">

<a href="http://www.jxgpc.com/pc/7268.html" class="jxgpc-article-nav-link jxgpc-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="jxgpc-article-nav-label">上一篇</div>
                                        <div class="jxgpc-article-nav-title">如何解决jquery参数乱码问题</div>
                                    </div>
                                </a>

<a href="http://www.jxgpc.com/pc/7329.html" class="jxgpc-article-nav-link jxgpc-article-nav-next">
                                    <div>
                                        <div class="jxgpc-article-nav-label">下一篇</div>
                                        <div class="jxgpc-article-nav-title">把jQuery的类、插件封装成seajs的模块的方法</div>
                                    </div>
                                    <span>›</span>
                                </a>

</nav>
                        </div>
                    </article>

<section class="jxgpc-content-section" style="margin-top: 20px;">
                        <h2 class="jxgpc-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="jxgpc-article-list">

<li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/7268.html" class="jxgpc-article-link">如何解决jquery参数乱码问题</a>
                                <div class="jxgpc-article-meta">2026-09-15</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/7266.html" class="jxgpc-article-link">现代网页设计必不可少的CSS3功能_html/css_WEB-ITnose</a>
                                <div class="jxgpc-article-meta">2026-09-15</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/7256.html" class="jxgpc-article-link">如何利用 WebAssembly 与 JavaScript 协同执行高性能计算任务？</a>
                                <div class="jxgpc-article-meta">2026-09-15</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/7254.html" class="jxgpc-article-link">js中什么是事件循环</a>
                                <div class="jxgpc-article-meta">2026-09-15</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/7250.html" class="jxgpc-article-link">浏览器的javascript设置在哪里开启</a>
                                <div class="jxgpc-article-meta">2026-09-15</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/7329.html" class="jxgpc-article-link">把jQuery的类、插件封装成seajs的模块的方法</a>
                                <div class="jxgpc-article-meta">2026-09-16</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/7355.html" class="jxgpc-article-link">如何使用JS+CSS3实现图片响应鼠标移动放大缩小</a>
                                <div class="jxgpc-article-meta">2026-09-16</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/7357.html" class="jxgpc-article-link">css Grid子元素跨行跨列grid-column grid-row使用</a>
                                <div class="jxgpc-article-meta">2026-09-16</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/7371.html" class="jxgpc-article-link">如何利用 JavaScript 实现一个简单的编译器前端，包括词法和语法分析？</a>
                                <div class="jxgpc-article-meta">2026-09-16</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/7376.html" class="jxgpc-article-link">node.js中的fs.ftruncate方法使用说明_node.js</a>
                                <div class="jxgpc-article-meta">2026-09-16</div>
                            </li>

</ul>
                    </section>
                </div>

<aside class="jxgpc-sidebar jxgpc-sidebar-right" aria-label="侧边栏">
    
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">推荐阅读</h3>
        <div class="jxgpc-recommend-grid">

<a href="http://www.jxgpc.com/pc/12871.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="bootstrap的form表单提交成功后，怎么清空表单内容_html/css_WEB-ITnose">
                </div>
                <div class="jxgpc-recommend-title">bootstrap的form表单提交成功后，怎么清空表单内容_html/css_WEB-ITnose</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/12867.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="如何为 React 列表中的每个子元素正确设置唯一 key 属性">
                </div>
                <div class="jxgpc-recommend-title">如何为 React 列表中的每个子元素正确设置唯一 key 属性</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/12864.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="深入解析：PayPal整合第二部分：PayPal REST API">
                </div>
                <div class="jxgpc-recommend-title">深入解析：PayPal整合第二部分：PayPal REST API</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/12860.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="index.html里如何设置首字下沉效果？">
                </div>
                <div class="jxgpc-recommend-title">index.html里如何设置首字下沉效果？</div>
            </a>

</div>
    </div>

<div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">最新文章</h3>
        <ul class="jxgpc-article-list">

<li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12871.html" class="jxgpc-article-link">bootstrap的form表单提交成功后，怎么清空表单内容_html/css_WEB-ITnose</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12867.html" class="jxgpc-article-link">如何为 React 列表中的每个子元素正确设置唯一 key 属性</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12864.html" class="jxgpc-article-link">深入解析：PayPal整合第二部分：PayPal REST API</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12860.html" class="jxgpc-article-link">index.html里如何设置首字下沉效果？</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12851.html" class="jxgpc-article-link">如何通过HTML的CSS :focus-within检测容器内任意子元素获得焦点的状态</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12848.html" class="jxgpc-article-link">JavaScript 中实现按钮点击切换元素内容与样式的完整教程</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>

</ul>
    </div>

<div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">热门标签</h3>
        <div class="jxgpc-article-tag-list">

<a href="http://www.jxgpc.com/tag/3228" class="jxgpc-article-tag-item">html元素</a>
    
            <a href="http://www.jxgpc.com/tag/2481" class="jxgpc-article-tag-item">回调函数</a>
    
            <a href="http://www.jxgpc.com/tag/2137" class="jxgpc-article-tag-item">前端</a>
    
            <a href="http://www.jxgpc.com/tag/1863" class="jxgpc-article-tag-item">java</a>
    
            <a href="http://www.jxgpc.com/tag/1699" class="jxgpc-article-tag-item">Javascript</a>
    
            <a href="http://www.jxgpc.com/tag/1695" class="jxgpc-article-tag-item">区别</a>
    
            <a href="http://www.jxgpc.com/tag/1596" class="jxgpc-article-tag-item">html</a>
    
            <a href="http://www.jxgpc.com/tag/1590" class="jxgpc-article-tag-item">ai</a>

</div>
    </div>
</aside>
            </div>
        </div>
    </main>

<footer class="jxgpc-footer">
        <div class="jxgpc-container">
            <div class="jxgpc-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.jxgpc.com/22.html" class="jxgpc-footer-link">免责声明</a>
                
                <a href="http://www.jxgpc.com/23.html" class="jxgpc-footer-link">关于我们</a>
                
                <a href="http://www.jxgpc.com/24.html" class="jxgpc-footer-link">联系我们</a>
                
                <a href="http://www.jxgpc.com/25.html" class="jxgpc-footer-link">投诉删除</a>
                
                <a href="http://www.jxgpc.com/26.html" class="jxgpc-footer-link">投稿须知</a>
                
                
            </div>
            <div class="jxgpc-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 极星编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063994号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

<button class="jxgpc-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

<script src="http://www.jxgpc.com/static/v3/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>