Skip to content

Commit

Permalink
[MWPW-161069][NALA][A11Y] Add accessibility automation test for Milo …
Browse files Browse the repository at this point in the history 
…blocks (#3091)

* add a11y test for remaining blocks

* fix eslint errors

* comment MPC video for a11y test

---------

Co-authored-by: Santoshkumar Sharanappa Nateekar <nateekar@santoshumarsmbp.corp.adobe.com>
  • Loading branch information
@skumar09
skumar09 and Santoshkumar Sharanappa Nateekar authored Oct 29, 2024
1 parent ff054af commit 9fab9ff
Show file tree
Hide file tree
Showing 13 changed files with 307 additions and 71 deletions.
26 changes: 17 additions & 9 deletions nala/blocks/marquee-anchors/marquee-anchors.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { expect, test } from '@playwright/test';
import WebUtil from '../../libs/webutil.js';
import { features } from './marquee-anchors.spec.js';
import MarqueeAnchors from './marquee-anchors.page.js';
import { runAccessibilityTest } from '../../libs/accessibility.js';

let webUtil;
let marquee;
Expand Down Expand Up @@ -74,6 +75,10 @@ test.describe('Milo Marquee Anchors test suite', () => {
await expect(await marquee.anchorLink.media.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.media.h4Text} ${data.anchors.media.linkText}`, 5, data.anchors.text.h4Text));
await expect(await marquee.anchorLink.linkToAdobe.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.linkToAdobe.h4Text} ${data.anchors.linkToAdobe.linkText}`, 6, data.anchors.media.h4Text));
});

await test.step('step-4: Verify the accessibility test on the marquee anchors block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeAnchors, skipA11yTest: true });
});
});

// Test 1 : Marquee anchors (transparent)
Expand Down Expand Up @@ -123,18 +128,21 @@ test.describe('Milo Marquee Anchors test suite', () => {
await expect(marquee.anchorLink.linkToAdobe.icon).toBeVisible();

await expect(marquee.anchorFooter).toContainText(data.anchors.footerText);
});

await test.step('step-3: Verify analytics attributes', async () => {
await expect(await marquee.marqueeAnchorsTransparent).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee-anchors', 1));
await test.step('step-3: Verify analytics attributes', async () => {
await expect(await marquee.marqueeAnchorsTransparent).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee-anchors', 1));
await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));

await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
await expect(await marquee.anchorLink.howTo.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.howTo.h4Text} ${data.anchors.howTo.linkText}`, 3, data.anchors.headerText));
await expect(await marquee.anchorLink.text.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.text.h4Text} ${data.anchors.text.linkText}`, 4, data.anchors.howTo.h4Text));
await expect(await marquee.anchorLink.media.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.media.h4Text} ${data.anchors.media.linkText}`, 5, data.anchors.text.h4Text));
await expect(await marquee.anchorLink.linkToAdobe.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.linkToAdobe.h4Text} ${data.anchors.linkToAdobe.linkText}`, 6, data.anchors.media.h4Text));
});

await expect(await marquee.anchorLink.howTo.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.howTo.h4Text} ${data.anchors.howTo.linkText}`, 3, data.anchors.headerText));
await expect(await marquee.anchorLink.text.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.text.h4Text} ${data.anchors.text.linkText}`, 4, data.anchors.howTo.h4Text));
await expect(await marquee.anchorLink.media.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.media.h4Text} ${data.anchors.media.linkText}`, 5, data.anchors.text.h4Text));
await expect(await marquee.anchorLink.linkToAdobe.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.linkToAdobe.h4Text} ${data.anchors.linkToAdobe.linkText}`, 6, data.anchors.media.h4Text));
});
await test.step('step-4: Verify the accessibility test on the marquee anchors (transparent) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeAnchorsTransparent, skipA11yTest: true });
});
});
});
75 changes: 72 additions & 3 deletions nala/blocks/marquee/marquee.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { expect, test } from '@playwright/test';
import WebUtil from '../../libs/webutil.js';
import { features } from './marquee.spec.js';
import MarqueeBlock from './marquee.page.js';
import { runAccessibilityTest } from '../../libs/accessibility.js';

let webUtil;
let marquee;
Expand Down Expand Up @@ -42,6 +43,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the marquee(light) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeLight });
});
});

// Test 1 : Marquee (light, xxl-button)
Expand Down Expand Up @@ -69,6 +74,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.backgroundImage).toBeVisible();
await expect(await marquee.backgroundImage).toHaveAttribute('loading', 'eager');
});

await test.step('step-3: Verify the accessibility test on the Marquee (light, xxl-button) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeLightXxlButton });
});
});

// Test 2 : Marquee (small)
Expand Down Expand Up @@ -97,6 +106,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.marqueeSmall).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 1));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (small) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeSmall });
});
});

// Test 3 : Marquee (small,light)
Expand Down Expand Up @@ -128,6 +141,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (small, light) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeSmallLight });
});
});

// Test 4 : Marquee (large)
Expand Down Expand Up @@ -158,6 +175,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.outlineButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (large) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeLarge });
});
});

