原文

Spartacus 中的可访问性有自己的一套端到端测试，这些测试位于 projects/storefrontapp-e2e-cypress/cypress/integration/accessibility/tabbing-order.e2e-spec.ts。

其中包括需要用户登录的测试（例如，对于我的帐户页面和购物车），以及不需要用户登录的测试（例如对于主页和登录页面））。

目前，测试涵盖了通过应用程序的标签。对于每个新功能，都应该手动编写一个新测试，以检查选项卡的工作方式。如果 Tab 的某些方面无法正常工作（例如，Tab 顺序不符合预期，或者无法通过 Tab 访问可交互元素），则测试应该失败。

要运行添加到 tabbing-order.e2e-spec.ts 的新测试，请在运行 Cypress 时选择 tabbing-order 测试。

Implementing a New A11y E2E Test

(1) 向 projects/storefrontapp-e2e-cypress/cypress/helpers/accessibility/tabbing-order.config.ts 中的配置对象添加一个新属性。

名称应简短且具有描述性。

login: [{ value: 'userId', type: TabbingOrderTypes.FORM_FIELD },{ value: 'password', type: TabbingOrderTypes.FORM_FIELD },{ value: 'Forgot password?', type: TabbingOrderTypes.LINK },{ value: 'Sign In', type: TabbingOrderTypes.BUTTON },{ value: 'Register', type: TabbingOrderTypes.BUTTON },]

注意：

a. The login is of type TabElement[].

b. 类型是一个 TabbingOrderTypes 枚举，它支持多种类型的元素。您可以通过在 Spartacus 源代码中查找 TabbingOrderTypes 枚举的定义来查看所有支持的类型。

(2) 将新的帮助文件添加到 projects/storefrontapp-e2e-cypress/cypress/helpers/accessibility/tabbing-order/。

import { verifyTabbingOrder } from '../tabbing-order';import { fillLoginForm } from '../../auth-forms';import { user } from '../../../sample-data/checkout-flow';import { TabElement } from '../tabbing-order.model';const containerSelector = '.LoginPageTemplate';export function loginTabbingOrder(config: TabElement[],prefillForm: boolean = false) {cy.visit('/login');if (prefillForm) {const { email: username, password } = user;fillLoginForm({ username, password });}verifyTabbingOrder(containerSelector, config);}

a. 某些页面或视图可能需要额外的步骤，并且帮助文件可能比上面显示的示例更大或更复杂。您可以通过查看 projects/storefrontapp-e2e-cypress/cypress/helpers/accessibility/tabbing-order/ 中现有的帮助程序文件来查看其他示例。

b. 使用 const containerSelector，您可以使用类似 CSS 的选择器创建一个变量来保存您的功能。

c. 导出的函数，例如本例中的 loginTabbingOrder 函数，应该始终带有 TabbingOrder 后缀，并且应该始终以 config 作为参数。

d. cy.visit 是 cypress 功能的一个例子。在此示例中，它告诉 cypress 访问您的功能所在的页面。

您导出的函数应始终使用预定义的 verifyTabbingOrder(containerSelector, config) 函数。

(3) 在 projects/storefrontapp-e2e-cypress/cypress/integration/accessibility/tabbing-order.e2e-spec.ts 中，从您在上一步创建的帮助文件中导入 TabbingOrder 函数。

例如：

 import { loginTabbingOrder } from '../../helpers/accessibility/tabbing-order/login';

(4) 在同一个文件 (tabbing-order.e2e-spec.ts) 中，添加测试。

context('Login page', () => {it('should allow to navigate with tab key (empty form)', () => {loginTabbingOrder(config.login);});it('should allow to navigate with tab key (filled out form)', () => {loginTabbingOrder(config.login, true);});});

a. context 应指向您要测试的页面。
b. 字符串 ‘should allow to navigation with tab key’ 在每个测试中都使用，并且应该包含在所有新测试中。
c. loginTabbingOrder 是您在 login.ts 帮助文件中创建的函数，(config.login) 是指您添加到 projects/storefrontapp-e2e-cypress/cypress/helpers/accessibility/tabbing-order 中的配置对象的登录属性 .config.ts（在此过程的第 1 步中）。

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus Accessibility E2E 端到端测试相关推荐

SAP 电商云 Spartacus UI 的单元测试和端到端测试，以及 CI/CD 相关话题
单元测试在项目根目录的 package.json 下面,定义了测试相关的 script: 可以直接 npm run test:libs, 启动所有库的单元测试: 也可以手动执行单个库的单元测试,例如 ...
如何运行 SAP Spartacus cypress 端到端测试
首先在本地启动 Spartacus instance, 比如执行 b2c.bat: 进入文件夹:projects/storefrontapp-e2e yarn install: 然后 yarn cy: ...
端到端测试（e2e测试）
端到端测试:end to end测试,又称为e2e测试,可以看做一个自动化的测试脚本,其目的是模拟用户行为,通过自动的访问一个真实浏览器环境下的页面,对于页面上的任意操作,断言浏览器中发生特定的行为.
E2E 端到端测试学习 - E2E 介绍、Cypress 案例基本使用
E2E 测试介绍 E2E E2E(end to end)端到端测试是最直观可以理解的测试类型.在前端应用程序中,端到端测试可以从用户的视角通过真实浏览器自动检查应用程序是否正常工作. E2E 把整个系 ...
e2e test 端到端的测试
在进行学习的时候,遇到了一个新的知识点.总想来记录一下,学到老,活到老. e2e或者端到端(end-to-end)或者UI测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样. ...
端到端的测试（e2e）
端到端的测试(e2e) 端到端测试类似于系统测试,测试级的"宏大"的端点,涉及整个应用系统环境在一个现实世界使用时的模拟情形的所有测试.例如与数据库对话,用网络通讯,或与外部硬件. ...
unit单元测试和e2e端到端测试的区别
前端实现自动化就要借助到unit和e2e端到端测试了一.unit测试站在程序员的角度测试 unit测试是把代码看成是一个个的组件.从而实现每一个组件的单独测试,测试内容主要是组件内每一个函数的返回 ...
我与无影的初体验：使用无影云桌面进行一个开源 Angular 项目的端到端测试
近日很荣幸地收到了阿里云邀请做一个关于阿里旗下无影云桌面的评测,从官网上了解到阿里云无影云桌面原名为弹性云桌面,融合了无影产品技术后更名升级,可广泛应用于具有高数据安全管控.高性能计算等要求的安全办公 ...
测试你的前端代码 - part3（端到端测试）
本文作者:Gil Tayar 编译:胡子大哈翻译原文:http://huziketang.com/blog/posts/detail?postId=58d50da37413fc2e8240855c ...

SAP Spartacus Accessibility E2E 端到端测试

Implementing a New A11y E2E Test

SAP Spartacus Accessibility E2E 端到端测试相关推荐

最新文章

热门文章