diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/dependencies.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/dependencies.spec.ts index 2c2e93d463c50..22ac5a72733e4 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/dependencies.spec.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/dependencies.spec.ts @@ -6,6 +6,7 @@ */ import { synthtrace } from '../../../synthtrace'; import { opbeans } from '../../fixtures/synthtrace/opbeans'; +import { checkA11y } from '../../support/commands'; const start = '2021-10-10T00:00:00.000Z'; const end = '2021-10-10T00:15:00.000Z'; @@ -43,6 +44,17 @@ describe('Dependencies', () => { cy.contains('h1', 'postgresql'); }); + + it('has no detectable a11y violations on load', () => { + cy.visit( + `/app/apm/services/opbeans-java/dependencies?${new URLSearchParams( + timeRange + )}` + ); + cy.contains('a[role="tab"]', 'Dependencies'); + // set skipFailures to true to not fail the test when there are accessibility failures + checkA11y({ skipFailures: true }); + }); }); describe('dependency overview page', () => { @@ -62,6 +74,18 @@ describe('Dependencies', () => { cy.contains('h1', 'opbeans-java'); }); + + it('has no detectable a11y violations on load', () => { + cy.visit( + `/app/apm/backends/overview?${new URLSearchParams({ + ...timeRange, + backendName: 'postgresql', + })}` + ); + cy.contains('h1', 'postgresql'); + // set skipFailures to true to not fail the test when there are accessibility failures + checkA11y({ skipFailures: true }); + }); }); describe('service overview page', () => { diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/errors/error_details.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/errors/error_details.spec.ts index f2479b7400732..beaf1837c834c 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/errors/error_details.spec.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/errors/error_details.spec.ts @@ -7,6 +7,7 @@ import url from 'url'; import { synthtrace } from '../../../../synthtrace'; +import { checkA11y } from '../../../support/commands'; import { generateData } from './generate_data'; const start = '2021-10-10T00:00:00.000Z'; @@ -39,6 +40,13 @@ describe('Error details', () => { await synthtrace.clean(); }); + it('has no detectable a11y violations on load', () => { + cy.visit(errorDetailsPageHref); + cy.contains('Error group 00000'); + // set skipFailures to true to not fail the test when there are accessibility failures + checkA11y({ skipFailures: true }); + }); + describe('when error has no occurrences', () => { it('shows an empty message', () => { cy.visit( diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/errors/errors_page.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/errors/errors_page.spec.ts index d08e22092d592..6ff4795cbcb18 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/errors/errors_page.spec.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/errors/errors_page.spec.ts @@ -7,6 +7,7 @@ import url from 'url'; import { synthtrace } from '../../../../synthtrace'; +import { checkA11y } from '../../../support/commands'; import { generateData } from './generate_data'; const start = '2021-10-10T00:00:00.000Z'; @@ -41,6 +42,13 @@ describe('Errors page', () => { await synthtrace.clean(); }); + it('has no detectable a11y violations on load', () => { + cy.visit(javaServiceErrorsPageHref); + cy.contains('Error occurrences'); + // set skipFailures to true to not fail the test when there are accessibility failures + checkA11y({ skipFailures: true }); + }); + describe('when service has no errors', () => { it('shows empty message', () => { cy.visit(nodeServiceErrorsPageHref); diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_inventory/service_inventory.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_inventory/service_inventory.spec.ts index f74a1d122e426..40afece0ce908 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_inventory/service_inventory.spec.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_inventory/service_inventory.spec.ts @@ -7,6 +7,7 @@ import url from 'url'; import { synthtrace } from '../../../../synthtrace'; import { opbeans } from '../../../fixtures/synthtrace/opbeans'; +import { checkA11y } from '../../../support/commands'; const timeRange = { rangeFrom: '2021-10-10T00:00:00.000Z', @@ -53,6 +54,12 @@ describe('When navigating to the service inventory', () => { cy.visit(serviceInventoryHref); }); + it('has no detectable a11y violations on load', () => { + cy.contains('h1', 'Services'); + // set skipFailures to true to not fail the test when there are accessibility failures + checkA11y({ skipFailures: true }); + }); + it('has a list of services', () => { cy.contains('opbeans-node'); cy.contains('opbeans-java'); @@ -93,7 +100,7 @@ describe('When navigating to the service inventory', () => { cy.wait(aliasNames); }); - it.skip('when selecting a different time range and clicking the update button', () => { + it('when selecting a different time range and clicking the update button', () => { cy.wait(aliasNames); cy.selectAbsoluteTimeRange( diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts index 31586651cbb84..fcd9e472cc7eb 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts @@ -8,6 +8,7 @@ import url from 'url'; import { synthtrace } from '../../../../synthtrace'; import { opbeans } from '../../../fixtures/synthtrace/opbeans'; +import { checkA11y } from '../../../support/commands'; const start = '2021-10-10T00:00:00.000Z'; const end = '2021-10-10T00:15:00.000Z'; @@ -102,6 +103,13 @@ describe('Service Overview', () => { cy.loginAsReadOnlyUser(); cy.visit(baseUrl); }); + + it('has no detectable a11y violations on load', () => { + cy.contains('opbeans-node'); + // set skipFailures to true to not fail the test when there are accessibility failures + checkA11y({ skipFailures: true }); + }); + it('transaction latency chart', () => { cy.get('[data-test-subj="latencyChart"]'); }); diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/transactions_overview/transactions_overview.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/transactions_overview/transactions_overview.spec.ts index 3deb4b8619f60..fb8468f42474e 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/transactions_overview/transactions_overview.spec.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/transactions_overview/transactions_overview.spec.ts @@ -8,11 +8,12 @@ import url from 'url'; import { synthtrace } from '../../../../synthtrace'; import { opbeans } from '../../../fixtures/synthtrace/opbeans'; +import { checkA11y } from '../../../support/commands'; const start = '2021-10-10T00:00:00.000Z'; const end = '2021-10-10T00:15:00.000Z'; -const serviceOverviewHref = url.format({ +const serviceTransactionsHref = url.format({ pathname: '/app/apm/services/opbeans-node/transactions', query: { rangeFrom: start, rangeTo: end }, }); @@ -35,8 +36,18 @@ describe('Transactions Overview', () => { cy.loginAsReadOnlyUser(); }); + it('has no detectable a11y violations on load', () => { + cy.visit(serviceTransactionsHref); + cy.contains('aria-selected="true"', 'Transactions').should( + 'have.class', + 'euiTab-isSelected' + ); + // set skipFailures to true to not fail the test when there are accessibility failures + checkA11y({ skipFailures: true }); + }); + it('persists transaction type selected when navigating to Overview tab', () => { - cy.visit(serviceOverviewHref); + cy.visit(serviceTransactionsHref); cy.get('[data-test-subj="headerFilterTransactionType"]').should( 'have.value', 'request' diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts b/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts index cb66d6db809f3..91edae9046f6d 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts @@ -6,6 +6,11 @@ */ import 'cypress-real-events/support'; import { Interception } from 'cypress/types/net-stubbing'; +import 'cypress-axe'; +import { + AXE_CONFIG, + AXE_OPTIONS, +} from 'test/accessibility/services/a11y/constants'; Cypress.Commands.add('loginAsReadOnlyUser', () => { cy.loginAs({ username: 'apm_read_user', password: 'changeme' }); @@ -78,3 +83,25 @@ Cypress.Commands.add( }); } ); + +// A11y configuration + +const axeConfig = { + ...AXE_CONFIG, +}; +const axeOptions = { + ...AXE_OPTIONS, + runOnly: [...AXE_OPTIONS.runOnly, 'best-practice'], +}; + +export const checkA11y = ({ skipFailures }: { skipFailures: boolean }) => { + // https://github.com/component-driven/cypress-axe#cychecka11y + cy.injectAxe(); + cy.configureAxe(axeConfig); + const context = '.kbnAppWrapper'; // Scopes a11y checks to only our app + /** + * We can get rid of the last two params when we don't need to add skipFailures + * params = (context, options, violationCallback, skipFailures) + */ + cy.checkA11y(context, axeOptions, undefined, skipFailures); +};