itemengine-cypress-automation 1.0.284-RepoUpdate13thJan-c7ac0b4.0 → 1.0.284-applitools-38637bb.0

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

@@ -14,6 +14,14 @@ describe('Create item page - Upload response : Preview contents', () => {
         cy.loginAs('admin');
     });
 
+    beforeEach(() => {
+        cy.startApplitools();
+    });
+
+    afterEach(() => {
+        cy.eyesClose();
+    });
+
     views.forEach((view) => {
         describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
             abortEarlySetup();
@@ -54,7 +62,7 @@ describe('Create item page - Upload response : Preview contents', () => {
                 utilities.verifyElementVisibilityState(uploadResponsePage.questionInstructionsText(), 'visible');
             });
 
-            it('Upload response area should have a Cloud icon and text \'Drag & Drop files here \'or browse files on your device,  or capture an image\' should be displayed', () => {
+            it(`${view} - Upload response area should have a Cloud icon and text 'Drag & Drop files here 'or browse files on your device,  or capture an image' should be displayed`, () => {
                 utilities.verifyElementVisibilityState(uploadResponsePage.uploadCloudIcon(), 'visible');
                 utilities.verifyInnerText(uploadResponsePage.dragAndDropFilesText(), 'Drag & Drop files here');
                 utilities.verifyTextContent(uploadResponsePage.fileUploadOptionsLabel(), 'or browse files on your device or capture an image');
@@ -82,7 +90,7 @@ describe('Create item page - Upload response : Preview contents', () => {
                 uploadResponsePage.steps.verifyUploadedFileLimitCount(0, 3);
             });
 
-            it('When user uploads file, then uploaded file name should be displayed and file count should get updated', () => {
+            it(`${view} - When user uploads file, then uploaded file name should be displayed and file count should get updated`, () => {
                 uploadResponsePage.steps.uploadFile('uploads/highlightImage.jpg');
                 uploadResponsePage.steps.uploadedFileContentsPreviewTab(0, 'highlightImage.jpg');
                 uploadResponsePage.steps.verifyUploadedFileLimitCount(1, 3);
@@ -103,13 +111,14 @@ describe('Create item page - Upload response : Preview contents', () => {
                 utilities.verifyElementCount(uploadResponsePage.fileName(), 2);
             });
 
-            it('When user edits the name of uploaded file, then edited name should be visible', () => {
+            it(`${view} - When user edits the name of uploaded file, then edited name should be visible`, () => {
                 uploadResponsePage.steps.clickOnEditDisplayTextIcon(0);
                 utilities.verifyElementVisibilityState(uploadResponsePage.dialogBox(), 'exist');
                 uploadResponsePage.steps.enterTextInEditDisplayTextPopupInputField('image.csv');
                 uploadResponsePage.steps.verifyTextInEditDisplayTextPopupInputField('image.csv');
                 uploadResponsePage.steps.clickAcceptButtonInPopup();
                 uploadResponsePage.steps.verifyUploadedFileName(0, 'image.csv');
+                cy.eyesCheckWindow(`${view} - Uploaded file name edited`);
             });
 
             it('CSS of Preview tab', { tags: 'css' }, () => {
@@ -158,12 +167,12 @@ describe('Create item page - Upload response : Preview contents', () => {
             });
 
             //Failed due to https://redmine.zeuslearning.com/issues/563182
-            it('When user uploads file type which is not selected from the \'Supported file types\' accordion menu, then file upload error message - \'The file type is not supported. Please upload files with the following supported formats: *file format separated by commas*\' should be displayed', () => {
+            it(`${view} - When user uploads file type which is not selected from the 'Supported file types' accordion menu, then file upload error message - 'The file type is not supported. Please upload files with the following supported formats: *file format separated by commas*' should be displayed`, () => {
                 uploadResponsePage.steps.uploadFile('uploads/sample.heif');
                 uploadResponsePage.steps.verifyWarningMessage('The file type is not supported. Please upload files with the following supported formats: CSV, Excel, GIF, JPG, Open Office, PDF, PNG, Powerpoint, Publisher, RTF, TXT, Word, XPS, ZIP.');
             });
 
-            it('When user tries to upload files more than the limit, then warning message \'You have reached the maximum number of files that can be uploaded.\' should be displayed', () => {
+            it(`${view} - When user tries to upload files more than the limit, then warning message 'You have reached the maximum number of files that can be uploaded.' should be displayed`, () => {
                 uploadResponsePage.steps.uploadFile('uploads/highlightImage.jpg');
                 uploadResponsePage.steps.uploadFile('uploads/image.png');
                 uploadResponsePage.steps.verifyWarningMessage('You have reached the maximum number of files that can be uploaded.');

package/cypress/e2e/ILC/UploadResponse/thumbNail.smoke.js

@@ -1,4 +1,4 @@
-import { uploadResponsePage, itemPreviewPage} from "../../../pages";
+import { uploadResponsePage, itemPreviewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
@@ -13,6 +13,14 @@ describe('Create item page - Upload response : Preview contents', () => {
         cy.loginAs('admin');
     });
 
+    beforeEach(() => {
+        cy.startApplitools();
+    });
+
+    afterEach(() => {
+        cy.eyesClose();
+    });
+
     views.forEach((view) => {
         describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
             abortEarlySetup();
@@ -56,12 +64,12 @@ describe('Create item page - Upload response : Preview contents', () => {
                 utilities.verifyElementVisibilityState(uploadResponsePage.questionInstructionsText(), 'visible');
             });
 
-            it('When user uploads file, then uploaded file name should be displayed, file count should get updated and thumb nail of the image should be visible', () => {
+            it(`${view} - When user uploads file, then uploaded file name should be displayed, file count should get updated and thumb nail of the image should be visible`, () => {
                 uploadResponsePage.steps.uploadFile('uploads/highlightImage.jpg');
                 uploadResponsePage.steps.verifyThumbNailExistOrNotExist('highlightImage.jpg', 'visible');
             });
 
-            it('CSS of Thumb nail and File name in preview tab', { tags: 'css' }, () => {
+            it(`${view} - CSS of Thumb nail and File name in preview tab`, { tags: 'css' }, () => {
                 utilities.verifyCSS(uploadResponsePage.imageThumbNail(), {
                     'box-sizing': 'border-box',
                     'min-height': 'auto',
@@ -79,9 +87,11 @@ describe('Create item page - Upload response : Preview contents', () => {
                 cy.checkAccessibility(uploadResponsePage.questionWrapperPreviewTab());
             });
 
-            it('When user clicks on the thumbnail then popup should open, and on clicking the close button the popup should close and the uploaded files should be displayed', () => {
+            it(`${view} - When user clicks on the thumbnail then popup should open, and on clicking the close button the popup should close and the uploaded files should be displayed`, () => {
+                utilities.verifyElementCount(uploadResponsePage.imageThumbNail(), 2);
                 uploadResponsePage.steps.clickOnImageThumbNail();
                 uploadResponsePage.steps.verifyImagePopUpDetail();
+                cy.eyesCheckWindow(`${view} - Thumbnail popup`);
                 uploadResponsePage.steps.closeImagePopup();
                 uploadResponsePage.steps.verifyThumbNailExistOrNotExist('highlightImage.jpg', 'visible');
                 utilities.verifyElementCount(uploadResponsePage.fileName(), 1);
@@ -95,7 +105,7 @@ describe('Create item page - Upload response : Preview contents', () => {
                 utilities.verifyElementCount(uploadResponsePage.fileName(), 1);
             });
 
-            it('When user uploads different file types then only image files should be displayed with thumbnail', () => {
+            it(`${view} - When user uploads different file types then only image files should be displayed with thumbnail`, () => {
                 for (let number = 0; number < 13; number++) {
                     uploadResponsePage.steps.deleteFile();
                     uploadResponsePage.steps.clickAcceptButtonInPopup();
@@ -104,7 +114,7 @@ describe('Create item page - Upload response : Preview contents', () => {
                 }
             });
 
-            it('When user uploads a file in .heif or .heic format then and info icon with tool tip should be present and image thumb nail should not be present', () => {
+            it(`${view} - When user uploads a file in .heif or .heic format then and info icon with tool tip should be present and image thumb nail should not be present`, () => {
                 for (let number = 13; number < 15; number++) {
                     uploadResponsePage.steps.deleteFile();
                     uploadResponsePage.steps.clickAcceptButtonInPopup();

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

@@ -19,7 +19,7 @@ describe('Preview of Video response for compact recorder style', () => {
             videoResponsePage.steps.switchToPreviewTab();
         });
 
-        it('If user selects \'Compact\' option from \'video recorder style\' toggle buttons, then \'Record\' button and \'Click the button to start recording...\' help text should be displayed in the preview tab', () => {
+        it(`Video response : If user selects \'Compact\' option from \'video 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(videoResponsePage.recordButtonCompactPreview(), 'visible');
             utilities.verifyInnerText(videoResponsePage.recordButtonCompactPreview(), 'Record');
             utilities.verifyInnerText(videoResponsePage.recordingHelpTextCompactPreview(), 'Click the button to start recording...');
@@ -139,7 +139,7 @@ describe('Preview of Video response for compact recorder style', () => {
             cy.checkAccessibility(videoResponsePage.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...". Resume icon button should get replaced with Pause icon button in the flyout, user should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs / min:sec)\'. Stop button should be displayed in preview tab.', () => {
+        it(`Video 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...". Resume icon button should get replaced with Pause icon button in the flyout, user should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs / min:sec)\'. Stop button should be displayed in preview tab.`, () => {
             videoResponsePage.steps.resumeRecordingCompactPreview();
             utilities.verifyElementVisibilityState(videoResponsePage.resumeRecordingButtonCompactPreview(), 'notExist');
             utilities.verifyElementVisibilityState(videoResponsePage.pauseRecordingButtonCompactPreview(), 'visible');
@@ -196,7 +196,7 @@ describe('Preview of Video response for compact recorder style', () => {
             utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
         });
 
-        it('When recording is inprogress, recording should stop at maximum recording duration and \'Stop\' button should get replaced with Retake button. Playback button should be displayed in enabled state.', () => {
+        it(`Video response : When recording is inprogress, recording should stop at maximum recording duration and \'Stop\' button should get replaced with Retake button. Playback button should be displayed in enabled state.`, () => {
             cy.log('Pre-step: Switch to edit tab and set maximum recording duration to 10 secs')
             videoResponsePage.steps.switchToEditTab();
             videoResponsePage.steps.setMaximumRecordingDuration(40);

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

@@ -14,6 +14,14 @@ describe('Create item page - Video 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 actualVideoSeekedInPercent = 50
@@ -43,9 +51,10 @@ describe('Create item page - Video response: Grading view, Correct answer view c
                 utilities.verifyElementVisibilityState(videoResponsePage.questionInstructionsText(), 'visible');
             });
 
-            it('The response submitted by the student should be visible in the playback player of the grading view.', () => {
+            it('Video response : The response submitted by the student should be visible in the playback player of the grading view.', () => {
                 utilities.verifyElementVisibilityState(videoResponsePage.standardPreviewPlaybackWrapper(), 'visible');
                 videoResponsePage.steps.verifyVideoPlaybackTimer('0:00', '0:12');
+                cy.eyesCheckWindow(`Video response - Grading view contents`);
             });
 
             it('When the user clicks on \'Play\' button, then the video should start playing. Timer should display the amount of video that has been played and the total video length in (mm:ss)/(mm:ss) format.', () => {
@@ -54,7 +63,7 @@ describe('Create item page - Video response: Grading view, Correct answer view c
                 videoResponsePage.steps.verifyVideoPlaybackTimer('0:03', '0:12');
             });
 
-            it('When the video 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', () => {
+            it('Video response : When the video 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', () => {
                 videoResponsePage.steps.verifyVideoPlaybackTimer('0:05', '0:12');
                 videoResponsePage.steps.pauseAndVerifyProgressBarSliderPosition();
                 videoResponsePage.steps.verifyVideoPlaybackTimer('0:05', '0:12');
@@ -121,7 +130,7 @@ describe('Create item page - Video response: Grading view, Correct answer view c
                 });
             }
 
-            it('A download button should be displayed in the playback player', () => {
+            it('Video response : A download button should be displayed in the playback player', () => {
                 utilities.verifyElementVisibilityState(videoResponsePage.downloadVideoButton(), 'visible');
             });
 
@@ -170,8 +179,9 @@ describe('Create item page - Video response: Grading view, Correct answer view c
 
             correctAnswerViewPage.tests.verifyManualScoredQuestionHelpTextCorrectAnswerPage();
 
-            it('The points alloted to the question should be displayed', () => {
+            it('Video response: The points alloted to the question should be displayed', () => {
                 correctAnswerViewPage.steps.verifyAvailablePoints(10);
+                cy.eyesCheckWindow('Video response: Correct answer view contents');
             });
         });
     }

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

@@ -13,6 +13,14 @@ describe('Create item page - Video response: Preview contents', () => {
         cy.loginAs('admin');
     });
 
+    beforeEach(() => {
+        cy.startApplitools();
+    });
+
+    afterEach(() => {
+        cy.eyesClose();
+    });
+
     views.forEach((view) => {
         describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
             abortEarlySetup();
@@ -59,7 +67,7 @@ describe('Create item page - Video response: Preview contents', () => {
                 utilities.verifyElementVisibilityState(videoResponsePage.startRecordingText(), 'visible');
             });
 
-            it('When the user has not started recording, a status message: \'Allow camera and microphone access.\' along with a microphone icon should be displayed on the recording interface', () => {
+            it(`${view} view - Video response: When the user has not started recording, a status message: \'Allow camera and microphone access.\' along with a microphone icon should be displayed on the recording interface`, () => {
                 videoResponsePage.steps.verifyRecordingStatus('Allow camera and microphone access.');
             });
 
@@ -146,13 +154,14 @@ describe('Create item page - Video response: Preview contents', () => {
                     utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
                 });
 
-                it('When a recording is in progress and the user first pauses the recording and then stops recording, then the recording should stop, recorded video response should be saved. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs)\'.', () => {
+                it(`${view} view - Video response: When a recording is in progress and the user first pauses the recording and then stops recording, then the recording should stop, recorded video response should be saved. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs)\'.`, () => {
                     videoResponsePage.steps.resetQuestionPreview();
                     videoResponsePage.steps.startRecording();
                     videoResponsePage.steps.waitForRecordingToStart();
                     videoResponsePage.steps.addWaitToRecord(9000);
                     videoResponsePage.steps.pauseRecording();
                     videoResponsePage.steps.stopAndVerifySavingAndRecordingLength();
+                    cy.eyesCheckWindow(`${view} view - Video response: Duration of their recorded video in minutes`);
                 });
             } else {
                 it('When a recording is in progress and the user clicks on the \'Pause recording\' button, recording should pause and the status message should update to \'Recording paused\'. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs/min:sec)\'. \'Pause recording\' button should get replaced with \'Resume recording\' button. \'Stop recording\' button should be displayed beside resume recording button', () => {
@@ -182,7 +191,7 @@ describe('Create item page - Video response: Preview contents', () => {
                 utilities.verifyInnerText(videoResponsePage.savedResponseText(), 'Your response has been recorded.');
             });
 
-            it('When the video 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', () => {
+            it(`${view} view - Video response: When the video 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`, () => {
                 videoResponsePage.steps.pauseAndVerifyProgressBarSliderPosition();
                 utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
                 utilities.verifyElementVisibilityState(videoResponsePage.playbackPauseButton(), 'notExist');

package/cypress/e2e/ILC/chartsDotsPlot/allOrNothingForAllViews.smoke.js

@@ -12,6 +12,14 @@ describe('Create Item page - Charts - Dot: 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();
@@ -44,7 +52,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
     };
 
     views.forEach((view) => {
-        describe(` Charts - Dot: All or nothing scoring - ${view}`, { tags: 'smoke' }, () => {
+        describe(`Charts - Dot: All or nothing scoring - ${view}`, { tags: 'smoke' }, () => {
             abortEarlySetup();
             before(() => {
                 switch (view) {
@@ -116,7 +124,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
             };
 
             //Note: Remove comment after https://redmine.zeuslearning.com/issues/570904 is resolved
-            it.skip('When the user selects \'Grading\' view without attempting the question, then by default correct dot column should have correct icons, incorrect dot column should have incorrect icons, the correct answer should be displayed in the correct answer section number line axis and correct/incorrect status message should not be displayed', () => {
+            it.skip(`${view} - Charts Dot - When the user selects \'Grading\' view without attempting the question, then by default correct dot column should have correct icons, incorrect dot column should have incorrect icons, the correct answer should be displayed in the correct answer section number line axis and correct/incorrect status message should not be displayed`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
@@ -141,7 +149,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 chartsDotPlotPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
             });
 
-            it('When the user attempts the question incorrectly then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted dot column should be displayed incorrect and the correct answer should be displayed in the correct answer section number line axis', () => {
+            it(`${view} - Charts Dot - When the user attempts the question incorrectly then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted dot column should be displayed incorrect and the correct answer should be displayed in the correct answer section number line axis`, () => {
                 chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(2, { point: 4, min: 1, interval: 1 });
                 chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(2, { point: 6, min: 1, interval: 1, defaultDots: 0 });
                 if (view === 'Grading view') {
@@ -170,7 +178,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 chartsDotPlotPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             });
 
-            it('When the user attempts the question by adding more dots than required in the dot columns having dots by default, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted dot column should be displayed incorrect and the correct answer should be displayed in the correct answer section number line axis', () => {
+            it(`${view} - Charts Dot - When the user attempts the question by adding more dots than required in the dot columns having dots by default, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted dot column should be displayed incorrect and the correct answer should be displayed in the correct answer section number line axis`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 };
@@ -201,7 +209,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 chartsDotPlotPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             });
 
-            it('When the user attempts the question by setting fewer dots than required in the dot columns having dots by default, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted dot column should be displayed incorrect and the correct answer should be displayed in the correct answer section number line axis', () => {
+            it(`${view} - Charts Dot - When the user attempts the question by setting fewer dots than required in the dot columns having dots by default, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted dot column should be displayed incorrect and the correct answer should be displayed in the correct answer section number line axis`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 };
@@ -233,7 +241,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 chartsDotPlotPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             });
 
-            it('When the user attempts the question by removing all the dots to dot column that is not supposed to be empty, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted dot column should be displayed incorrect and the correct answer should be displayed in the correct answer section number line axis', () => {
+            it(`${view} - Charts Dot - When the user attempts the question by removing all the dots to dot column that is not supposed to be empty, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted dot column should be displayed incorrect and the correct answer should be displayed in the correct answer section number line axis`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 };
@@ -265,7 +273,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 chartsDotPlotPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             });
 
-            it('When the user attempts the question by adding dots to the dot columns that is supposed to be empty, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted dot column should be displayed incorrect and the correct answer should be displayed in the correct answer section number line axis', () => {
+            it(`${view} - Charts Dot - When the user attempts the question by adding dots to the dot columns that is supposed to be empty, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted dot column should be displayed incorrect and the correct answer should be displayed in the correct answer section number line axis`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 };
@@ -297,7 +305,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 chartsDotPlotPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             });
 
-            it('When the user attempts the question by changing number of dots in the dot columns which have the correct number of dots by default and setting a dot column correctly, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the incorrectly attempted dot column should be displayed incorrect, correctly attempted dot column should be displayed correct, and the correct answer should be displayed in the correct answer section number line axis', () => {
+            it(`${view} - Charts Dot - When the user attempts the question by changing number of dots in the dot columns which have the correct number of dots by default and setting a dot column correctly, then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the incorrectly attempted dot column should be displayed incorrect, correctly attempted dot column should be displayed correct, and the correct answer should be displayed in the correct answer section number line axis`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 };
@@ -330,7 +338,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 chartsDotPlotPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             });
 
-            it('When the user attempts the question correctly, the user should be awarded with full points and on switching to grading view, \'Your answer is correct\' should be displayed and correct answer section should not be displayed', () => {
+            it(`${view} - Charts Dot - When the user attempts the question correctly, the user should be awarded with full points and on switching to grading view, \'Your answer is correct\' should be displayed and correct answer section should not be displayed`, () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.clearResponses();
                 };
@@ -353,6 +361,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 chartsDotPlotPage.steps.verifyCorrectDotColumnPreviewTab({ point: 5, min: 1, interval: 1 });
                 chartsDotPlotPage.steps.verifyEmptyDotColumnPreviewTab({ point: 6, min: 1, interval: 1 });
                 chartsDotPlotPage.steps.verifyCorrectAnswerSectionNotExists();
+                cy.eyesCheckWindow(`${view} view - Charts Dot - Attempting the question correctly`);
             });
 
         });

package/cypress/e2e/ILC/chartsDotsPlot/gradingViewAndCorrectAnswerView.smoke.js

@@ -88,7 +88,7 @@ describe('Create item page - Dot plot charts : Grading view, Correct answer view
                 chartsDotPlotPage.steps.verifyDotCountCorrectAnswerSection(2, { point: 1, min: 1, interval: 0.25 });
             });
 
-            it('Correct answer section along with dot plot attempted by the user should be displayed', () => {
+            it('Charts Dot - Correct answer section along with dot plot attempted by the user should be displayed', () => {
                 chartsDotPlotPage.steps.verifyCorrectDotColumnPreviewTab({ point: 3, min: 1, interval: 0.25 });
                 chartsDotPlotPage.steps.verifyCorrectDotPreviewTab({ point: 3, min: 1, interval: 0.25 });
                 chartsDotPlotPage.steps.verifyIncorrectDotColumnPreviewTab({ point: 2, min: 1, interval: 0.25 });
@@ -181,7 +181,7 @@ describe('Create item page - Dot plot charts : Grading view, Correct answer view
                 chartsDotPlotPage.steps.verifyCorrectDotPreviewTab({ point: 3, min: 1, interval: 0.25 });
             });
 
-            it('The points alloted to the question should be displayed', () => {
+            it('Charts Dot - The points alloted to the question should be displayed', () => {
                 correctAnswerViewPage.steps.verifyAvailablePoints(10);
             });
 

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

@@ -13,6 +13,14 @@ describe('Create item page: Charts - Dot - Preview contents in all views', () =>
         cy.loginAs('admin');
     });
 
+    beforeEach(() => {
+        cy.startApplitools();
+    });
+
+    afterEach(() => {
+        cy.eyesClose();
+    });
+
     views.forEach((view) => {
         describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
             abortEarlySetup();
@@ -71,13 +79,13 @@ describe('Create item page: Charts - Dot - Preview contents in all views', () =>
                 utilities.verifyElementVisibilityState(chartsDotPlotPage.previewTabXAxisLabelButton(), 'visible');
             });
 
-            it('The number line axis should be displayed with labels from 1 to 6 with 20 divisions', () => {
+            it(`${view} - Charts Dot - The number line axis should be displayed with labels from 1 to 6 with 20 divisions`, () => {
                 utilities.verifyElementVisibilityState(chartsDotPlotPage.numberLineAxisPreviewTab(), 'exist');
                 chartsDotPlotPage.steps.verifyDivisionsOnNumberLineAxisPreviewTab({ min: 1, max: 6, interval: 0.25 });
                 chartsDotPlotPage.steps.verifyLabelsOnNumberLineAxisPreviewTab(1, 6, 4);
             });
 
-            it('User should be able to edit the X axis labels in preview tab', () => {
+            it(`${view} - Charts Dot - User should be able to edit the X axis labels in preview tab`, () => {
                 chartsDotPlotPage.steps.editXAxisLabelInPreviewTab('Numbers of days');
                 utilities.verifyInnerText(chartsDotPlotPage.previewTabXAxisLabelButton(), 'Numbers of days');
             });
@@ -164,7 +172,7 @@ describe('Create item page: Charts - Dot - Preview contents in all views', () =>
                 chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
             });
 
-            it('When user removes dots from dot column having 10 dots then \'Add dot\' button should be in enabled state', () => {
+            it(`${view} - Charts Dot - When user removes dots from dot column having 10 dots then \'Add dot\' button should be in enabled state`, () => {
                 //using minus button
                 chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(9, { point: 5, min: 1, interval: 0.25 });
                 chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 5, min: 1, interval: 0.25 });
@@ -174,6 +182,7 @@ describe('Create item page: Charts - Dot - Preview contents in all views', () =>
                 chartsDotPlotPage.steps.decreaseDotInDotColumnUsingKeyboardPreviewTab(1, { point: 4, min: 1, interval: 0.25 });
                 utilities.verifyElementNotDisabled(chartsDotPlotPage.addButtonPreviewTab());
                 chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+                cy.eyesCheckWindow(`${view} - Charts Dot - Charts Dot: After Adding/Removing dots`);
             });
 
             it('CSS of preview tab contents', { tags: 'css' }, () => {
@@ -370,7 +379,7 @@ describe('Create item page: Charts - Dot - Preview contents in all views', () =>
                 utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
             });
 
-            it('When the user clicks on Reset button and confirms reset, then all the chart actions should be reverted and chart should be reverted to default state and control options should be in disabled state', () => {
+            it(`${view} - Charts Dot - When the user clicks on Reset button and confirms reset, then all the chart actions should be reverted and chart should be reverted to default state and control options should be in disabled state`, () => {
                 chartsDotPlotPage.steps.selectControlOptionPreviewTab(controlOptions[2]);
                 chartsDotPlotPage.steps.confirmReset();
                 chartsDotPlotPage.steps.verifyDotColumnIsLockedInPreviewTab({ point: 1, min: 1, interval: 0.25 });

package/cypress/e2e/applitools.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+	apiKey: 'XkObRjxHCyNlYPTHm1VLxIKoCXxY1111nW2RQr5IaUHHk110',
+	serverUrl: 'https://eyes.applitools.com',
+	browser: [
+		{ width: 1366, height: 609, name: 'chrome' },
+		{ width: 1280, height: 832, name: 'edgechromium' },
+		{ width: 1536, height: 960, name: 'safari' },
+		{ width: 1024, height: 1366, name: 'safari' }
+	],
+	//Configuration options: https://applitools.com/tutorials/sdks/cypress/configuration
+	ignoreDisplacements: true, // Set to false to detect mismatches in the displacements of the elements
+	failCypressOnDiff: false, // Set to true to fail the test when differences are detected
+	isDisabled: false // Set to true to disable Applitools
+};

package/cypress/pages/audioPlayerPage.js

@@ -788,14 +788,14 @@ const steps = {
         audioPlayerPage.audioOverviewInputField()
             .find('[data-widget="ngie_equation"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     verifyEquationInAudioOverviewPreviewTab: () => {
         audioPlayerPage.audioOverviewPreviewTab()
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     verifyLinkInAudioOverviewInputField: () => {
@@ -897,14 +897,14 @@ const steps = {
         audioPlayerPage.transcriptInputField()
             .find('[data-widget="ngie_equation"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     verifyEquationInTranscriptPreviewTab: () => {
         audioPlayerPage.transcriptContentPreviewTab()
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     verifyLinkInTranscriptInputField: () => {

package/cypress/pages/components/customSettingsSeparatorsComponent.ts

@@ -90,23 +90,6 @@ const steps = {
             .should('be.visible');
     },
 
-    /**
-     * @description type in the tolerance input field
-     * @param {string} text - text to be entered in the input field
-     */
-    enterTextInToleranceInputField: (text: string) => {
-        customSettingsSeparatorComponent.toleranceInputField()
-            .type(text);
-    },
-
-    /**
-     * @description clear the tolerance input field
-     */
-    clearTextInToleranceInputField: () => {
-        customSettingsSeparatorComponent.toleranceInputField()
-            .clear();
-    },
-
     /**
     * Verifies the selected state of decimal separator toggle options.
     * @param {string} option - The aria-label of the option to be verified.

package/cypress/pages/components/equationEditorFlyout.js

@@ -221,7 +221,7 @@ const steps = {
      * @description Select category and enter the equations in equation editor input field
      * @param {Object[]} responses - An array of objects containing the categoryName and symbolName
      * @param {string} responses[].categoryName Name of the category
-     * @param {string[]} responses[].symbolName Name of the symbol from the selected category
+     * @param {string} responses[].symbolName Name of the symbol from the selected category
      */
     enterEquation: (responses) => {
         responses.forEach(({ categoryName, symbolName }) => {

package/cypress/pages/components/equationEditorSectionCommonComponent.js

@@ -363,6 +363,7 @@ const tests = {
                 equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
             }
             utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBox(), 'visible');
+            cy.eyesCheckWindow('Equation Editor flyout in preview tab');
         });
 
         it('\'Done\'button should be displayed at the bottom of the flyout', () => {
@@ -430,11 +431,12 @@ const tests = {
             cy.checkAccessibility(equationEditorFlyout.dialogBox());
         });
 
-        it('Cancel button should be displayed in the flyout and when user clicks the \'Cancel\' button then the flyout should close', () => {
+        it(`${questionType} Cancel button should be displayed in the flyout and when user clicks the 'Cancel' button then the flyout should close`, () => {
             utilities.verifyElementVisibilityState(equationEditorFlyout.buttonCancel(), 'visible');
             utilities.verifyInnerText(equationEditorFlyout.buttonCancel(), 'Cancel');
             equationEditorFlyout.steps.clickOnEquationEditorCancelButton();
             utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBox(), 'notExist');
+            cy.eyesCheckWindow(`${questionType} Equation Editor flyout should not be displayed`);
         });
     },
 

package/cypress/pages/components/fillInTheGapsDragAndDropCommonComponents.js

@@ -11,7 +11,7 @@ const selectors = {
     specifyPointsForEachIncorrectDropzoneRadioButton: () => cy.get('input[aria-label*="Specify points for each incorrect"]'),
 
     correctAnswersNumeration: () => cy.get('[class*="__AnswerCell"] .answer-numeration-number-box'),
-    correctAnswersOptions: () => cy.get('[class*="__AnswerWrapper"]'),
+    correctAnswersOptions: () => cy.get('[class*="__AnswerWrapper"] .question-text-wrapper'),
     correctAnswersLabel: () => cy.get('.correct-answers-label'),
     tickIconWrapper: () => cy.get('.tick-icon-wrapper'),
     correctAnswerContainer: () => cy.get('.dnd-correct-answer-wrapper'),

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -248,10 +248,6 @@ const steps = {
         utilities.verifyElementDisabledClass(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), dropdownIndex));
     },
 
-    verifyVisibilityOfCorrectAnswerLabel: ()=>{
-        utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.correctAnswersLabel(), 'Correct answers');
-    },
-
     /**
      * @param {string[]} dropdownOptionsArray Array of dropdown options
      * @description Verify the options displayed in dropdown
@@ -756,7 +752,7 @@ const tests = {
         });
 
         //Note: the expand and close dropdown does not work hence selecting one option here, the error message appears
-        it('When user expands and collapses the dropdown without selecting any option, \'Error: Please set a correct answer.\' error message should be displayed', () => {
+        it('When user expands and collapses the dropdown without selecting any option, \'Error: Please set a correct answer.\' error message should not be displayed', () => {
             fillInTheGapsDropdownCommonComponent.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, 'Flower');
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
         });