文档帮助

内容

术语、图标和标签访问级别成员类型成员语法成员标志类图标成员图标导航和功能类成员快速导航菜单 Getter 和 Setter 方法历史记录栏搜索和筛选器 API 文档类元数据展开和折叠示例和类成员桌面 -vs- 移动视图查看类源

术语、图标和标签

许多类在使用配置对象创建（实例化）类时使用快捷名称。快捷名称称为别名（如果类扩展 Ext.Component，则称为xtype）。别名/xtype 列在适用类的类名旁边，以便快速参考。

访问级别

框架类或其成员可以指定为private或protected。否则，类/成员为public。Public、protected和private是访问描述符，用于传达如何以及何时使用类或类成员。

Public类和类成员可供任何其他类或应用程序代码使用，并且可以依赖它们在主要产品版本中稳定且持久。公共类和成员可以通过子类安全地扩展。
Protected类成员是稳定的public成员，旨在供拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private类和类成员由框架内部使用，不打算供应用程序开发人员使用。私有类和成员可能会随时更改或从框架中省略，恕不另行通知，并且不应依赖于应用程序逻辑。

成员类型

Config - 类的配置选项。
Property - 类实例化后设置一次。*请参阅下面的只读。
Method - 可以由类执行的操作。方法应读取为实例方法，只能从给定类的实例调用。可以直接从类本身调用的静态方法将在方法名称旁边有一个static标签。*请参阅下面的静态。
Event - 事件特定于框架事件系统，允许类以编程方式引发事件，以便由一个或多个事件处理程序方法处理。DOM 事件虽然由框架事件系统处理，但不会在 API 文档中具体描述。*对于 DOM 事件，请参阅 MDN 的事件参考页面。
Theme Variable - 框架采用的可视主题引擎使用的变量。
Theme Mixin - 框架采用的可视主题引擎使用的函数，并且可以使用在各种主题变量中设置的值。

成员语法

下面是一个示例类成员，我们可以对其进行剖析以显示类成员的语法（在本例中，从 Ext.button.Button 类中查看的 lookupComponent 方法）。

Ext.container.Container

查看源

lookupComponent ( item ) : Ext.Component

protected

