fix: e2e tests for a11y

platforms/web/test-e2e/tests/inline_layout_test.ts

@@ -25,15 +25,15 @@ Scenario('I can see the movie inline player layout', async ({ I }) => {
   I.see('Favorite');
   I.see('Share');
   I.seeTextEquals('Related Films', 'h2');
-  I.see('Caminandes 1: Llama Drama', locate({ css: 'a[aria-label="Caminandes 1: Llama Drama"]' }).inside(videoListLocator));
-  I.see('Caminandes 2: Gran Dillama', locate({ css: 'a[aria-label="Caminandes 2: Gran Dillama"]' }).inside(videoListLocator));
+  I.see('Caminandes 1: Llama Drama', locate({ css: 'a[data-testid="Caminandes 1: Llama Drama"]' }).inside(videoListLocator));
+  I.see('Caminandes 2: Gran Dillama', locate({ css: 'a[data-testid="Caminandes 2: Gran Dillama"]' }).inside(videoListLocator));
 });
 
 Scenario('I switch to another video in the movie screen', async ({ I }) => {
   await I.openVideoCard(constants.bigBuckBunnyTitle, ShelfId.allFilms);
   I.see(constants.bigBuckBunnyTitle);
 
-  I.click('Caminandes 1: Llama Drama', locate({ css: 'a[aria-label="Caminandes 1: Llama Drama"]' }).inside(videoListLocator));
+  I.click('Caminandes 1: Llama Drama', locate({ css: 'a[data-testid="Caminandes 1: Llama Drama"]' }).inside(videoListLocator));
   I.see('Caminandes 1: Llama Drama');
 });
 
