返回

跨平台系列（104）实现用例目录与用例页面功能

前端

回顾上一节，我们编写了系统设置页面的相关功能，这一节呢，我们来优化一下用例目录和用例页面的显示。我们来研究一下怎么实现用例目录/用例分屏功能，以及在编写case时，如何实现目录分屏的效果。

下面我们从分析用例的需求开始。

用例目录：
需求分析：
用例目录用于管理和组织用例。它应该能够显示所有用例的列表，并允许用户查看和编辑用例。
设计方案：
我们使用树形结构来组织用例。每个用例都有一个父用例，可以有多个子用例。用例目录使用表格的形式显示，每行显示一个用例的名称、和状态。
实现方法：
我们使用JavaScript和HTML来实现用例目录。我们首先创建一个表格，然后使用JavaScript动态地填充表格中的数据。
用例页面：
需求分析：
用例页面用于查看和编辑用例。它应该显示用例的详细信息，包括用例的名称、、步骤、预期结果和实际结果。
设计方案：
我们使用表单的形式来显示用例的详细信息。表单中包含一个文本框，用于输入用例的名称；一个文本区域，用于输入用例的描述；一个表格，用于输入用例的步骤；一个文本框，用于输入用例的预期结果；一个文本框，用于输入用例的实际结果。
实现方法：
我们使用JavaScript和HTML来实现用例页面。我们首先创建一个表单，然后使用JavaScript动态地填充表单中的数据。

接下来，我们就实现一下用例目录/用例分屏功能。

<div id="case_catalog">
  <div id="case_catalog_tree">
    <ul>
      <li>用例目录</li>
      <li>
        <a href="#">用例1</a>
        <ul>
          <li><a href="#">用例1.1</a></li>
          <li><a href="#">用例1.2</a></li>
        </ul>
      </li>
      <li>
        <a href="#">用例2</a>
        <ul>
          <li><a href="#">用例2.1</a></li>
          <li><a href="#">用例2.2</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="case_catalog_content">
    <iframe src="case1.html"></iframe>
  </div>
</div>

// 获取用例目录树
var case_catalog_tree = document.getElementById("case_catalog_tree");

// 获取用例目录内容
var case_catalog_content = document.getElementById("case_catalog_content");

// 为用例目录树中的链接添加点击事件
var links = case_catalog_tree.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", function() {
    // 获取链接对应的用例页面地址
    var href = this.href;

    // 将用例页面地址加载到用例目录内容中
    case_catalog_content.innerHTML = '<iframe src="' + href + '"></iframe>';
  });
}

在编写case时，我们可以通过在用例页面中添加以下代码来实现目录分屏的效果：

<div id="case_catalog">
  <div id="case_catalog_tree">
    <ul>
      <li>用例目录</li>
      <li>
        <a href="#">用例1</a>
        <ul>
          <li><a href="#">用例1.1</a></li>
          <li><a href="#">用例1.2</a></li>
        </ul>
      </li>
      <li>
        <a href="#">用例2</a>
        <ul>
          <li><a href="#">用例2.1</a></li>
          <li><a href="#">用例2.2</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="case_catalog_content">
    <iframe src="case1.html"></iframe>
  </div>
</div>

// 获取用例目录树
var case_catalog_tree = document.getElementById("case_catalog_tree");

// 获取用例目录内容
var case_catalog_content = document.getElementById("case_catalog_content");

// 为用例目录树中的链接添加点击事件
var links = case_catalog_tree.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", function() {
    // 获取链接对应的用例页面地址
    var href = this.href;

    // 将用例页面地址加载到用例目录内容中
    case_catalog_content.innerHTML = '<iframe src="' + href + '"></iframe>';
  });
}

通过以上步骤，我们就实现了用例目录/用例分屏功能，以及在编写case时，如何实现目录分屏的效果。