在初始化items配置期间或添加新项目时将原始配置对象添加到此容器时调用，或者added）或{@link #insert inserted。

此方法将传递的对象转换为实例化子组件。

当需要对子创建应用特殊处理时，可以在子类中覆盖此方法。

参数

item : Object

正在添加的配置对象。

Ext.Component

要添加的组件。

让我们看看成员行的每个部分

展开/折叠 - 在成员行的左侧是一个控件，用于展开和折叠每个成员行以显示/隐藏成员详细信息。
成员名称 - 类成员的名称（在本例中为lookupComponent）
方法参数 - 方法使用的任何必需或可选参数（或传递给事件处理程序方法）将在括号中列在方法名称旁边（在本例中为( item )）
返回类型 - 方法或属性返回的类实例或 javascript 对象（在本例中为Ext.Component）。对于不返回除undefined之外的任何内容或可能显示为由正斜杠/分隔的多个可能值的方法，可以省略此项，表示返回的内容可能取决于方法调用的结果（即方法可能会返回一个组件，如果 get 方法调用成功，或者false，如果失败，则显示为Ext.Component/Boolean）。
标志 - 接下来将显示适用于成员的任何标志（在本例中为PROTECTED - 请参阅下面的标志部分）
成员来源 - 在成员行的右侧是最初描述成员的类（在此示例中为 Ext.container.Container）。如果成员源自当前类，则源类将显示为蓝色链接；如果成员是从祖先类或混合类继承的，则显示为灰色。
成员源 - 在成员来源类下方右侧是查看成员源的链接（在示例中为 查看源）
参数列表 - 类方法的每个参数都将使用括号中上面找到的相同名称、预期的类或对象类型以及参数描述（在示例中为 item : Object）进行列出。
返回 - 如果类返回的值不为 undefined，则“返回”部分将记录返回的类或对象类型以及描述（在示例中为 Ext.Component）
自（在示例中未显示） - 某些成员会显示产品首次引入该成员的版本（即 自 3.4.0 起可用 - 在示例中未显示），位于成员描述之后
默认（在示例中未显示） - 配置项通常显示要应用于类实例的默认配置值，如果未覆盖（即 默认为：false）

成员标记

API 文档使用许多标记来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。

必需 - 实例化类时的必需配置项
可绑定 - 配置项具有一个允许通过 ViewModel 绑定设置此配置项的设置器
只读 - 可以读取该属性，但不能用于在运行时配置/重新配置类实例
单例 - 单例类在定义后立即实例化，并且不能手动实例化
静态 - 静态方法或属性是属于类本身的方法或属性，而不是类的实例
可链式调用 - 指在调用时返回类实例的方法。
这允许进行链式方法调用，例如：classInstance.method1().method2().etc();
已弃用 - 计划在未来的框架版本中删除的类或成员，并且在当前版本中提供以保持向后兼容性。
已弃用的类和成员将显示一条消息，指导您使用首选类/方法。
已删除 - 已删除的类或成员，仅在文档中作为框架版本之间升级的用户参考
模板 - 在基类中定义的方法，旨在由子类覆盖
抽象 - 类或成员可以定义为抽象。抽象类和成员建立类结构，并提供有限的代码（如果有）。类特定代码将通过子类中的覆盖来提供。
可阻止 - 如果从事件处理程序返回 false，则标记为可阻止的事件不会触发

类图标

- 表示框架类

- 单例框架类。*有关详细信息，请参见单例标记

- 组件类型框架类（Ext JS 框架中任何扩展 Ext.Component 的类）

- 表示类、成员或指南在当前查看的版本中是新的

成员图标

- 表示类型为 config 的类成员

- 表示类型为 property 的类成员

- 表示类型为 method 的类成员

- 表示类型为 event 的类成员

- 表示类型为 theme variable 的类成员

- 表示类型为 theme mixin 的类成员

- 表示类、成员或指南在当前查看的版本中是新的

在 API 文档页面上类名称正下方是一行按钮，对应于当前类拥有的成员类型。每个按钮显示按类型划分的成员数（此计数会随着应用筛选器而更新）。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个弹出菜单，其中包含该类型的所有成员，以便快速导航。

获取器和设置器方法

与类配置选项相关的获取器和设置器方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中，位于它们所处理的配置下方。获取器和设置器方法文档将位于配置行中，以便于参考。

历史栏

您的页面历史记录保存在本地存储中，并显示在顶部标题栏正下方（使用可用空间）。默认情况下，仅显示与您当前正在查看的产品/版本匹配的页面搜索结果。您可以通过点击历史栏右侧的按钮，然后选择“全部”单选按钮来展开显示内容。这将显示所有产品/版本的历史栏中的所有近期页面。

在历史配置菜单中，您还将看到最近访问页面的列表。结果按“当前产品/版本”和“全部”单选按钮进行筛选。点击按钮将清除历史栏以及保存在本地存储中的历史记录。

如果在历史配置菜单中选择了“全部”，则“在历史栏中显示产品详细信息”复选框选项将被启用。选中后，历史栏中每个历史页面的产品/版本将显示在页面名称旁边。将光标悬停在历史栏中的页面名称上，还将显示产品/版本作为工具提示。

搜索和筛选器

可以使用页面顶部的搜索字段搜索 API 文档和指南。

在 API 文档页面上，还有一个筛选器输入字段，它使用筛选器字符串筛选成员行。除了按字符串筛选之外，您还可以按访问级别、继承和只读筛选类成员。这是使用页面顶部的复选框完成的。

API 类导航树底部的复选框筛选类列表，以包括或排除私有类。

点击一个空的搜索字段将显示您最近的 10 次搜索，以便快速导航。

API 文档类元数据

每个 API 文档页面（除了 JavaScript 原语页面）都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项

备用名称 - 一个或多个其他类名同义词（在 Ext JS 6.0.0 中，Ext.button.Button 类有一个备用类名 Ext.Button）。备用类名通常用于向后兼容性。
层次结构 - 层次结构视图列出了当前类的继承链，从其祖先类到根基类。
混合 - 混合到当前类的类列表
继承的混合 - 混合到当前类祖先的类列表
需要 - 实例化类所需的要定义的所有类
使用 - 可能会在生命周期的某个时间点由类使用的一系列类，但对于最初实例化类来说并非必需
子类 - 扩展当前类的类

展开和折叠示例和类成员

可运行的示例（小提琴）默认情况下在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。

类成员默认情况下在页面上折叠。您可以使用成员行左侧的箭头图标或全局使用右上角的展开/折叠全部切换按钮来展开和折叠成员。

桌面与移动视图

在较窄的屏幕或浏览器上查看文档将导致针对较小尺寸优化视图。桌面和“移动”视图之间的主要区别是

全局导航将位于左侧菜单中，可通过汉堡菜单图标访问。菜单包含以下内容（在大多数页面上）
- 当前产品名称（作为指向产品登陆页面的链接）
- 用于导航回文档主页的 Sencha 图标
- 产品菜单下拉按钮
- API 文档和指南的导航树选项卡
当前上下文导航和工具位于右侧，可通过齿轮图标访问。上下文菜单包含以下内容
- 全局搜索输入字段
- （API 文档）带有成员筛选器、“展开/折叠所有示例”按钮、“展开/折叠所有成员行”按钮、访问级别筛选器复选框以及每个成员计数的“筛选器”选项卡
- （API 文档）包含与当前类相关的元数据菜单的“相关类”选项卡
- （指南）指南的目录

查看类源

可以通过单击 API 文档页面顶部的类名来查看类源。可以通过单击成员行右侧的“查看源”链接来查看类成员的源。

WebTestIt

显示私有类

顶部

内容

了解全局模板与特定于项目的模板创建特定于项目的覆盖修改报告添加公司徽标如果我的模板有误，我该如何还原它们？还有哪些可用的变量端点测试套件测试用例附加元素附加属性 Jira 问题失败 jiraAvailable isVisible @root

调整报告模板

Sencha WebTestIt 具有高度模块化的报告，该报告由 Handlebars 模板组成，并在导航到生成的一个报告文件（默认位于 reports 文件夹中）后直接在应用程序中呈现。

本指南介绍如何自定义报告模板以满足您的需求。请按照以下步骤操作

了解全局模板与特定于项目的模板
创建特定于项目的覆盖
修改报告
添加公司徽标
如果我的模板有误，我该如何还原它们？
还有哪些可用的变量

了解全局模板与特定于项目的模板

报告是根据模板生成的。您可以在位于用户文件夹内的全局 .webtestit 文件夹中找到安装的默认设置。要快速导航到它，请通过应用程序菜单打开模板文件夹

您将找到一个名为 report 的文件夹，其中包含一些 handlebars 文件。

如您所见，这些文件被划分为一个名为 report.hbs 的基本模板和一些部分，这些部分旨在将子部分划分为不同的文件。

提示

调整这些模板将对您正在处理的每个 Webtestit 项目生效。如果您希望按项目自定义报告，则需要有本地项目覆盖。

创建特定于项目的覆盖

在您的项目中创建一个顶级文件夹 templates，并将全局模板中的 report 文件夹复制到其中。

接下来，使之前创建的模板文件夹实际上在项目中使用。要实现此目的，请从“首选项”菜单中打开项目设置，找到并设置模板覆盖文件夹

修改报告

让我们检查一下这里有哪些模板文件。report.hbs 是主要报告呈现入口。该文件以一些内联 CSS 规则开头，这些规则适用于 @media print 查询选择器，因此仅在打印到 PDF 时才呈现。如果您需要自定义报告的外观，这是一个很好的方法。例如，假设我们要调整 test-summary 标题以显示不同的背景颜色和更多的填充，我们可以在文件 report.hbs 的 style 块中添加以下代码

<style>
  .test-summary {
    background-color: #FB9836; padding: 10px;
  }
 ...

保存后，导航到报告。在报告面板标题中，您将找到一个刷新按钮，该按钮将使用新的调整重新呈现报告。

新报告将如下所示

添加公司徽标

想象一下，我们希望将公司徽标添加到每个报告页眉。首先，让我们在 templates/report 文件夹中创建一个 images 文件夹。我们将在其中放置名为 logo.jpg 的公司徽标。在 summary.hbs 中添加以下内容

{{> summary.hbs}} {{> report-filter.hbs}}

此指令告诉报告在报告中的此特定位置包含名为 summary.hbs 的部分。当我们打开该文件时，我们会发现一个包含 test-summary div 的 div，该 div 正在呈现报告的顶部部分。为了显示我们的徽标，我们可以像这样对其进行调整

<style>
   .test-summary__company-logo {
      width: 200px;
      float: left;
  }

  .test-summary__title {
    text-align: right;
  }

 .donut__hole {
    fill: #FB9836;
  }
</style>

<div class="test-summary">
  <div>
    <img class="test-summary__company-logo" src="{{projectRoot}}/reports/images/logo.jpg" />
    <div class="test-summary__title">Summary</div>
  </div>
  ...

我们将 test-summary__title 与 img.test-summary__title 标记一起移动到一个新的 div 中。

为了反映映射到先前创建的包含我们徽标的 images 文件夹，我们可以使用 {{projectRoot}} 模板变量，它准确地指向项目的根目录。从那里，我们连接最终目标 templates/report/images/logo.jpg。在上述 style 标记中添加一些额外的 CSS 后，我们将得到类似这样的结果

注意

想知道为什么我们以这种特定方式命名我们的类？Sencha WebTestIt 利用块元素修饰符 (BEM) 方法来实现合理且一致的 CSS 规则。

如果我的模板错误怎么办？我如何还原它们？

只要我们讨论的是特定于项目的模板，你就可以用新的模板覆盖它们，或者完全删除它们。Sencha WebTestIt 将优先使用项目本地模板，如果找不到任何模板（甚至是单个部分），它将采用全局版本。

还有哪些变量可用

到目前为止，我们已经使用 {{projectRoot}} 变量在渲染期间访问项目的根目录。但还有更多，请查看以下列表

端点

它包含一个接口，其中包含每个已执行端点的以下属性

export interface EndpointData {
  name: string;
  time: number;
  timestamp: Date;
  readableTimestamp: string;
  testSuites: TestSuite[];
  failures: number;
  readableDuration: string;
  testCaseCount: number;
  testSuiteCount: number;
  isVisible: boolean;
  skipped: number;
  iconPath: string;
  id: string;
  headless?: boolean;
}

测试套件

在 endpoints 中，你可以访问在特定端点上运行的 TestSuite

export interface TestSuite {
  errors: string;
  expanded: boolean;
  failures: string;
  id: string;
  endpoint: Endpoint;
  name: string;
  skipped: string;
  testCases: TestCase[];
  tests: string;
  time: string;
  readableDuration: string;
  timestamp: Date;
  readableTimeStamp: string;
  extraElements?: ExtraElements[];
  isVisible: boolean;
}

测试用例

在 testSuites 中，你可以访问在特定测试套件上运行的 TestCase。

export interface TestCase {
  className: string;
  expanded?: boolean;
  fileName: string;
  filePath?: string;
  lineNumber?: number;
  failure: boolean | TestFailure;
  loading?: boolean;
  skipped: boolean;
  endpointName?: string;
  endpointBrowserName?: string;
  name: string;
  time: string;
  id: string;
  jiraIssue?: JiraData;
  testrailData?: { case_id?: number, suite_id?: number };
  testCaseNotFound?: boolean;
  screenshotFound?: boolean;
  extraElements?: ExtraElements[];
  formattedTimestamp?: string;
  screenshot?: string;
  isVisible: boolean;
}

额外元素

使用 extraElementValue 帮助程序从报告中访问额外元素值，它接受两个参数：extraElements 数组和元素名称

export interface ExtraElements{
  name: string;
  value: string | null;
  attributes?: ExtraAttributes;
}

额外属性

export interface ExtraAttributes { [name: string]: string | null; }

Jira 问题

Jira 问题为你提供了给定测试用例的链接 Jira 问题的详细信息。

export interface JiraData {
  id: string;
  key: string;
  isCompleted: boolean;
  testCaseNotFound?: boolean;
}

失败

export interface TestFailure {
  message: string;
  trace: string;
  attributes?: ExtraAttributes;
}

jiraAvailable

它指示你的测试是否已连接到 Jira 并且你已设置凭据。

isVisible

它是根据所选过滤器计算的。

@root

要从任何模板访问任何根变量，可以使用 @root（例如：@root.jiraAvailable、@root.projectRoot…）