Aria Snapshots是Playwright中的一个功能，它提供了一种以YAML格式表示页面可访问性树的方法。这些快照可以存储并稍后进行比较，以验证页面结构是否保持一致或符合定义的期望。YAML格式描述了页面上可访问元素的层次结构，详细列出了角色、属性、值和文本内容。

可访问性树结构遵循树状语法，其中每个节点表示一个可访问元素，缩进表示嵌套元素。例如，对于一个包含标题、列表和按钮的简单页面，其Aria Snapshot可能如下所示：

在这个示例中，页面的根元素是一个文档（document），包含了一个一级标题（heading）、一个列表（list）和一个按钮（button）。列表中的每个项目都是一个列表项（listitem），并且每个元素都有一个可访问的名称。

Playwright提供了断言方法，用于比较定位器作用域内的可访问结构与预定义的Aria Snapshot模板。这有助于验证页面的状态是否符合测试要求。

当进行匹配时，快照模板会与页面的当前可访问性树进行比较。如果树结构与模板匹配，则测试通过；否则，测试失败，表明预期和实际的可访问状态之间存在不匹配。

比较是区分大小写的，并且会折叠空白字符，因此缩进和换行符会被忽略。此外，比较还是顺序敏感的，这意味着快照模板中的元素顺序必须与页面可访问性树中的元素顺序相匹配。

有时，只对可访问性树的特定部分感兴趣，或者希望忽略某些动态或无关紧要的属性。为了支持这种情况，Playwright允许我们执行部分匹配，即省略属性或可访问名称，从而仅验证可访问性树的特定部分。

例如，我们可以匹配一个按钮的角色，但不指定其可访问名称（如“提交”），这样无论按钮的标签是什么，测试都会通过。对于具有ARIA属性（如checked或disabled）的元素，省略这些属性也允许进行部分匹配，从而仅关注角色和层次结构。

对于具有动态或可变文本的元素，正则表达式允许我们进行灵活的匹配。可访问名称和文本可以支持正则表达式模式，这使得我们能够匹配具有特定模式的文本，而不是精确值。

例如，如果我们有一个包含当前日期的按钮，我们可以使用正则表达式来匹配任何符合日期格式的文本，而不是硬编码一个特定的日期值。

在Playwright中生成Aria Snapshots有助于确保和维护应用程序的结构。我们可以根据测试设置和工作流程以多种方式生成快照。

1. 使用Playwright代码生成器生成快照

如果我们正在使用Playwright的代码生成器，那么生成Aria Snapshots将变得非常简单。代码生成器提供了一个交互式界面，允许我们为选定的元素自动创建快照断言。这是捕获Aria Snapshot并将其作为记录测试流程一部分的快速方法。

此外，代码生成器界面中的“Aria Snapshot”选项卡还以视觉方式表示选定定位器的Aria Snapshot，使我们能够探索、检查和验证元素角色、属性和可访问名称，以辅助快照的创建和审查。

2. 使用@playwright/test和–update-snapshots标志更新快照

当我们使用Playwright测试运行器（@playwright/test）时，我们可以通过运行带有–update-snapshots标志的测试来自动更新快照。此命令将重新生成包括Aria Snapshots在内的断言快照，并替换过时的快照。这对于应用程序结构更改需要新快照作为基线时非常有用。

请注意，Playwright将在拍摄快照之前等待测试运行器配置中指定的最大期望超时时间，以确保页面已稳定。如果在生成快照时测试达到超时，则可能需要调整–timeout。

3. 使用Locator.ariaSnapshot方法生成快照

Locator的aria_snapshot()方法允许我们以编程方式创建定位器作用域内可访问元素的YAML表示。这对于在测试执行期间动态生成快照特别有用。

例如，我们可以编写一个测试来导航到页面的特定部分，并使用aria_snapshot()方法捕获该部分的Aria Snapshot。然后，我们可以验证或存储该快照，以满足我们的测试要求。

为了更好地理解Aria Snapshots，让我们看一些可访问性树的示例。

1. 带有级别属性的标题

标题可以包含一个level属性，指示其标题级别。这对于理解文档结构至关重要。

2. 文本节点

独立或描述性文本元素将作为文本节点出现。这些文本节点对于屏幕阅读器等辅助技术来说是非常重要的，因为它们提供了有关页面内容的额外上下文。

3. 内联多行文本

多行文本（如段落）在Aria Snapshot中会被规范化。这意味着，无论文本在HTML中是如何分行的，它都会在快照中被视为一个连续的字符串。

4. 链接

链接会显示其文本或来自伪元素的组合内容。这对于确保链接的可访问性至关重要，因为屏幕阅读器用户将依赖这些文本来理解链接的目的。

5. 文本框

类型为text的输入元素会显示其value属性内容。这对于验证用户输入是否正确捕获到表单中非常重要。

6. 带有项目的列表

有序和无序列表都包括其列表项。这些列表项对于组织信息和提供清晰的导航结构至关重要。

7. 分组元素

分组捕获嵌套元素，如带有摘要内容的元素。这对于理解复杂页面结构的可访问性非常有帮助。

常用的ARIA属性（如checked、disabled、expanded、level、pressed和selected）表示控件状态。这些属性对于确保控件的行为符合用户的期望至关重要。

例如，一个带有checked属性的复选框的Aria Snapshot可能如下所示：

同样，一个带有pressed属性的按钮的Aria Snapshot可能如下所示：