itemengine-cypress-automation 1.0.278 → 1.0.280-applitools-0af112e.0

package/cypress/e2e/ILC/AudioResponseNew/barRecorderStyle.smoke.js

@@ -10,6 +10,14 @@ describe('Preview of Audio response for bar audio recorder style', () => {
         cy.loginAs('admin');
     });
 
+    beforeEach(() => {
+        cy.startApplitools();
+    });
+
+    afterEach(() => {
+        cy.eyesClose();
+    });
+
     describe('Preview of bar audio recorder style', { tags: 'smoke' }, () => {
         abortEarlySetup();
         before(() => {
@@ -19,7 +27,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             audioResponsePage.steps.switchToPreviewTab();
         });
 
-        it('By default: Mic icon, \'Allow microphone access\' help text should be displayed in \'bar audio recorder\'. Maximum recording length should be displayed in minutes(mm:ss) format.', () => {
+        it(`Audio response - By default: Mic icon, \'Allow microphone access\' help text should be displayed in \'bar audio recorder\'. Maximum recording length should be displayed in minutes(mm:ss) format.`, () => {
             utilities.verifyInnerText(audioResponsePage.barPreviewStartRecordingButton(), 'REC');
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewStartRecordingButton(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.microphoneIcon(), 'visible');
@@ -27,6 +35,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             utilities.verifyElementVisibilityState(audioResponsePage.allowMicrophoneAccessHelpText(), 'visible');
             utilities.verifyInnerText(audioResponsePage.barPreviewRecordTime(), '15:00');
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewRecordTime(), 'visible');
+            cy.eyesCheckWindow(`Audio response -  Mic icon, \'Allow microphone access\' help text`);
         });
 
         it('CSS of \'Preview\' section', { tags: 'css' }, () => {
@@ -52,7 +61,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             });
         });
 
-        it('When the user clicks on the \'Start recording\' button, a countdown should begin and help text "Preparing to record" should be displayed. The recording should start after the countdown, a beep sound should play and the help text should change to "Recording...". User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. Pause recording and Stop recording buttons should be displayed in record player. Start recording button should not be displayed.', () => {
+        it(`Audio response - When the user clicks on the \'Start recording\' button, a countdown should begin and help text "Preparing to record" should be displayed. The recording should start after the countdown, a beep sound should play and the help text should change to "Recording...". User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. Pause recording and Stop recording buttons should be displayed in record player. Start recording button should not be displayed.`, () => {
             audioResponsePage.steps.startRecordingBarPreview();
             utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Preparing to record 3');
             utilities.verifyElementVisibilityState(audioResponsePage.recordingStatusIcon(), 'visible');
@@ -66,6 +75,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewStopRecordingButton(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.recordingStatusIcon(), 'visible');
             utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
+            cy.eyesCheckWindow(`Audio response -  Verify countdown, help text updates, recording starts with beep, and correct duration. Display Pause, Stop buttons.`);
         });
 
         it('CSS of \'Preview\' section once recording starts', { tags: 'css' }, () => {
@@ -170,13 +180,14 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
         });
 
-        it('When the recorder is in paused state and the user clicks on the \'Resume recording\' button, recording should get resumed. The help text should update to "Recording...". Progress bar should display the elapsed time and the remaining time until recording is in progress. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. Pause recording and stop recording icon should be displayed. Start recording button should not be displayed', () => {
+        it(`Audio response -When the recorder is in paused state and the user clicks on the \'Resume recording\' button, recording should get resumed. The help text should update to "Recording...". Progress bar should display the elapsed time and the remaining time until recording is in progress. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. Pause recording and stop recording icon should be displayed. Start recording button should not be displayed`, () => {
             audioResponsePage.steps.resumeRecordingBarPreview();
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewStartRecordingButton(), 'notExist');
             utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPauseRecordingButton(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewStopRecordingButton(), 'visible');
-            audioResponsePage.steps.verifyRecordingLengthAfterResumingBarPreview();
+            audioResponsePage.steps.verifyRecordingLengthAfterResumingBarPreview(); 
+            cy.eyesCheckWindow(`Audio response - Verify recording resumes, help text updates, progress bar shows time, and correct duration. Display Pause, Stop icons`);
         });
 
         it('When the user hovers on \'Stop recording\' button, \'Stop recording\' text should be displayed in tooltip', () => {
@@ -213,7 +224,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
         });
 
-        it('When the user stops paused recording, recording should stop, recorded audio response should be saved. Progress bar and start recording button should be displayed on bar player. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'. Play button should be displayed. Stop recording button should not be displayed', () => {
+        it(`Audio response -When the user stops paused recording, recording should stop, recorded audio response should be saved. Progress bar and start recording button should be displayed on bar player. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'. Play button should be displayed. Stop recording button should not be displayed`, () => {
             audioResponsePage.steps.resetQuestionPreview();
             audioResponsePage.steps.startRecordingBarPreview();
             audioResponsePage.steps.waitForRecordingToStartBarPreview();
@@ -224,9 +235,10 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPlaybackTime(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
             audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:00', '00:04');
+            cy.eyesCheckWindow(`Audio response - Verify recording stops, audio saves, progress bar, Play button, and correct duration display`);
         });
 
-        it('When recording is inprogress and user has reached maximum recorder length, Retake and Play icon should be displayed along with progress bar. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'.', () => {
+        it(`Audio response -When recording is inprogress and user has reached maximum recorder length, Retake and Play icon should be displayed along with progress bar. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'.`, () => {
             audioResponsePage.steps.switchToEditTab();
             audioResponsePage.steps.setMaximumRecorderLength(10);
             audioResponsePage.steps.switchToPreviewTab();
@@ -239,6 +251,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPlaybackTime(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
             audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:00', '00:10');
+            cy.eyesCheckWindow(`Audio response - Verify Retake, Play icons, progress bar, and recorded duration '(min:secs)' when recording reaches max length`);
         });
     });
 
@@ -252,7 +265,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             audioResponsePage.steps.recordAndSaveAudioBarPreview(5000);
         });
 
-        it('A playback player with audio wave form, Volume meter, Retake recording and Play buttons, Volume control and playback speed buttons, Progress bar and time in (mm:ss / mm:ss) format should be displayed', () => {
+        it(`Audio response -A playback player with audio wave form, Volume meter, Retake recording and Play buttons, Volume control and playback speed buttons, Progress bar and time in (mm:ss / mm:ss) format should be displayed`, () => {
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewRetakeButton(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.volumeControlButton(), 'visible');
@@ -260,6 +273,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPlaybackTime(), 'visible');
             audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:00', '00:05');
+            cy.eyesCheckWindow(`Audio response - Audio wave form, Volume meter, Retake recording and Play buttons, Volume control and playback speed buttons, Progress bar and time`);
         });
 
         it('The progress bar should have a slider so that user can click/drag to seek the audio.', () => {
@@ -317,23 +331,23 @@ describe('Preview of Audio response for bar audio recorder style', () => {
                 audioResponsePage.steps.switchToPreviewTab();
                 audioResponsePage.steps.recordAndSaveAudioBarPreview(10000);
             });
-    
+
             it('When the user hovers over the \'Play\' button, a tooltip \'Play\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
                 audioResponsePage.playbackPlayButton()
                     .verifyTooltip('Play');
             });
-    
+
             it('When the user clicks on \'Play\' button, then the audio should start playing. Timer should display the amount of audio that has been played and the total audio length in (mm:ss)/(mm:ss) format.', () => {
                 audioResponsePage.steps.startPlayback();
                 audioResponsePage.steps.waitForPlaybackToBeginBarPreview();
                 audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:03', '00:10');
             });
-    
+
             it('When the user hovers over the \'Pause\' button, a tooltip \'Pause\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
                 audioResponsePage.playbackPauseButton()
                     .verifyTooltip('Pause');
             });
-    
+
             it('CSS of \'Preview\' section if playback is initiated', { tags: 'css' }, () => {
                 utilities.verifyCSS(audioResponsePage.barPreviewPlaybackTime(), {
                     'color': css.color.liText,
@@ -347,11 +361,11 @@ describe('Preview of Audio response for bar audio recorder style', () => {
                     'stroke': css.color.secondaryBtnActive
                 });
             });
-    
+
             it('Accessibility of \'Preview\' section if playback is initiated', { tags: 'a11y' }, () => {
                 cy.checkAccessibility(audioResponsePage.barPreviewPlaybackWrapper());
             });
-    
+
             it('When the audio player is in playback state and the user clicks on \'Pause\' button, then playback should get paused. Progress bar and timer should not update further and the \'Pause\' button should get replaced with \'Play\' button', () => {
                 audioResponsePage.steps.resetQuestionPreview();
                 audioResponsePage.steps.recordAndSaveAudioBarPreview(10000);
@@ -363,7 +377,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPauseButton(), 'notExist');
             });
-    
+
             it('CSS of \'Preview\' section if playback is paused', { tags: 'css' }, () => {
                 utilities.verifyCSS(audioResponsePage.playbackPlayButton().find('svg rect'), {
                     'fill': css.color.secondaryBtnBg
@@ -372,36 +386,36 @@ describe('Preview of Audio response for bar audio recorder style', () => {
                     'stroke': css.color.secondaryBtnActive
                 });
             });
-    
+
             it('Accessibility of \'Preview\' section if if playback is paused', { tags: 'a11y' }, () => {
                 cy.checkAccessibility(audioResponsePage.barPreviewPlaybackWrapper());
             });
-    
+
             it('When audio player is in paused state and user clicks on \'Play\' button, then playback should get resumed and \'Play\' button should get replaced with \'Pause\' button.', () => {
                 audioResponsePage.steps.startPlayback();
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPauseButton(), 'visible');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'notExist');
             });
-    
+
             it('When the user seeks the progress bar slider while the audio is playing, then the audio should continue to play from the position where the slider is seeked', () => {
                 audioResponsePage.steps.seekProgressBarSliderToCenter();
                 audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
             });
-    
+
             it('When the user seeks the progress bar slider while the audio is paused, then the audio playback should be in paused state and on playing the audio, then the audio should play from the position where the slider is seeked', () => {
                 audioResponsePage.steps.pausePlayback();
                 audioResponsePage.steps.seekProgressBarSliderToCenter();
                 audioResponsePage.steps.startPlayback();
                 audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
             });
-    
+
             it('When the audio playback is completed, the \'Pause\' button should get replaced with \'Play\' button', () => {
                 audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:10', '00:10');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPauseButton(), 'notExist');
                 audioResponsePage.steps.verifyProgressBarSliderPosition(99);
             });
-    
+
             it('CSS of progress bar in hover state', { tags: 'css' }, () => {
                 audioResponsePage.steps.hoverOnProgressBarSlider();
                 utilities.verifyCSS(audioResponsePage.progressBarSlider().parents('span[class*="MuiSlider-thumb"]'), {
@@ -409,7 +423,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
                 });
             });
         });
-    
+
         describe('Playback player : Volume control', () => {
             abortEarlySetup();
             before(() => {
@@ -419,10 +433,10 @@ describe('Preview of Audio response for bar audio recorder style', () => {
                 audioResponsePage.steps.switchToPreviewTab();
                 audioResponsePage.steps.recordAndSaveAudioBarPreview(10000);
             });
-    
+
             audioResponsePage.tests.verifyVolumeControlFunctionality();
         });
-    
+
         describe('Playback player : Playback speed', () => {
             const playbackSpeedOptions = ['1', '1.25', '1.5', '2'];
             abortEarlySetup();
@@ -433,9 +447,9 @@ describe('Preview of Audio response for bar audio recorder style', () => {
                 audioResponsePage.steps.switchToPreviewTab();
                 audioResponsePage.steps.recordAndSaveAudioBarPreview(10000);
             });
-    
+
             audioResponsePage.tests.verifyPlaybackSpeedContents(playbackSpeedOptions);
-    
+
             for (let index = 0; index < playbackSpeedOptions.length; index++) {
                 it(`When the user selects playback speed option ${playbackSpeedOptions[index]}x, the audio playback speed should be changed accordingly`, () => {
                     audioResponsePage.steps.resetQuestionPreview();
@@ -450,7 +464,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
                 });
             };
         });
-        
+
         describe('Playback player : Retake my audio response', () => {
             abortEarlySetup();
             before(() => {

package/cypress/e2e/ILC/AudioResponseNew/compactRecorderStyle.smoke.js

@@ -19,11 +19,12 @@ describe('Preview of Audio response for compact audio recorder style', () => {
             audioResponsePage.steps.switchToPreviewTab();
         });
 
-        it('If user selects \'Compact\' option from \'Audio recorder style\' toggle buttons, then \'Record\' button and \'Click the button to start recording...\' help text should be displayed in the preview tab', () => {
+        it(`Audio response - If user selects \'Compact\' option from \'Audio recorder style\' toggle buttons, then \'Record\' button and \'Click the button to start recording...\' help text should be displayed in the preview tab`, () => {
             utilities.verifyElementVisibilityState(audioResponsePage.compactPreviewRecordButton(), 'visible');
             utilities.verifyInnerText(audioResponsePage.compactPreviewRecordButton(), 'Record');
             utilities.verifyInnerText(audioResponsePage.compactPreviewRecordingHelpText(), 'Click the button to start recording...');
             utilities.verifyElementVisibilityState(audioResponsePage.compactPreviewRecordingHelpText(), 'visible');
+            cy.eyesCheckWindow(`Audio response - Default state of compact recorder style`);
         });
 
         it('CSS of Preview section', { tags: 'css' }, () => {
@@ -140,13 +141,14 @@ describe('Preview of Audio response for compact audio recorder style', () => {
             cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
         });
 
-        it('When the recorder is in paused state and the user clicks on the \'Resume recording\' button the recording should get resumed from where it was paused. Resume recording button should update to Pause button and the help text should update to "Recording...". The volume meter should also detect the sound levels during recording. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. Stop button should be displayed in preview tab.', () => {
+        it(`Audio response - When the recorder is in paused state and the user clicks on the \'Resume recording\' button the recording should get resumed from where it was paused. Resume recording button should update to Pause button and the help text should update to "Recording...". The volume meter should also detect the sound levels during recording. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. Stop button should be displayed in preview tab.`, () => {
             audioResponsePage.steps.resumeRecordingCompactPreview();
             utilities.verifyElementVisibilityState(audioResponsePage.compactPreviewResumeRecordingButton(), 'notExist');
             utilities.verifyElementVisibilityState(audioResponsePage.compactPreviewPauseRecordingButton(), 'visible');
             utilities.verifyInnerText(audioResponsePage.compactPreviewRecordingStatusText(), 'Recording...')
             audioResponsePage.steps.addWaitToRecordAudio(1000);
             audioResponsePage.steps.verifyRecordingLengthAfterResumingCompactPreview();
+            cy.eyesCheckWindow(`Audio response - Verify recording resumes, help text updates, volume meter detects sound, and buttons update to Pause. Display Stop button.`);
         });
 
         it('When the recording is inprogress and user clicks on \'Stop\' button, recording should stop and \'Your response has been recorded\' help text message should be displayed in preview. Recorded audio wave form, progress bar, volume control, playback speed buttons should be displayed. Playback time of the recorded audio should be displayed as \'(min:secs / min:sec)\'. Stop button should get replaced with Retake button and Play button should be displayed.', () => {
@@ -185,7 +187,7 @@ describe('Preview of Audio response for compact audio recorder style', () => {
             cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
         });
 
-        it('When recording is paused and the user clicks on \'Stop\' button, recording should stop and \'Your response has been recorded\' help text message should be displayed in preview. Stop button should get replaced with Playback button and Playback button should be enabled. Overlay should not be displayed in player', () => {
+        it(`Audio response - When recording is paused and the user clicks on \'Stop\' button, recording should stop and \'Your response has been recorded\' help text message should be displayed in preview. Stop button should get replaced with Playback button and Playback button should be enabled. Overlay should not be displayed in player`, () => {
             cy.log('Pre-step: Resetting question preview and start recording again')
             audioResponsePage.steps.resetQuestionPreview();
             audioResponsePage.steps.startRecordingCompactPreview();
@@ -197,6 +199,7 @@ describe('Preview of Audio response for compact audio recorder style', () => {
             audioResponsePage.steps.verifyResponseIsRecordedHelpText();
             utilities.verifyElementVisibilityState(audioResponsePage.compactPreviewRetakeButton(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.compactPreviewPlaybackPlayButton(), 'visible');
+            cy.eyesCheckWindow(`Audio response - Verify recording stops, 'Your response has been recorded' text shows, Stop button replaced with enabled Playback button, and overlay is hidden.`);
         });
 
         it('When recording is inprogress, recording should stop at maximum recording length and \'Stop\' button should get replaced with Retake button. Playback button should be displayed in enabled state. \Your response has been recorded\' help message should be displayed in preview. Overlay should not be displayed in player', () => {
@@ -215,7 +218,7 @@ describe('Preview of Audio response for compact audio recorder style', () => {
             utilities.verifyElementVisibilityState(audioResponsePage.compactPreviewPlaybackPlayButton(), 'visible');
         });
 
-        it('When the user updates maximum recorder length the recording should stop at the updated recorder length', () => {
+        it(`Audio response - When the user updates maximum recorder length the recording should stop at the updated recorder length`, () => {
             cy.log('Pre-step : Switching to edit tab, updating maximum recorder length and switching back to preview tab to reset the recording');
             audioResponsePage.steps.switchToEditTab();
             audioResponsePage.steps.setMaximumRecorderLength(5);
@@ -227,6 +230,7 @@ describe('Preview of Audio response for compact audio recorder style', () => {
             audioResponsePage.steps.verifyPlaybackTimeCompactPreview('00:00', '00:05')
             cy.log('Switching to Edit tab to prevent browser level alert window from appearing');
             audioResponsePage.steps.switchToEditTab();
+            cy.eyesCheckWindow(`Audio response - Verify recording stops at the updated maximum recorder length.`);
         });
     });
 
@@ -249,6 +253,7 @@ describe('Preview of Audio response for compact audio recorder style', () => {
             utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.compactPreviewPlaybackTime(), 'visible');
             audioResponsePage.steps.verifyPlaybackTimeCompactPreview('00:00', '00:05');
+            cy.eyesCheckWindow(`Audio response - Audio wave form, Volume meter, Retake recording and Play buttons, Volume control and playback speed buttons, Progress bar and time in (mm:ss / mm:ss) format`);
         });
 
         it('The progress bar should have a slider so that user can click/drag to seek the audio. When the user hovers on the waveform, a black cursor should be display on the waveform', () => {

package/cypress/e2e/ILC/AudioResponseNew/gradingViewAndCorrectAnswerViewContents.smoke.js

@@ -11,6 +11,14 @@ describe('Create item page - audio response: Grading view, Correct answer view c
         cy.loginAs('admin');
     });
 
+    beforeEach(() => {
+        cy.startApplitools();
+    });
+
+    afterEach(() => {
+        cy.eyesClose();
+    });
+
     if (views.includes('Grading view')) {
         describe('Grading view contents', { tags: 'smoke' }, () => {
             let actualAudioSeekedInPercent = 50
@@ -44,6 +52,7 @@ describe('Create item page - audio response: Grading view, Correct answer view c
             it('The response submitted by the student should be visible in the playback player of the grading view.', () => {
                 utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewPlaybackWrapper(), 'visible');
                 audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:00', '00:10');
+                cy.eyesCheckWindow(`Audio response - Grading view contents`);
             });
 
             it('When the user clicks on \'Play\' button, then the audio should start playing. Timer should display the amount of audio that has been played and the total audio length in (mm:ss)/(mm:ss) format.', () => {
@@ -58,10 +67,11 @@ describe('Create item page - audio response: Grading view, Correct answer view c
                 audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:05', '00:10');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPauseButton(), 'notExist');
+                cy.eyesCheckWindow(`Audio response : Grading view - Verify progress bar and timer stop, and Pause button is replaced with Play button`);
             });
 
             it('When the user seeks the progress bar slider while the audio is playing, then the audio should continue to play from the position where the slider is seeked', () => {
-                audioResponsePage.steps.seekProgressBarSliderToCenter();
+                audioResponsePage.steps.seekProgressBarSliderToCenter();3
                 audioResponsePage.steps.addWaitToPlayAudio(1000);
                 audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
             });
@@ -74,8 +84,9 @@ describe('Create item page - audio response: Grading view, Correct answer view c
                 audioResponsePage.steps.verifyProgressBarSliderPosition(99);
             });
 
-            it('A download button should be displayed in the playback player', () => {
+            it('Audio response - A download button should be displayed in the playback player', () => {
                 utilities.verifyElementVisibilityState(audioResponsePage.downloadAudioButton(), 'visible');
+                cy.eyesCheckWindow(`Audio response: Grading view - Verify download button is displayed in the playback player.`);
             });
 
             it('Empty score input field and total score should be displayed', () => {
@@ -125,8 +136,9 @@ describe('Create item page - audio response: Grading view, Correct answer view c
 
             correctAnswerViewPage.tests.verifyManualScoredQuestionHelpTextCorrectAnswerPage();
 
-            it('The points alloted to the question should be displayed', () => {
+            it('Audio response: The points alloted to the question should be displayed', () => {
                 correctAnswerViewPage.steps.verifyAvailablePoints(10);
+                cy.eyesCheckWindow('Audio response: Correct answer view contents');
             });
         });
     }

package/cypress/e2e/ILC/AudioResponseNew/previewContentsForAllViews.smoke.js

@@ -11,6 +11,14 @@ describe('Create item page - Audio response: Preview contents', () => {
         cy.loginAs('admin');
     });
 
+    beforeEach(() => {
+        cy.startApplitools();
+    });
+
+    afterEach(() => {
+        cy.eyesClose();
+    }); 
+
     views.forEach((view) => {
         describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
             abortEarlySetup();
@@ -49,7 +57,7 @@ describe('Create item page - Audio response: Preview contents', () => {
                 utilities.verifyElementVisibilityState(audioResponsePage.questionInstructionsText(), 'visible');
             });
 
-            it('When the user switches to preview tab, \'Click the button to start recording...\' help text message, rec button, mic icon, \'Allow microphone access\' help text should be displayed in \'Standard audio recorder\'. Maximum recording length should be displayed in minutes(mm:ss) format.', () => {
+            it(`${view} - Audio response - When the user switches to preview tab, \'Click the button to start recording...\' help text message, rec button, mic icon, \'Allow microphone access\' help text should be displayed in \'Standard audio recorder\'. Maximum recording length should be displayed in minutes(mm:ss) format.`, () => {
                 utilities.verifyInnerText(audioResponsePage.standardPreviewRecorderHelpText(), 'Click the button to start recording...');
                 utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewRecorderHelpText(), 'visible');
                 utilities.verifyInnerText(audioResponsePage.standardPreviewStartRecordingButton(), 'REC');
@@ -59,6 +67,7 @@ describe('Create item page - Audio response: Preview contents', () => {
                 utilities.verifyElementVisibilityState(audioResponsePage.allowMicrophoneAccessHelpText(), 'visible');
                 utilities.verifyInnerText(audioResponsePage.standardPreviewRecordTime(), '15:00');
                 utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewRecordTime(), 'visible');
+                cy.eyesCheckWindow(`${view} - Audio response - \'Click the button to start recording...\' help text message, rec button, mic icon, \'Allow microphone access\' help text`);
             });
 
             it('CSS of standard recording interface in Preview tab', { tags: 'css' }, () => {
@@ -106,7 +115,7 @@ describe('Create item page - Audio response: Preview contents', () => {
                 utilities.verifyElementVisibilityState(audioResponsePage.previewVolumeMeter(), 'visible');
             });
 
-            it('When the user clicks on the stop recording button, the recording should stop and the recording should get saved', () => {
+            it(`${view} - Audio response - When the user clicks on the stop recording button, the recording should stop and the recording should get saved`, () => {
                 audioResponsePage.steps.stopRecordingStandardPreview();
                 utilities.verifyInnerText(audioResponsePage.savingStatusText(), 'Saving');
                 utilities.verifyElementVisibilityState(audioResponsePage.savingStatusText(), 'visible');
@@ -116,6 +125,7 @@ describe('Create item page - Audio response: Preview contents', () => {
                 utilities.verifyElementVisibilityState(audioResponsePage.previewVolumeMeter(), 'visible');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
                 audioResponsePage.steps.verifyResponseIsRecordedHelpText();
+                cy.eyesCheckWindow(`${view} - Audio response - Verify recording stops and is saved when the Stop recording button is clicked`);
             });
         });
     });

package/cypress/e2e/ILC/BrainingCampManipulative/gradingViewAndCorrectAnswerViewContents.smoke.js

@@ -10,6 +10,14 @@ describe('Create item page - Brainingcamp manipulative: Grading view, Correct an
     before(() => {
         cy.loginAs('admin');
     });
+    
+    beforeEach(() => {
+        cy.startApplitools();
+    });
+
+    afterEach(() => {
+        cy.eyesClose();
+    }); 
 
     if (views.includes('Grading view')) {
         //Failing due to https://redmine.zeuslearning.com/issues/583133 
@@ -46,6 +54,7 @@ describe('Create item page - Brainingcamp manipulative: Grading view, Correct an
 
             it('Empty score input field and total score should be displayed', () => {
                 gradingViewPage.steps.verifyGradingViewScore('', 10);
+                cy.eyesCheckWindow(`Brainingcamp manipulative: Grading view contents`);
             });
 
             it('Accessibility of contents in preview tab', { tags: 'a11y' }, () => {
@@ -87,6 +96,7 @@ describe('Create item page - Brainingcamp manipulative: Grading view, Correct an
 
             it('The points alloted to the question should be displayed', () => {
                 correctAnswerViewPage.steps.verifyAvailablePoints(10);
+                cy.eyesCheckWindow(`Brainingcamp manipulative: Correct answer view contents`);
             });
 
             //Need to add CSS and A11y here once updated designs are available for correct answer

package/cypress/e2e/ILC/BrainingCampManipulative/previewTabContent.smoke.js

@@ -52,8 +52,9 @@ describe('Create item page - Brainingcamp manipulative: Preview contents', () =>
                 utilities.verifyElementVisibilityState(brainingCampManipulativePage.questionInstructionsText(), 'visible');
             });
 
-            it('The brainingcamp manipulative resource should be displayed', () => {
+            it(`${view} view: Brainingcamp manipulative - The brainingcamp manipulative resource should be displayed`, () => {
                 utilities.verifyElementVisibilityState(brainingCampManipulativePage.previewTabCanvas(), 'visible');
+                cy.eyesCheckWindow(`${view} view: Brainingcamp manipulative - Preview contents`);
             });
 
             it('CSS of preview tab contents', { tags: 'css' }, () => {

package/cypress/e2e/ILC/ChartsBar/HorizontalOrientationBarChart/allOrNothingScoringForAllViews.smoke.js

@@ -11,6 +11,14 @@ describe('Create item page - Charts - Bar horizontal orientation: All or nothing
         cy.loginAs('admin');
     });
 
+    beforeEach(() => {
+        cy.startApplitools();
+    });
+
+    afterEach(() => {
+        cy.eyesClose();
+    });
+
     if (!grepTags || !grepTags.includes('smoke')) {
         describe('Question preview modes: Student view and Grading view', () => {
             abortEarlySetup();
@@ -107,7 +115,7 @@ describe('Create item page - Charts - Bar horizontal orientation: All or nothing
             };
 
             //Need to remove skip once https://redmine.zeuslearning.com/issues/577535, https://redmine.zeuslearning.com/issues/577716 is resolved
-            it.skip('When the user selects \'Grading\' view without attempting the question, the correct answer should be displayed in the correct answer section graph and your answer is incorrect status message should be displayed', () => {
+            it.skip(`${view} - Charts bar: Horizontal - When the user selects 'Grading' view without attempting the question, the correct answer should be displayed in the correct answer section graph and your answer is incorrect status message should be displayed`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
@@ -127,10 +135,11 @@ describe('Create item page - Charts - Bar horizontal orientation: All or nothing
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 2, barValue: 6, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 3, barValue: 5, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 4, barValue: 0, range: 10 });
+                cy.eyesCheckWindow(`${view} - Grading view without attempting`);
             });
 
             //Fully incorrect case
-            it('When the user incorrectly sets a bar which was correct by default, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed, incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers', () => {
+            it(`${view} - Charts bar: Horizontal - When the user incorrectly sets a bar which was correct by default, then the user should be awarded with 0 points and on switching to grading view 'Your answer is incorrect' should be displayed, incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers`, () => {
                 chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 0, value: 5, range: 10 }, 'horizontal');
                 chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 4, value: 2, range: 10 }, 'horizontal');
                 if (view === 'Grading view') {
@@ -153,10 +162,11 @@ describe('Create item page - Charts - Bar horizontal orientation: All or nothing
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 2, barValue: 6, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 3, barValue: 5, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 4, barValue: 0, range: 10 });
+                cy.eyesCheckWindow(`${view} - Fully incorrect case`);
             });
 
             //Partially correct cases
-            it('When the user incorrectly sets a bar which was set to 0 and correct by default, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed, incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers', () => {
+            it(`${view} - Charts bar: Horizontal - When the user incorrectly sets a bar which was set to 0 and correct by default, then the user should be awarded with 0 points and on switching to grading view 'Your answer is incorrect' should be displayed, incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 }
@@ -181,9 +191,10 @@ describe('Create item page - Charts - Bar horizontal orientation: All or nothing
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 2, barValue: 6, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 3, barValue: 5, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 4, barValue: 0, range: 10 });
+                cy.eyesCheckWindow(`${view} - Partially correct case 1`);
             });
 
-            it('When the user attempts the question partially correct by incorrectly setting a bar which was incorrect by default, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed, correct icons should be displayed on the correctly attempted bars, incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers', () => {
+            it(`${view} - Charts bar: Horizontal - When the user attempts the question partially correct by incorrectly setting a bar which was incorrect by default, then the user should be awarded with 0 points and on switching to grading view 'Your answer is incorrect' should be displayed, correct icons should be displayed on the correctly attempted bars, incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 }
@@ -208,9 +219,10 @@ describe('Create item page - Charts - Bar horizontal orientation: All or nothing
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 2, barValue: 6, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 3, barValue: 5, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 4, barValue: 0, range: 10 });
+                cy.eyesCheckWindow(`${view} - Partially correct case 2`);
             });
 
-            it('When the user attempts the question partially correct by incorrectly setting a bar to zero which was incorrect by default, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed, correct icons should be displayed on the correctly attempted bars, incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers', () => {
+            it(`${view} - Charts bar: Horizontal - When the user attempts the question partially correct by incorrectly setting a bar to zero which was incorrect by default, then the user should be awarded with 0 points and on switching to grading view 'Your answer is incorrect' should be displayed, correct icons should be displayed on the correctly attempted bars, incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 }
@@ -235,9 +247,10 @@ describe('Create item page - Charts - Bar horizontal orientation: All or nothing
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 2, barValue: 6, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 3, barValue: 5, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 4, barValue: 0, range: 10 });
+                cy.eyesCheckWindow(`${view} - Partially correct case 3`);
             });
 
-            it('When the user attempts the question partially correct by incorrectly setting a bar which was set to zero by default, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed, correct icons should be displayed on the correctly attempted bars, incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers', () => {
+            it(`${view} - Charts bar: Horizontal - When the user attempts the question partially correct by incorrectly setting a bar which was set to zero by default, then the user should be awarded with 0 points and on switching to grading view 'Your answer is incorrect' should be displayed, correct icons should be displayed on the correctly attempted bars, incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 }
@@ -262,9 +275,10 @@ describe('Create item page - Charts - Bar horizontal orientation: All or nothing
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 2, barValue: 6, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 3, barValue: 5, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 4, barValue: 0, range: 10 });
+                cy.eyesCheckWindow(`${view} - Partially correct case 4`);
             });
 
-            it('When the user attempts the question partially correct by setting all bars correctly except 1 then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed, correct icons should be displayed on the correctly attempted bars and incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers', () => {
+            it(`${view} - Charts bar: Horizontal - When the user attempts the question partially correct by setting all bars correctly except 1 then the user should be awarded with 0 points and on switching to grading view 'Your answer is incorrect' should be displayed, correct icons should be displayed on the correctly attempted bars and incorrect icons should be displayed on the incorrectly attempted bars and correct answer section should be displayed with the correct answers`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 }
@@ -289,10 +303,11 @@ describe('Create item page - Charts - Bar horizontal orientation: All or nothing
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 2, barValue: 6, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 3, barValue: 5, range: 10 });
                 chartsBarPage.steps.verifyBarInCorrectAnswerSection({ barIndex: 4, barValue: 0, range: 10 });
+                cy.eyesCheckWindow(`${view} - Partially correct case 5`);
             });
 
             //Fully correct
-            it('When the user attempts the question correctly then the user should be awarded with full points and on switching to grading view \'Your answer is correct\' should be displayed, correct icons should be displayed on the correctly attempted bars and the correct answer section graph should not be displayed', () => {
+            it(`${view} - Charts bar: Horizontal - When the user attempts the question correctly then the user should be awarded with full points and on switching to grading view 'Your answer is correct' should be displayed, correct icons should be displayed on the correctly attempted bars and the correct answer section graph should not be displayed`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 }
@@ -314,6 +329,7 @@ describe('Create item page - Charts - Bar horizontal orientation: All or nothing
                 chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(4, 'correct');
                 chartsBarPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
                 chartsBarPage.steps.verifyCorrectAnswerSectionNotExist();
+                cy.eyesCheckWindow(`${view} - Fully correct case`);
             });
         });
     });