form no work

e2e/.eslintrc.js

@@ -2,13 +2,16 @@
 module.exports = {
   extends: ['plugin:playwright/playwright-test'],
   rules: {
-    'playwright/max-nested-describe': ['error', { max: 1 }]
+    'playwright/max-nested-describe': ['error', { max: 1 }],
+    'playwright/no-nth-methods': 'error',
+    'playwright/no-raw-locators': 'error'
   },
   overrides: [
     {
-      files: ['tests/visual/*.spec.js'],
+      files: ['tests/visual-a11y/*.spec.js'],
       rules: {
-        'playwright/no-wait-for-timeout': 'off'
+        'playwright/no-wait-for-timeout': 'off',
+        'playwright/expect-expect': 'off'
       }
     }
   ]

e2e/appActions.js

@@ -84,12 +84,10 @@ async function createDomainObjectWithDefaults(
   await page.getByRole('button', { name: 'Create' }).click();
 
   // Click the object specified by 'type'
-  await page.click(`li[role='menuitem']:text("${type}")`);
+  await page.getByRole('menuitem', { name: new RegExp(`${type}`) }).click();
 
   // Modify the name input field of the domain object to accept 'name'
-  const nameInput = page.locator('form[name="mctForm"] .first input[type="text"]');
+  await page.getByLabel('Title', { exact: true }).fill(name);
-  await nameInput.fill('');
-  await nameInput.fill(name);
 
   if (page.testNotes) {
     // Fill the "Notes" section with information about the

e2e/fixtures/avpFixtures.js

@@ -35,7 +35,7 @@
 
 const fs = require('fs');
 const path = require('path');
-const { test, expect } = require('./pluginFixtures');
+const { test, expect } = require('../pluginFixtures');
 const AxeBuilder = require('@axe-core/playwright').default;
 
 // Constants for repeated values

e2e/playwright-ci.config.js

@@ -76,8 +76,7 @@ const config = {
         outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
       }
     ],
-    ['junit', { outputFile: '../test-results/results.xml' }],
+    ['junit', { outputFile: '../test-results/results.xml' }]
-    ['@deploysentinel/playwright']
   ]
 };
 

e2e/tests/framework/appActions.e2e.spec.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('../../pluginFixtures.js');
+const { test, expect } = require('../../fixtures/pluginFixtures');
 const {
   createDomainObjectWithDefaults,
   createNotification,

e2e/tests/functional/features/branding.e2e.spec.js

@@ -24,7 +24,7 @@
 This test suite is dedicated to tests which verify branding related components.
 */
 
-const { test, expect } = require('../../baseFixtures.js');
+const { test, expect } = require('../../../baseFixtures.js');
 
 test.describe('Branding tests', () => {
   test('About Modal launches with basic branding properties', async ({ page }) => {

e2e/tests/functional/features/tooltips.e2e.spec.js

@@ -33,8 +33,8 @@ comfortable running this test during a live mission?" Avoid creating or deleting
 Make no assumptions about the order that elements appear in the DOM.
 */
 
-const { test, expect } = require('../../pluginFixtures');
+const { test, expect } = require('../../../pluginFixtures');
-const { createDomainObjectWithDefaults, expandEntireTree } = require('../../appActions');
+const { createDomainObjectWithDefaults, expandEntireTree } = require('../../../appActions');
 
 test.describe('Verify tooltips', () => {
   let folder1;

e2e/tests/performance/features/tabs.e2e.spec.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { createDomainObjectWithDefaults, waitForPlotsToRender } = require('../../appActions');
+const { createDomainObjectWithDefaults, waitForPlotsToRender } = require('../../../appActions');
-const { test, expect } = require('../../pluginFixtures');
+const { test, expect } = require('../../../pluginFixtures');
 
 test.describe('Tabs View', () => {
   test('Renders tabbed elements nicely', async ({ page }) => {

e2e/tests/visual-a11y/features/controlledClock.visual.spec.js

@@ -25,8 +25,8 @@ Collection of Visual Tests set to run with browser clock manipulate made possibl
 clockOptions plugin fixture.
 */
 
-const { VISUAL_URL, MISSION_TIME } = require('../../constants');
+const { VISUAL_URL, MISSION_TIME } = require('../../../constants');
-const { test, expect } = require('../../pluginFixtures');
+const { test, expect } = require('../../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
 
 test.describe('Visual - Controlled Clock', () => {

e2e/tests/visual-a11y/features/notification.visual.spec.js

@@ -34,14 +34,14 @@ test.describe("Visual - Check Notification Info Banner of 'Save successful' @a11
     await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });
 
-  test("Create a clock, click on 'Save successful' banner and dismiss it", async ({
+  test("Create a folder, click on 'Save successful' banner and dismiss it", async ({
     page,
     theme
   }) => {
     // Create a clock domain object
     await createDomainObjectWithDefaults(page, {
-      type: 'Clock',
+      type: 'Condition Widget',
-      name: 'Default Clock'
+      name: 'Visual Condition Widget'
     });
     // Click on the div with role="alert" that has "Save successful" text
     await page.locator('div[role="alert"]:has-text("Save successful")').click();

package.json

@@ -32,7 +32,7 @@
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-compat": "4.2.0",
     "eslint-plugin-no-unsanitized": "4.0.2",
-    "eslint-plugin-playwright": "0.12.0",
+    "eslint-plugin-playwright": "0.20.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-simple-import-sort": "10.0.0",
     "eslint-plugin-unicorn": "49.0.0",

src/api/forms/components/FormProperties.vue

@@ -32,10 +32,11 @@
       <div
         v-for="section in formSections"
         :key="section.id"
+        :aria-labelledby="'sectionTitle'"
         class="c-form__section"
         :class="section.cssClass"
       >
-        <h2 v-if="section.name" class="c-form__section-header">
+        <h2 v-if="section.name" :id="'sectionTitle' + section.id" class="c-form__section-header">
           {{ section.name }}
         </h2>
         <FormRow