test

package.json

@@ -45,7 +45,6 @@
     "unit": "vitest run --exclude test/playwright/**/*",
     "watch": "vitest",
     "coverage": "vitest run --coverage",
-    "e2e": "nightwatch --config test/e2e/nightwatch.conf.js",
     "test:playwright": "playwright test",
     "test": "npm-run-all unit test:playwright",
     "clean": "rm -rf dist",
@@ -77,7 +76,6 @@
     "autoprefixer": "^10.2.5",
     "c8": "^7.11.0",
     "chalk": "^4.1.0",
-    "chromedriver": "127",
     "concat": "^1.0.3",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
@@ -96,14 +94,12 @@
     "jsdom-global": "^3.0.2",
     "klaw-sync": "^6.0.0",
     "lodash-es": "^4.17.21",
-    "nightwatch": "^3.2.1",
     "npm-publish-prerelease": "^1.0.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-calc": "^8.0.0",
     "postcss-pxtorem": "^6.0.0",
     "postcss-scss": "^4.0.9",
-    "puppeteer": "22.15.0",
     "sass": "^1.32.11",
     "sinon": "^11.1.0",
     "stylelint": "^16.10.0",
@@ -135,6 +131,7 @@
     }
   },
   "dependencies": {
+    "@axe-core/playwright": "^4.10.1",
     "@rei/cdr-tokens": "^12.4.2",
     "tabbable": "^4.0.0"
   },

playwright.config.ts

@@ -1,4 +1,22 @@
 import { defineConfig, devices } from '@playwright/test';
+// import vite from 'test/vite';
+
+// const startViteServer = function() {
+//   return vite.start({
+//     configFile: './vite.config.ts',
+//   });
+// }
+
+// let viteServer;
+
+// async before() {
+//   viteServer = await startViteServer();
+//   const port = viteServer.config.server.port;
+//   this.launchUrl = `http://localhost:${port}`;
+// },
+// async after() {
+//   await viteServer.close();
+// },
 
 /**
  * Read environment variables from file.
@@ -71,9 +89,10 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3001/rei-cedar/',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
 });

src/components/formGroup/CdrFormGroup.vue

@@ -77,6 +77,7 @@ const disabledClass = computed(() => props.disabled ? 'cdr-form-group--disabled'
       :error="error"
       v-if="error"
       :id="`${uniqueId}-error`"
+      aria-live="polite"
     >
       <!-- @slot Error messaging template content that is displayed when `error` prop is true  -->
       <template #error>

src/components/formGroup/__tests__/__snapshots__/CdrFormGroup.spec.js.snap

@@ -48,6 +48,7 @@ exports[`CdrFormGroup > form group with error slot > renders correctly 1`] = `
     
   </div>
   <div
+    aria-live="polite"
     class="cdr-form-error"
     id="123-error"
     role="status"
@@ -112,6 +113,7 @@ exports[`CdrFormGroup > form group with error state > renders correctly 1`] = `
     
   </div>
   <div
+    aria-live="polite"
     class="cdr-form-error"
     id="renders-error"
     role="status"
@@ -311,6 +313,7 @@ exports[`CdrFormGroup > when text is passed as error prop > renders correctly 1`
     
   </div>
   <div
+    aria-live="polite"
     class="cdr-form-error"
     id="123-error"
     role="status"

src/components/select/CdrSelect.vue

@@ -261,6 +261,7 @@ const selectModel = computed({
         :role="errorRole"
         :id="`${uniqueId}-error`"
         v-if="error"
+        aria-live="polite"
       >
         <template #error>
           <!-- @slot Error messaging text that is displayed when the `error` prop is true. -->

src/components/select/__tests__/__snapshots__/CdrSelect.spec.js.snap

@@ -425,6 +425,7 @@ exports[`CdrSelect > default configuration with a name attribute > with an error
     
     
     <div
+      aria-live="polite"
       class="cdr-form-error"
       id="renders-error"
       role="status"

src/dev/router.js

@@ -2,8 +2,6 @@ import App from 'srcdir/dev/App.vue';
 import Examples from 'componentsdir/examples';
 
 import KitchenSink from 'srcdir/dev/KitchenSink.vue';
-import e2e1 from 'srcdir/dev/e2e1.vue';
-import e2e2 from 'srcdir/dev/e2e2.vue';
 
 // // Extra paths for backstop.
 // //  These are smaller sections of larger demo pages to make screenshotting more reliable
@@ -65,10 +63,6 @@ const routes = [
   { path: '/switch', name: 'Switch', component: Examples.cdrSwitch },
   { path: '/tooltip', name: 'Tooltip', component: Examples.tooltip },
   { path: '/utility', name: 'Utility', component: Examples.utility },
-
-  // Nightwatch test targets
-  { path: '/e2e-1', component: e2e1 },
-  { path: '/e2e-2', component: e2e2 },
 ];
 
 export default routes;