itemengine-cypress-automation 1.0.306 → 1.0.308

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' }, () => {
@@ -162,7 +171,7 @@ describe('Create item page - Upload response : Preview contents', () => {
                 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/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/applitools.config.js

@@ -0,0 +1,12 @@
+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
+	APPLITOOLS_IS_DISABLED: true
+};

package/cypress/pages/components/equationEditorSectionCommonComponent.js

@@ -312,6 +312,7 @@ const tests = {
                 equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
             }
             utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBox(), 'visible');
+            cy.eyesCheckWindow('Equation Editor flyout in preview tab');
         });
 
         it(`In the equation editor flyout the ${allCategories[0].displayName} should be selected by default and the Equation editor input field should be prefilled with the added equation`, () => {

package/cypress/support/commands.js

@@ -5,7 +5,9 @@ import 'cypress-file-upload';
 import { iePage } from './migrationHelpers/verifyIeQuestionData';
 import { lrnPage } from './migrationHelpers/extractLrnQuestionData';
 require('cy-verify-downloads').addCustomCommand();
-//import addContext from "mochawesome/addContext";
+import { apiKey, browser, serverUrl } from '../e2e/applitools.config';
+import * as applitoolsConfig from '../e2e/applitools.config';
+import '@applitools/eyes-cypress/commands';
 
 const randomUser = (j, username, i) => ({
     id: uuidv4(),
@@ -173,4 +175,15 @@ Cypress.Commands.add('lazyLoadPreviewQuestions', (count, retries = 5) => {
     iePage.barsPreloader()
         .should('not.exist');
     cy.learnosityLoaderWait();
+});
+
+Cypress.Commands.add('startApplitools', () => {
+    cy.eyesOpen({
+        apiKey,
+        serverUrl,
+        browser,
+        appName: 'Applitools Demo - ILC',
+        testName: Cypress.currentTest.title,
+        isDisabled: applitoolsConfig.APPLITOOLS_IS_DISABLED
+    });
 });

package/cypress.config.js

@@ -62,3 +62,5 @@ module.exports = defineConfig({
     testIsolation: false,
   },
 });
+
+require('@applitools/eyes-cypress')(module);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.306",
+  "version": "1.0.308",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -45,5 +45,8 @@
     "node-fetch": "^3.3.2",
     "react-uuid": "^2.0.0",
     "typescript": "^5.6.3"
+  },
+  "devDependencies": {
+    "@applitools/eyes-cypress": "^3.47.0"
   }
 }