automate all aria roles for cucumber tests

Author: kantord

cucumber.js

@@ -4,6 +4,8 @@ module.exports = {
     require: [
       "tests/bdd/support/world.ts",
       "tests/bdd/support/hooks.ts",
+      "tests/bdd/support/roles.ts",
+      "tests/bdd/support/parameter-types.ts",
       "tests/bdd/steps/**/*.ts",
     ],
     paths: ["tests/bdd/features/**/*.feature"],

package.json

@@ -61,6 +61,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5.1.1",
+    "aria-query": "^5.3.2",
     "babel-plugin-react-compiler": "1.0.0",
     "concurrently": "^9.2.1",
     "dotenv": "^17.2.3",

pnpm-lock.yaml

@@ -1,11 +1,20 @@
 import { Given, Then, When } from "@cucumber/cucumber";
-import { expect } from "@playwright/test";
+import { type AriaRole, expect } from "@playwright/test";
 import type { PlaywrightWorld } from "../support/world";
 
 Given("I am on {string}", async function (this: PlaywrightWorld, path: string) {
   await this.page.goto(`${this.baseUrl}${path}`);
 });
 
+// Generic click step using a custom {role} parameter type
+When(
+  'I click the "{string}" {role}',
+  async function (this: PlaywrightWorld, label: string, role: AriaRole) {
+    await this.page.getByRole(role, { name: label }).click();
+  },
+);
+
+// Backward-compatible convenience wrapper for "button" steps
 When(
   "I click the {string} button",
   async function (this: PlaywrightWorld, label: string) {

tests/bdd/steps/global.steps.ts

@@ -0,0 +1,38 @@
+import { defineParameterType } from "@cucumber/cucumber";
+import type { AriaRole } from "@playwright/test";
+import { roleAliases, validAriaRoles } from "./roles.ts";
+
+defineParameterType({
+  name: "role",
+  // Match human-written role text, e.g., "menu item", "radio button", "checkbox"
+  regexp: /[A-Za-z ][A-Za-z -]*/,
+  transformer: (text: string): AriaRole => {
+    const input = text.trim().toLowerCase();
+
+    // 1) Exact match
+    if (validAriaRoles.has(input)) {
+      return input as AriaRole;
+    }
+
+    // 2) Compact variant: remove spaces and hyphens
+    const compact = input.replace(/[\s-]+/g, "");
+    if (validAriaRoles.has(compact)) {
+      return compact as AriaRole;
+    }
+
+    // 3) Aliases
+    const alias = roleAliases[input];
+    if (alias) {
+      return alias;
+    }
+
+    // 4) Helpful error
+    const sample = Array.from(validAriaRoles).slice(0, 15).join(", ");
+    throw new Error(
+      `Unknown role "${text}".\n` +
+        `- Tried: "${input}" and "${compact}".\n` +
+        "- Add an alias in roleAliases if this is a valid custom phrase.\n" +
+        `- Example known roles: ${sample} ...`,
+    );
+  },
+});

tests/bdd/support/parameter-types.ts

@@ -0,0 +1,15 @@
+import type { AriaRole } from "@playwright/test";
+import { roles as ariaRolesMap } from "aria-query";
+
+// Set of all valid ARIA roles sourced from aria-query
+export const validAriaRoles = new Set<string>([...ariaRolesMap.keys()]);
+
+// Map human-friendly phrases to real ARIA roles (keep this minimal and sensible)
+export const roleAliases: Record<string, AriaRole> = {
+  "menu item": "menuitem",
+  "radio button": "radio",
+  "check box": "checkbox",
+  // common synonyms
+  dropdown: "combobox",
+  "list box": "listbox",
+};