accessibility test for Painless lab (#75688) (#76335)

* accessibility test for painless lab

* skipped a test due to aria-violation

* skipped tests due to aria-violation and added datatestsubj

* removed the unwanted import

* incorporate review comments

* feedback incorporated

* review comments incorporated

* removed unwanted expect

x-pack/plugins/painless_lab/public/application/components/output_pane/output_pane.tsx

@@ -50,6 +50,7 @@ export const OutputPane: FunctionComponent<Props> = ({ isLoading, response }) =>
     <EuiPanel className="painlessLabRightPane">
       <EuiTabbedContent
         className="painlessLabRightPane__tabs"
+        data-test-subj="painlessTabs"
         size="s"
         tabs={[
           {

x-pack/plugins/painless_lab/public/application/constants.tsx

@@ -25,6 +25,7 @@ export const painlessContextOptions = [
   {
     value: 'painless_test',
     inputDisplay: defaultLabel,
+    'data-test-subj': 'basicButtonDropdown',
     dropdownDisplay: (
       <>
         <strong>{defaultLabel}</strong>
@@ -41,6 +42,7 @@ export const painlessContextOptions = [
   {
     value: 'filter',
     inputDisplay: filterLabel,
+    'data-test-subj': 'filterButtonDropdown',
     dropdownDisplay: (
       <>
         <strong>{filterLabel}</strong>
@@ -57,6 +59,7 @@ export const painlessContextOptions = [
   {
     value: 'score',
     inputDisplay: scoreLabel,
+    'data-test-subj': 'scoreButtonDropdown',
     dropdownDisplay: (
       <>
         <strong>{scoreLabel}</strong>

x-pack/test/accessibility/apps/painless_lab.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['common', 'security']);
+  const testSubjects = getService('testSubjects');
+  const find = getService('find');
+  const a11y = getService('a11y');
+
+  describe('Accessibility Painless Lab Editor', () => {
+    before(async () => {
+      await PageObjects.common.navigateToApp('painlessLab');
+    });
+
+    it('renders the page without a11y errors', async () => {
+      await PageObjects.common.navigateToApp('painlessLab');
+      await a11y.testAppSnapshot();
+    });
+
+    it('click on the output button', async () => {
+      const painlessTabsOutput = await find.byCssSelector(
+        '[data-test-subj="painlessTabs"] #output'
+      );
+      await painlessTabsOutput.click();
+      await a11y.testAppSnapshot();
+    });
+
+    it('click on the parameters button', async () => {
+      const painlessTabsParameters = await find.byCssSelector(
+        '[data-test-subj="painlessTabs"] #parameters'
+      );
+      await painlessTabsParameters.click();
+      await a11y.testAppSnapshot();
+    });
+
+    // github.com/elastic/kibana/issues/75876
+    it.skip('click on the context button', async () => {
+      const painlessTabsContext = await find.byCssSelector(
+        '[data-test-subj="painlessTabs"] #context'
+      );
+      await painlessTabsContext.click();
+      await a11y.testAppSnapshot();
+    });
+
+    it.skip('click on the Basic button', async () => {
+      await testSubjects.click('basicButtonDropdown');
+      await a11y.testAppSnapshot();
+    });
+
+    it.skip('click on the Filter button', async () => {
+      await testSubjects.click('filterButtonDropdown');
+      await a11y.testAppSnapshot();
+    });
+
+    it.skip('click on the Score button', async () => {
+      await testSubjects.click('scoreButtonDropdown');
+      await a11y.testAppSnapshot();
+    });
+  });
+}

x-pack/test/accessibility/config.ts

@@ -20,6 +20,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       require.resolve('./apps/grok_debugger'),
       require.resolve('./apps/search_profiler'),
       require.resolve('./apps/uptime'),
+      require.resolve('./apps/painless_lab'),
     ],
     pageObjects,
     services,

x-pack/test/functional/config.js

@@ -128,6 +128,10 @@ export default async function ({ readConfigFile }) {
         pathname: '/app/dev_tools',
         hash: '/searchprofiler',
       },
+      painlessLab: {
+        pathname: '/app/dev_tools',
+        hash: '/painless_lab',
+      },
       spaceSelector: {
         pathname: '/',
       },