test(playwright): add axe playwright tests in bruno room

react-apps/bruno-room/package.json

@@ -22,6 +22,7 @@
     "three-stdlib": "^2.34.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.0",
     "@playwright/test": "^1.48.2",
     "@repo/eslint-config": "workspace:*",
     "@repo/playwright-config": "workspace:*",

react-apps/bruno-room/playwright-tests/home.spec.ts

@@ -1,7 +1,40 @@
+import AxeBuilder from "@axe-core/playwright";
 import { expect, test } from "@playwright/test";
 
 test("has title", async ({ page }) => {
   await page.goto("/");
 
   await expect(page).toHaveTitle("React App - Bruno Room | Threejs Journey");
 });
+
+test("has heading", async ({ browserName, page }) => {
+  // https://playwright.dev/docs/api/class-page#page-goto
+  test.fixme(
+    browserName === "firefox",
+    "Errors are occurring in firefox in CI pipeline",
+  );
+
+  await page.goto("/");
+
+  await expect(
+    page.getByRole("heading", {
+      name: "Bruno room",
+    }),
+  ).toBeVisible();
+});
+
+test("should not have any automatically detectable accessibility issues", async ({
+  browserName,
+  page,
+}) => {
+  // https://playwright.dev/docs/api/class-page#page-goto
+  test.fixme(
+    browserName === "firefox",
+    "Errors are occurring in firefox in CI pipeline",
+  );
+  await page.goto("/");
+
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+
+  expect(accessibilityScanResults.violations).toEqual([]);
+});