.

Author: kantord

tests/bdd/features/login.feature

@@ -2,7 +2,14 @@ Feature: Login flow
 
   Scenario: Sign in and land on Catalog
     Given I am on "/signin"
-    When I click the "Okta" button
+    When I click on the "Okta" button
     Then I should be on "/catalog"
     And I should see a heading "MCP Server Catalog"
 
+  Scenario: Log out from Catalog
+    Given I am on "/signin"
+    When I click on the "Okta" button
+    Then I should be on "/catalog"
+    When I click on the "Test User" button
+    And I click on the "Sign out" menu item
+    Then I should be on "/signin"

tests/bdd/steps/global.steps.ts

@@ -6,9 +6,9 @@ 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
+// Generic click step using the {role} parameter type (canonical phrases only)
 When(
-  'I click the "{string}" {role}',
+  "I click on the {string} {role}",
   async function (this: PlaywrightWorld, label: string, role: AriaRole) {
     await this.page.getByRole(role, { name: label }).click();
   },

tests/bdd/support/parameter-types.ts

@@ -1,38 +1,23 @@
 import { defineParameterType } from "@cucumber/cucumber";
 import type { AriaRole } from "@playwright/test";
-import {
-  allowedRolePhrases,
-  preferredPhraseByRole,
-  validAriaRoles,
-} from "./roles.ts";
+import { allowedRolePhrases } from "./roles.ts";
+
+// Build a tight, case-insensitive pattern from the canonical phrases
+const escape = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const phrases = Object.keys(allowedRolePhrases).map(escape).join("|");
+// Important: do not anchor (no ^ or $). Cucumber composes parameter regexps
+// into a larger expression; anchors can prevent proper matching.
+const rolePattern = new RegExp(`(?:${phrases})`);
 
 defineParameterType({
   name: "role",
-  // Match human-written role text, e.g., "menu item", "radio button", "checkbox"
-  regexp: /[A-Za-z ][A-Za-z -]*/,
+  // keep snippets focused on canonical phrases in feature files
+  useForSnippets: false,
+  regexp: rolePattern,
   transformer: (text: string): AriaRole => {
-    const input = text.trim().toLowerCase();
-
-    // Accept only canonical phrases to reduce variants
-    const canonical = allowedRolePhrases[input];
-    if (canonical) {
-      return canonical;
-    }
-
-    // If user provided an ARIA role directly, recommend the canonical phrase
-    if (validAriaRoles.has(input)) {
-      const role = input as AriaRole;
-      const preferred = preferredPhraseByRole[role];
-      if (preferred && preferred !== input) {
-        throw new Error(
-          `Use canonical role phrase "${preferred}" instead of "${input}".`,
-        );
-      }
-      // Role equals its canonical phrase (e.g., "button", "link", "checkbox")
-      return role;
-    }
-
-    // Helpful error with allowed phrases
+    const key = text.trim().toLowerCase();
+    const role = allowedRolePhrases[key];
+    if (role) return role;
     const examples = Object.keys(allowedRolePhrases).slice(0, 10).join(", ");
     throw new Error(
       `Unknown role phrase "${text}". Use one of the canonical phrases (e.g., ${examples} ...).`,