@shopware-ag/acceptance-test-suite 11.35.0 → 11.36.0

package/dist/index.d.mts

@@ -8,6 +8,14 @@ export { APIRequestContext, APIResponse, BrowserContext, Locator, Page, Request
 import { components } from '@shopware/api-client/admin-api-types';
 import { Image } from 'image-js';
 
+declare global {
+    namespace PlaywrightTest {
+        interface Matchers<R> {
+            toHaveVisibleFocus(): Promise<R>;
+        }
+    }
+}
+
 interface RequestOptions$1<PAYLOAD> {
     [key: string]: unknown;
     data?: PAYLOAD;
@@ -3982,6 +3990,10 @@ declare class Actor {
     baseURL: string | undefined;
     constructor(name: string, page: Page, baseURL?: string);
     expects: playwright_test.Expect<{}>;
+    a11y_checks(locator: Locator): Promise<void>;
+    fillsIn(locator: Locator, input: string): Promise<void>;
+    presses(locator: Locator, key?: string): Promise<void>;
+    selectsRadioButton(radioGroup: Locator, inputLabel: string): Promise<void>;
     attemptsTo(task: () => Promise<void>): Promise<void>;
     goesTo(url: string, forceReload?: boolean): Promise<void>;
     private camelCaseToLowerCase;

package/dist/index.d.ts

@@ -8,6 +8,14 @@ export { APIRequestContext, APIResponse, BrowserContext, Locator, Page, Request
 import { components } from '@shopware/api-client/admin-api-types';
 import { Image } from 'image-js';
 
+declare global {
+    namespace PlaywrightTest {
+        interface Matchers<R> {
+            toHaveVisibleFocus(): Promise<R>;
+        }
+    }
+}
+
 interface RequestOptions$1<PAYLOAD> {
     [key: string]: unknown;
     data?: PAYLOAD;
@@ -3982,6 +3990,10 @@ declare class Actor {
     baseURL: string | undefined;
     constructor(name: string, page: Page, baseURL?: string);
     expects: playwright_test.Expect<{}>;
+    a11y_checks(locator: Locator): Promise<void>;
+    fillsIn(locator: Locator, input: string): Promise<void>;
+    presses(locator: Locator, key?: string): Promise<void>;
+    selectsRadioButton(radioGroup: Locator, inputLabel: string): Promise<void>;
     attemptsTo(task: () => Promise<void>): Promise<void>;
     goesTo(url: string, forceReload?: boolean): Promise<void>;
     private camelCaseToLowerCase;

package/dist/index.mjs

@@ -3235,6 +3235,59 @@ class Actor {
     this.baseURL = baseURL;
   }
   expects = expect;
+  async a11y_checks(locator) {
+    await locator.focus();
+    await expect(locator).toBeFocused();
+    await expect(locator).toHaveVisibleFocus();
+  }
+  async fillsIn(locator, input) {
+    const stepTitle = `${this.name} fills ${locator} with text "${input}"`;
+    await test$e.step(stepTitle, async () => {
+      await this.a11y_checks(locator);
+      await locator.fill(input);
+    });
+  }
+  async presses(locator, key) {
+    let defaultKey = "Space";
+    const tagName = await locator.evaluate((el) => el.tagName);
+    if (tagName === "BUTTON" || tagName === "A") {
+      await this.page.keyboard.press("Shift");
+      defaultKey = "Enter";
+    }
+    const inputKey = key ?? defaultKey;
+    const stepTitle = `${this.name} presses ${inputKey} on ${locator}`;
+    await test$e.step(stepTitle, async () => {
+      await this.a11y_checks(locator);
+      await locator.press(inputKey);
+    });
+  }
+  async selectsRadioButton(radioGroup, inputLabel) {
+    const stepTitle = `${this.name} selects radio button ${inputLabel}`;
+    await test$e.step(stepTitle, async () => {
+      const desiredOption = radioGroup.getByRole("radio", { name: inputLabel });
+      if (!await desiredOption.isChecked()) {
+        const options = [];
+        for (const labelEl of await radioGroup.locator("label").all()) {
+          const label = await labelEl.innerText();
+          const radioButton = radioGroup.getByRole("radio", { name: label });
+          const isChecked = await radioButton.isChecked();
+          options.push({ label, locator: radioButton, isChecked });
+        }
+        const defaultOptionIndex = options.findIndex((opt) => opt.isChecked);
+        const desiredOptionIndex = options.findIndex((opt) => opt.label === inputLabel);
+        if (defaultOptionIndex === -1) {
+          throw new Error(`No option is selected by default.`);
+        }
+        const step = defaultOptionIndex < desiredOptionIndex ? 1 : -1;
+        const inputKey = step === 1 ? "ArrowDown" : "ArrowUp";
+        for (let i = defaultOptionIndex; i !== desiredOptionIndex; i += step) {
+          await this.presses(options[i].locator, inputKey);
+          await this.page.waitForLoadState("domcontentloaded");
+        }
+      }
+      await this.a11y_checks(desiredOption);
+    });
+  }
   async attemptsTo(task) {
     const stepTitle = `${this.name} attempts to ${this.camelCaseToLowerCase(task.name)}`;
     await test$e.step(stepTitle, async () => await task());
@@ -11705,6 +11758,40 @@ const test$1 = test$e.extend({
   ]
 });
 
+expect.extend({
+  async toHaveVisibleFocus(locator) {
+    try {
+      const boxShadowStyle = await locator.evaluate((element) => {
+        const computedStyle = window.getComputedStyle(element);
+        return computedStyle.boxShadow !== "none";
+      });
+      const borderStyle = await locator.evaluate((element) => {
+        const computedStyle = window.getComputedStyle(element);
+        return computedStyle.borderStyle !== "none" && computedStyle.borderWidth !== "0px" && computedStyle.borderColor !== "transparent" && !computedStyle.borderColor.includes("rgba(0, 0, 0, 0)");
+      });
+      const outlineStyle = await locator.evaluate((element) => {
+        const computedStyle = window.getComputedStyle(element);
+        return computedStyle.outline !== "none" && computedStyle.outlineWidth !== "0px" && computedStyle.borderColor !== "transparent" && !computedStyle.borderColor.includes("rgba(0, 0, 0, 0)");
+      });
+      if (!boxShadowStyle && !borderStyle && !outlineStyle) {
+        return {
+          message: () => `expected ${locator} to have visible focus, but no outline, border or box-shadow was detected`,
+          pass: false
+        };
+      }
+      return {
+        message: () => `${locator} has visible focus`,
+        pass: true
+      };
+    } catch (error) {
+      return {
+        message: () => `expected ${locator} to have visible focus, but it failed with error: ${error.message}`,
+        pass: false
+      };
+    }
+  }
+});
+
 async function applyToElements(page, selectors, stringHandler, locatorHandler) {
   if (!selectors.length) return;
   const stringSelectors = selectors.filter((s) => typeof s === "string");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware-ag/acceptance-test-suite",
-  "version": "11.35.0",
+  "version": "11.36.0",
   "description": "Shopware Acceptance Test Suite",
   "author": "shopware AG",
   "license": "MIT",