// Test 5 : Marquee (large,light)
Expand Down Expand Up @@ -188,6 +209,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.outlineButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (large, light ) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeLargeLight });
});
});

// Test 6 : Marquee (large standard)
Expand Down Expand Up @@ -215,6 +240,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.backgroundImage).toBeVisible();
await expect(await marquee.backgroundImage).toHaveAttribute('loading', 'eager');
});

await test.step('step-4: Verify the accessibility test on the Marquee (large standard) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeLargeStandardDark });
});
});

// Test 7 : Marquee (large compact)
Expand All @@ -240,13 +269,17 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.backgroundImage).toBeVisible();
await expect(await marquee.backgroundImage).toHaveAttribute('loading', 'eager');
});

await test.step('step-3: Verify the accessibility test on the Marquee (large compact) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeLargeCompactDark });
});
});
// Test 8 : Marquee (quiet)
test(`[Test Id - ${features[8].tcid}] ${features[8].name},${features[8].tags}`, async ({ page, baseURL }) => {
console.info(`[Test Page]: ${baseURL}${features[8].path}${miloLibs}`);
const { data } = features[8];

await test.step('step-1: Go to Marquee (quiet ) block test page', async () => {
await test.step('step-1: Go to Marquee (quiet) block test page', async () => {
await page.goto(`${baseURL}${features[8].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
await expect(page).toHaveURL(`${baseURL}${features[8].path}${miloLibs}`);
Expand All @@ -267,14 +300,18 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.marqueeQuiet).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 1));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (quiet) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeQuiet });
});
});

// Test 9 : Marquee (inline)
test(`[Test Id - ${features[9].tcid}] ${features[9].name},${features[9].tags}`, async ({ page, baseURL }) => {
console.info(`[Test Page]: ${baseURL}${features[9].path}${miloLibs}`);
const { data } = features[9];

await test.step('step-1: Go to Marquee (inline ) block test page', async () => {
await test.step('step-1: Go to Marquee (inline) block test page', async () => {
await page.goto(`${baseURL}${features[9].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
await expect(page).toHaveURL(`${baseURL}${features[9].path}${miloLibs}`);
Expand All @@ -293,6 +330,10 @@ test.describe('Milo Marquee Block test suite', () => {
await test.step('step-3: Verify analytic attributes', async () => {
await expect(await marquee.marqueeInline).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 1));
});

await test.step('step-4: Verify the accessibility test on the Marquee (inline) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeInline });
});
});

// Test 10: Marquee (split,small)
Expand Down Expand Up @@ -323,6 +364,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (split, small) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeSplitSmall });
});
});

// Test 11 : Marquee (split,large)
Expand Down Expand Up @@ -357,6 +402,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.blueButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
await expect(await marquee.actionLink2).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.linkText, 2, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (split, large) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeSplitLarge });
});
});

// Test 12 : Marquee (split,one-third,large,light)
Expand Down Expand Up @@ -391,6 +440,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.blueButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
await expect(await marquee.actionLink2).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.linkText, 2, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (split, one-third, large, light) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeSplitOneThirdLargeLight });
});
});

// Test 13 : Marquee (split,one-third)
Expand Down Expand Up @@ -425,6 +478,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.blueButtonL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
await expect(await marquee.actionLink2).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.linkText, 2, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (split, one-third) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeSplitOneThird });
});
});

// Test 14 : Marquee (split,one-third,small,light)
Expand Down Expand Up @@ -454,6 +511,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.marqueeSplitOneThirdSmallLight).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 1));
await expect(await marquee.blueButtonL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (split,one-third,small,light) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeSplitOneThirdSmallLight });
});
});

// Test 15 : Marquee small (background video playsinline)
Expand Down Expand Up @@ -484,6 +545,10 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.marqueeSmallDark).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 1));
await expect(await marquee.blueButtonL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
});

await test.step('step-4: Verify the accessibility test on the Marquee (small) background video playsinline block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeSmallDark });
});
});

// Test 16: Marquee large (background video playsinline desktop)
Expand Down Expand Up @@ -559,7 +624,7 @@ test.describe('Milo Marquee Block test suite', () => {
console.info(`[Test Page]: ${baseURL}${features[18].path}${miloLibs}`);
const { data } = features[18];

await test.step('step-1: Go to Marquee ( background image focal point ) block test page', async () => {
await test.step('step-1: Go to Marquee (background image focal point) block test page', async () => {
await page.goto(`${baseURL}${features[18].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
await expect(page).toHaveURL(`${baseURL}${features[18].path}${miloLibs}`);
Expand All @@ -582,5 +647,9 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.backgroundImage).toBeVisible();
await expect(await marquee.backgroundImage).toHaveAttribute('style', 'object-position: right bottom;');
});

await test.step('step-4: Verify the accessibility test on the Marquee (background image focal point) block', async () => {
await runAccessibilityTest({ page, testScope: marquee.marqueeDark });
});
});
});
Loading

0 comments on commit 9fab9ff

Please sign in to comment.