itemengine-cypress-automation 1.0.293-e2eUpdates5thFeb-7e9457e.0 → 1.0.294-applitools-09785a6.0

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');
@@ -122,7 +131,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');
             });
 
@@ -171,8 +180,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

@@ -44,7 +44,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 +116,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 +141,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 +170,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 +201,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 +233,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 +265,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 +297,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 +330,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();
                 };

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: 'iv996xa7KXMrp8xQ8JwZ9TybQwOUVjzBDzDzoEyyr8z4110',
+	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/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/support/commands.js

@@ -5,6 +5,7 @@ import 'cypress-file-upload';
 import { iePage } from './migrationHelpers/verifyIeQuestionData';
 import { lrnPage } from './migrationHelpers/extractLrnQuestionData';
 require('cy-verify-downloads').addCustomCommand();
+import { apiKey, browser, serverUrl } from '../e2e/applitools.config';
 //import addContext from "mochawesome/addContext";
 
 const randomUser = (j, username, i) => ({
@@ -154,6 +155,16 @@ Cypress.Commands.add('learnosityLoaderWait', () => {
         .should('be.visible');
 });
 
+Cypress.Commands.add('startApplitools', () => {
+    cy.eyesOpen({
+        apiKey,
+        serverUrl,
+        browser,
+        appName: 'Applitools Demo - ILC',
+        testName: Cypress.currentTest.title,
+    });
+});
+
 Cypress.Commands.add('lazyLoadPreviewQuestions', (count, retries = 5) => {
     iePage.questionAndResourceWrapper()
         .then((elements) => {

package/cypress/support/e2e.js

@@ -4,6 +4,7 @@ import 'cypress-axe';
 import './helpers/cypressUtilities';
 import './helpers/accessibility';
 import './helpers/selectText';
+import '@applitools/eyes-cypress/commands'
 
 let windowConsoleError;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.293-e2eUpdates5thFeb-7e9457e.0",
+  "version": "1.0.294-applitools-09785a6.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -35,5 +35,8 @@
     "node-fetch": "^3.3.2",
     "react-uuid": "^2.0.0",
     "typescript": "^5.6.3"
+  },
+  "devDependencies": {
+    "@applitools/eyes-cypress": "^3.49.1"
   }
 }