原文

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的原創文章，盡在："汪子熙":