如何验证span标签内Class与文本顺序用于分页功能自动化测试

该需求完全可实现，可从代码实现约束、自动化测试校验两层彻底避免顺序错误。

一、代码层面永久固定顺序 #

• 方案1：封装固定结构的分页组件
  直接将两个按钮的DOM节点顺序写死在组件内部，不对外暴露内部结构修改入口，示例代码如下：

  <!-- 上一页按钮：箭头元素固定在文本前 -->
  <span class="pagination-prev">
    <i class="icon-arrow-left"></i>
    <span>Previous</span>
  </span>
  
  <!-- 下一页按钮：箭头元素固定在文本后 -->
  <span class="pagination-next">
    <span>Next</span>
    <i class="icon-arrow-right"></i>
  </span>
  

• 方案2：CSS伪元素固定箭头位置（更推荐）
  用伪元素渲染箭头，从样式层面固定箭头位置，完全规避节点顺序被修改的风险，示例代码如下：

  <span class="pagination-prev">Previous</span>
  <span class="pagination-next">Next</span>
  

  /* 左箭头固定在元素内容最前方 */
  .pagination-prev::before {
    content: "< ";
    margin-right: 4px;
  }
  /* 右箭头固定在元素内容最后方 */
  .pagination-next::after {
    content: " >";
    margin-left: 4px;
  }
  

二、自动化测试用例校验规则 #

可以从两个维度编写测试用例，只要触发规则就判定测试不通过，从流程层面拦截顺序错误的代码上线：

• 节点顺序校验：获取分页按钮的子节点列表，上一页按钮的第一个子节点必须为箭头类元素、第二个子节点为文本节点；下一页按钮的第一个子节点必须为文本节点、第二个子节点为箭头类元素。
• 渲染结果校验：直接读取分页按钮的可见文本内容，上一页的文本必须严格等于< Previous，下一页的文本必须严格等于Next >。

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