@@ -52,8 +52,8 @@ Scenario('I can see the series inline player layout', async ({ I }) => {
   I.see('Share');
   I.seeTextEquals('Minecraft Animation Workshop', 'h1');
   I.see('Season 1', locate({ css: 'select' }).inside(videoListLocator));
-  I.see('S1:E2', locate({ css: 'a[aria-label="Basics Of Blender"]' }).inside(videoListLocator));
-  I.see('S1:E3', locate({ css: 'a[aria-label="Using Mineways"]' }).inside(videoListLocator));
+  I.see('S1:E2', locate({ css: 'a[data-testid="Basics Of Blender"]' }).inside(videoListLocator));
+  I.see('S1:E3', locate({ css: 'a[data-testid="Using Mineways"]' }).inside(videoListLocator));
 });
 
 Scenario('I can start the inline player', async ({ I }) => {
@@ -63,21 +63,21 @@ Scenario('I can start the inline player', async ({ I }) => {
 
 Scenario('I switch to the episode in the video list', async ({ I }) => {
   await I.openVideoCard(constants.minecraftAnimationWorkshopTitle, ShelfId.allCourses, true);
-  I.waitForElement('a[aria-label="Welcome"]', 3);
-  I.click('S1:E1', locate({ css: 'a[aria-label="Welcome"]' }).inside(videoListLocator));
+  I.waitForElement('a[data-testid="Welcome"]', 3);
+  I.click('S1:E1', locate({ css: 'a[data-testid="Welcome"]' }).inside(videoListLocator));
   I.see('S1:E1 - Welcome');
 });
 
 Scenario('I switch to another season in the video list', async ({ I }) => {
   await I.openVideoCard(constants.minecraftAnimationWorkshopTitle, ShelfId.allCourses, true);
-  I.waitForElement('a[aria-label="Welcome"]', 3);
-  I.click('S1:E1', locate({ css: 'a[aria-label="Welcome"]' }).inside(videoListLocator));
+  I.waitForElement('a[data-testid="Welcome"]', 3);
+  I.click('S1:E1', locate({ css: 'a[data-testid="Welcome"]' }).inside(videoListLocator));
 
   I.see('Season 1/4 - Episode 1/6');
   I.selectOption({ css: 'select[name="season"]' }, 'Season 2');
 
-  I.waitForElement('a[aria-label="Choosing a skin (Cycles Render)"]', 3);
-  I.click(locate({ css: 'a[aria-label="Choosing a skin (Cycles Render)"]' }).inside(videoListLocator));
+  I.waitForElement('a[data-testid="Choosing a skin (Cycles Render)"]', 3);
+  I.click(locate({ css: 'a[data-testid="Choosing a skin (Cycles Render)"]' }).inside(videoListLocator));
 
   I.dontSee('Season 1/4 - Episode 1/6');
   I.see('Season 2/4 - Episode 1/4');

platforms/web/test-e2e/tests/live_channel_test.ts

@@ -36,9 +36,7 @@ Before(async ({ I }) => {
   I.useConfig(testConfigs.basicNoAuth);
 });
 
-const videoDetailsLocator = locate({ css: 'div[data-testid="video-details"]' });
-const shelfContainerLocator = locate({ css: 'div[role="row"]' });
-const shelfLocator = locate({ css: 'div[role="cell"]' }).inside(shelfContainerLocator);
+const videoDetailsLocator = locate({ css: 'header[data-testid="video-details"]' });
 const epgContainerLocator = locate({ css: 'div[data-testid="container"]' });
 
 const makeEpgProgramLocator = (id: string) => locate({ css: `div[data-testid*="${id}"]` }).inside(epgContainerLocator);
@@ -58,7 +56,7 @@ Scenario('I can navigate to live channels from the live channels shelf', async (
   await I.scrollToShelf(ShelfId.liveChannels);
 
   for (let i = 1; i <= liveChannelsCount; i++) {
-    I.see(`Channel ${i}`, shelfLocator);
+    I.see(`Channel ${i}`, { xpath: `//section[@data-testid="shelf-${ShelfId.liveChannels}"]` });
   }
 
   I.see('Live Channels');
@@ -247,12 +245,18 @@ Scenario('I can see the channel logo for Channel 2', async ({ I }) => {
 
 Scenario('I can see the background image for Channel 3', async ({ I }) => {
   await I.openVideoCard('Channel 3');
-  await I.seeVideoDetailsBackgroundImage('Channel 3', 'https://cdn.jwplayer.com/v2/media/wewsVyR7/images/background.webp?poster_fallback=1&width=1280');
+  I.seeAttributesOnElements('header[data-testid="video-details"] img', {
+    alt: '', // Intentionally empty
+    src: 'https://cdn.jwplayer.com/v2/media/wewsVyR7/images/background.webp?poster_fallback=1&width=1280',
+  });
 });
 
 Scenario('I can see the background image for Channel 4', async ({ I }) => {
   await I.openVideoCard('Channel 4');
-  await I.seeVideoDetailsBackgroundImage('Channel 4', 'https://cdn.jwplayer.com/v2/media/kH7LozaK/images/background.webp?poster_fallback=1&width=1280');
+  I.seeAttributesOnElements('header[data-testid="video-details"] img', {
+    alt: '', // Intentionally empty
+    src: 'https://cdn.jwplayer.com/v2/media/kH7LozaK/images/background.webp?poster_fallback=1&width=1280',
+  });
 });
 
 async function isSelectedProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, channel: string, isLive: boolean) {

platforms/web/test-e2e/tests/login/account_test.ts

@@ -111,7 +111,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.submitForm();
 
     I.see(incorrectLogin);
-    I.seeCssPropertiesOnElements(formFeedback, { 'background-color': 'rgb(255, 12, 62)' });
+    I.seeCssPropertiesOnElements(formFeedback, { 'background-color': 'rgb(255, 53, 53)' });
 
     checkField(I, 'email', true);
     checkField(I, 'password', true);

platforms/web/test-e2e/tests/login/home_test.ts

@@ -67,7 +67,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     loginContext = await I.registerOrLogin(loginContext);
 
     await I.openMainMenu();
-    I.click('Log out');
+    I.click('text=Log out');
 
     await I.openSignInMenu();
 

platforms/web/test-e2e/tests/register_test.ts

@@ -85,7 +85,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
 
     I.fillField('password', '1234');
     I.pressKey('Tab');
-    checkColor('rgb(255, 12, 62)');
+    checkColor('rgb(255, 53, 53)');
 
     I.fillField('password', 'Test1234');
     checkColor('rgb(255, 255, 255)');

platforms/web/test-e2e/utils/constants.ts

@@ -15,7 +15,7 @@ export enum ShelfId {
 }
 
 export const makeShelfXpath = (shelf: ShelfId) => {
-  return `//div[@data-testid="shelf-${shelf}"]`;
+  return `//section[@data-testid="shelf-${shelf}"]`;
 };
 
 export default {

platforms/web/test-e2e/utils/login.ts

@@ -22,8 +22,8 @@ export function fillAndCheckField(I: CodeceptJS.I, field, value, error: string |
 
 export function checkField(I: CodeceptJS.I, field, error: string | boolean = false) {
   const hoverColor = 'rgba(255, 255, 255, 0.7)';
-  const activeColor = error ? 'rgb(255, 12, 62)' : 'rgb(255, 255, 255)';
-  const restingColor = error ? 'rgb(255, 12, 62)' : 'rgba(255, 255, 255, 0.34)';
+  const activeColor = error ? 'rgb(255, 53, 53)' : 'rgb(255, 255, 255)';
+  const restingColor = error ? 'rgb(255, 53, 53)' : 'rgba(255, 255, 255, 0.34)';
 
   // If error === true, there's an error, but no associated message
   if (error && error !== true) {

platforms/web/test-e2e/utils/steps_file.ts

@@ -42,7 +42,7 @@ const stepsObj = {
   logout: async function (this: CodeceptJS.I) {
     await this.openMainMenu();
 
-    this.click('div[aria-label="Log out"]');
+    this.click('text=Log out');
   },
   // This function will register the user on the first call and return the context
   // then assuming context is passed in the next time, will log that same user back in
@@ -449,11 +449,6 @@ const stepsObj = {
       }`);
     });
   },
-  seeVideoDetailsBackgroundImage: async function (this: CodeceptJS.I, name: string, src: string) {
-    const imageLocator = locate({ css: `div[data-testid="video-details"] img[alt="${name}"]` });
-    const imgSrc = await this.grabAttributeFrom(imageLocator, 'src');
-    assert.equal(imgSrc, src, "img element src attribute doesn't match");
-  },
   seeEpgChannelLogoImage: async function (this: CodeceptJS.I, channelId: string, src: string, alt: string) {
     const imageLocator = locate({ css: `div[data-testid="${channelId}"] img[alt="${alt}"]` });
     const imgSrc = await this.grabAttributeFrom(imageLocator, 'src');