对于实际示例，我选择了一个虚构的网站。 P-A38-42 公司提供智能家居和智能园艺解决方案。第一种方法是自动单击左侧菜单中的菜单项。
为 URL 创建 JSON 文件
例如，我们有一个嵌套菜单，其结构如下：
该文件以名称 navigation.json 存储在 cpyress Fixtures 子文件夹中。这使得赛普拉斯可以直接访问它，而无需数据结构描述。
注意：作为 YAML 文件而不是 JSON 文件看起来会更好，但您仍然需要 js-yaml Parser 插件。
这些元素中的每一个都通向一个子页面，并具有 data-cy HTML 内联元素。这确保了各个点都有清晰的标记，并且可以独立于 Cypress 中的实际 ID 和 CSS 类进行访问。
创建页面对象
为了确保良好的可维护性，我们从一开始就使用页面对 邮件营销给医生 象模型模式。这是一种测试自动化设计模式，用于改进测试脚本的结构和可维护性。
在此模式中，应用程序的每个网页或页面都被建模为一个类，该类将页面的元素定义为属性（按钮或文本字段），并将可对其执行的操作定义为方法（登录或搜索）。
优点
可重用性：页面对象一旦定义，就可以在多个测试中使用。
可维护性： UI 更改只需要在适当的 Page 对象类中进行，而不需要在所有测试中进行。
清晰度：测试用例更易于阅读且结构更好，因为页面交互逻辑与测试逻辑分离。
为此，我们直接在 cypress 目录中创建一个 pageobjects 文件夹。这里我们创建一个名为 topmenue.ts 的文件并填充以下内容。
现在，在 Fixtures 文件夹中，我们创建一个名为 page-menue.json 的 JSON 文件，其中包含以下内容
代码解释
此代码对固定文件中定义的应用程序的多个页面执行可访问性测试。检查页面及其子页面的可访问性，并在各种视口（例如 iPhone-6 和 iPhone-12）上进行测试。
导入页面对象模型 (POM) 类
此导入从另一个文件中提取页面对象模型 (POM) 类。
PageData接口的定义
此处创建菜单元素结构的类型定义。 PageData 接口描述了正在测试的页面的元素，包括它们的选择器、要显示的文本、URL 和可选的子元素。此结构允许递归将分层菜单结构与子菜单（子菜单）进行映射。
描述是定义测试套件的块。所有可访问性测试都总结在这个块中。 page 常量是 Page 类的一个实例，用于处理页面视图和可能的其他交互。
beforeEach 用于准备测试的钩子
beforeEach 钩子在每个单独的测试之前执行。这里准备了两件事：
加载数据：使用 cy.fixture()，从 JSON 文件加载菜单页面并保存在 this.pagesData 中。该数据结构包含要测试的页面。
插入可访问性测试工具：通过 cy.injectAxe()，将 axe-core 工具加载到页面中，用于检查可访问性。
testPageAccessibility 函数对每个页面及其子页面进行可访问性测试。
it 块描述了当前页面的单独测试。
访问页面：通过page.visit(pageData.url)访问要测试的页面。
可访问性检查：使用 cy.checkA11() 检查页面的可访问性。