itemengine-cypress-automation 1.0.68 → 1.0.70

package/cypress/e2e/ILC/UploadResponse/uplodResponsePreviewUploadedFileProperties.js

@@ -1,9 +1,7 @@
 import { uploadResponsePage, dialogBoxBase } from "../../../pages";
 import { commonComponents } from "../../../pages/components";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
-let fileTypes = ['CSV', 'Excel', 'GIF', 'JPG', 'PDF', 'PNG', 'Powerpoint', 'Publisher', 'RTF', 'TXT', 'Word', 'XPS', 'ZIP'];
-let fileTypesString = fileTypes.toString().replaceAll(',', ', ')
-let infoIconTooltipText = 'Supported file formats:  ' + fileTypesString + '.';
+import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 
 describe('Create question page - Upload Response: Preview', () => {
@@ -19,59 +17,39 @@ describe('Create question page - Upload Response: Preview', () => {
         });
 
         it('When user uploads any file without any virus, the system should scan the file for viruses and \'Scanning for viruses…\' message should be displayed along with a pre-loader', () => {
-            uploadResponsePage.inputTypeFile()
-                .attachFile('uploads/sample1.zip');
-            uploadResponsePage.uploadedFileWrapper()
-                .eq(0)
-                .within(() => {
-                    uploadResponsePage.virusErrorMessageWrapper()
-                        .verifyInnerText('Scanning for viruses...')
-                    uploadResponsePage.scanningForVirusPreLoader()
-                        .should('be.visible');
-                });
+            uploadResponsePage.steps.uploadFile('uploads/sample1.zip');
+            uploadResponsePage.steps.verifyScanningForVirusMessageAndPreLoader();
         });
 
         it('As long as the file is scanning for viruses, the users should not be able to download the file', () => {
-            uploadResponsePage.uploadedFileWrapper()
-                .eq(0)
-                .parents('.uploaded-document-wrapper')
-                .should('not.have.attr', 'href');
+            uploadResponsePage.steps.verifyInabilityOfFileDownloadWhenVirusScanningIsInProgress();
         });
 
         it('As soon as the scanning for viruses is complete, the preloader should disappear', () => {
-            uploadResponsePage.scanningForVirusPreLoader()
-                .should('not.be.visible');
+            utilities.verifyElementVisibilityState(uploadResponsePage.scanningForVirusPreLoader(), 'hidden');
         });
 
         it('When the user uploads a file containing virus \'Error: A virus was detected, please upload another file\' error message should be displayed inline with file name, the uploaded file count should increase after a virus file gets uploaded', () => {
-            uploadResponsePage.inputTypeFile()
-                .attachFile('uploads/sampleVirus.zip');
-            uploadResponsePage.uploadedFileWrapper()
-                .eq(1)
-                .within(() => {
-                    uploadResponsePage.virusErrorMessageWrapper()
-                        .verifyInnerText('Error: A virus was detected, please upload another file.')
-                        .and('be.visible');
-                });
+            uploadResponsePage.steps.uploadFile('uploads/sampleVirus.zip');
+            uploadResponsePage.steps.verifyVirusScanningErrorMessage();
             cy.log('checking if uploaded file count increases after a virus file gets uploaded')
-            uploadResponsePage.uploadedFileCount()
-                .verifyInnerText('2/15 File Limit');
+            uploadResponsePage.steps.verifyUploadedFileLimitCount(2, 15);
         });
 
         it('CSS of virus error message', { tags: 'css' }, () => {
             uploadResponsePage.uploadedFileWrapper()
                 .eq(1)
                 .within(() => {
-                    uploadResponsePage.virusErrorMessageWrapper()
-                        .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+                    utilities.verifyCSS(uploadResponsePage.virusErrorMessageWrapper(), {
+                        'color': css.color.errorText,
+                        'font-size': css.fontSize.small,
+                        'font-weight': css.fontWeight.regular
+                    });
                 });
         });
 
         it('User should not be able to download the file containing virus and the file name should be in disabled state', () => {
-            uploadResponsePage.uploadedFileWrapper()
-                .eq(1)
-                .parents('.uploaded-document-wrapper')
-                .should('not.have.attr', 'href');
+            uploadResponsePage.steps.verifyInabilityOfFileDownloadWhenVirusScanningIsInProgress();
         });
     });
 
@@ -85,43 +63,45 @@ describe('Create question page - Upload Response: Preview', () => {
         });
 
         it('On hovering over the \'Edit display text\' icon button, tooltip \'Edit display text\' should be displayed', () => {
-            uploadResponsePage.editDisplayTextIcon()
-                .realHover();
-            commonComponents.tooltipText()
-                .verifyInnerText('Edit display text');
+            utilities.hoverOverElement(uploadResponsePage.editDisplayTextIcon());
+            utilities.verifyInnerText(commonComponents.tooltipText(), 'Edit display text');
         });
 
         it('Clicking on the \'Edit display text\' icon button should open the \'Display Text\' popup with label \'Display Text\' and the input field in the popup should be prefilled with the name of the file and the name text should be selected by default and \'Save\' and \'Cancel\' buttons should be displayed', () => {
-            uploadResponsePage.editDisplayTextIcon()
-                .click();
-            dialogBoxBase.dialogBox()
-                .should('be.visible');
-            dialogBoxBase.dialogBoxTitle()
-                .verifyInnerText('Display text')
-            uploadResponsePage.editDisplayTextPopupInputField()
-                .should('have.value', 'image.png')
-                .parent()
-                .and('have.class', 'Mui-focused');
-            uploadResponsePage.acceptButton()
-                .verifyInnerText('Save')
-                .and('be.visible');
-            uploadResponsePage.rejectButton()
-                .verifyInnerText('Cancel')
-                .and('be.visible');
+            uploadResponsePage.steps.clickOnEditDisplayTextIcon();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Display text');
+            uploadResponsePage.steps.verifyEditDisplayTextPopupInputFieldAndSelectedText();
+            utilities.verifyInnerText(uploadResponsePage.buttonAccept(), 'Save');
+            utilities.verifyElementVisibilityState(dialogBoxBase.buttonAccept(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.buttonReject(), 'Cancel');
+            utilities.verifyElementVisibilityState(dialogBoxBase.buttonReject(), 'visible');
         });
 
         it('CSS of the \'Display Text\' popup', { tags: 'css' }, () => {
-            dialogBoxBase.dialogBoxTitle()
-                .verifyCSS(css.color.questionHeading, css.fontSize.heading, css.fontWeight.semibold);
-            uploadResponsePage.editDisplayTextPopupInputField()
-                .verifyCSS(css.color.text, css.fontSize.heading, css.fontWeight.regular)
-                .should('have.css', 'background-color', css.color.defaultBackground);
-            uploadResponsePage.acceptButton()
-                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.semibold)
-                .should('have.css', 'background-color', css.color.primaryBtnBg);
-            uploadResponsePage.rejectButton()
-                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
-                .should('have.css', 'background-color', css.color.transparent);
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.questionHeading,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(uploadResponsePage.editDisplayTextPopupInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
         });
 
         it('Accessibility of the \'Display Text\' popup', { tags: 'a11y' }, () => {
@@ -129,46 +109,30 @@ describe('Create question page - Upload Response: Preview', () => {
         });
 
         it('When the user removes the name of the file from the input field in the \'Display Text\' popup, then placeholder text \'Enter Display Text\' should be displayed', () => {
-            uploadResponsePage.editDisplayTextPopupInputField()
-                .clear()
-                .should('have.attr', 'placeholder', 'Enter display text')
-                .and('be.visible');
+            uploadResponsePage.steps.clearEditDisplayTextPopupInputField();
+            uploadResponsePage.steps.verifyEditDisplayTextPopupInputFieldPlaceholderText();
         });
 
         it('When the user clicks on \'Save\' button, a validation error text \'Display text is required.\' should be displayed below the input field', () => {
-            uploadResponsePage.acceptButton()
-                .click();
-            commonComponents.errorMessage()
-                .verifyInnerText('Error: Display text is required.')
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Display text is required.');
         });
 
         it('When the user enters text in Display Text input field i.e. updates the file name, then the validation text should disappear and when user clicks on \'Save\' button, the name of the file should get updated', () => {
-            uploadResponsePage.editDisplayTextPopupInputField()
-                .type('imageEdited.png')
-                .should('have.value', 'imageEdited.png');
-            commonComponents.errorMessage()
-                .should('not.exist');
-            uploadResponsePage.acceptButton()
-                .click();
-            uploadResponsePage.uploadedFileWrapper()
-                .eq(0)
-                .verifyInnerText('imageEdited.png')
+            uploadResponsePage.steps.enterTextInEditDisplayTextPopupInputField('imageEdited.png');
+            uploadResponsePage.steps.verifyTextInEditDisplayTextPopupInputField('imageEdited.png');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            uploadResponsePage.steps.verifyUploadedFileName('imageEdited.png', 0);
         });
 
         it('When the user updates the file name and clicks on the \'Cancel\' button, the latest changes should be reverted and the \'Display Text\' popup should close', () => {
             cy.log('clicking on edit display text button')
-            uploadResponsePage.editDisplayTextIcon()
-                .click();
-            uploadResponsePage.editDisplayTextPopupInputField()
-                .clear()
-                .type('imageEdited2.png')
-                .should('have.value', 'imageEdited2.png');
-            uploadResponsePage.rejectButton()
-                .click();
-            uploadResponsePage.uploadedFileWrapper()
-                .eq(0)
-                .verifyInnerText('imageEdited.png')
-                .and('not.have.text', 'imageEdited2.png');
+            uploadResponsePage.steps.clickOnEditDisplayTextIcon();
+            uploadResponsePage.steps.clearEditDisplayTextPopupInputField();
+            uploadResponsePage.steps.enterTextInEditDisplayTextPopupInputField('imageEdited2.png');
+            dialogBoxBase.steps.clickOnRejectButtonInDialogBox();
+            uploadResponsePage.steps.verifyUploadedFileName('imageEdited.png', 0);
         });
 
         it('If the user tries to download file after renaming, the file should get downloaded with the original name', () => {
@@ -186,23 +150,21 @@ describe('Create question page - Upload Response: Preview', () => {
         });
 
         it('On hovering over the \'Add file description\' icon button, tooltip \'Add file description\' should be displayed', () => {
-            uploadResponsePage.addFileDescriptionIcon()
-                .realHover();
-            commonComponents.tooltipText()
-                .should('have.text', 'Add file description');
+            utilities.hoverOverElement(uploadResponsePage.addFileDescriptionIcon());
+            utilities.verifyInnerText(commonComponents.tooltipText(), 'Add file description');
         });
 
         it('When the user clicks on the \'Add file description\' icon button, an input area should be displayed along with a placeholder text: \'Add file description\'', () => {
-            uploadResponsePage.addFileDescriptionIcon()
-                .click();
-            uploadResponsePage.addFileDescriptionInput()
-                .should('have.attr', 'placeholder', 'Add file description')
-                .and('be.visible');
+            uploadResponsePage.steps.clickOnAddFileDescriptionIcon();
+            uploadResponsePage.steps.verifyAddFileDescriptionInputFieldPlaceholderText();
         });
 
         it('CSS of \'Add file description\' input field', { tags: 'css' }, () => {
-            uploadResponsePage.addFileDescriptionInput()
-                .verifyCSS(css.color.optionsText, css.fontSize.default, css.fontWeight.regular);
+            utilities.verifyCSS(uploadResponsePage.addFileDescriptionInput(), {
+                'color': css.color.optionsText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
         });
 
         it('Accessibility of \'Add file description\' input field', { tags: 'a11y' }, () => {
@@ -210,16 +172,13 @@ describe('Create question page - Upload Response: Preview', () => {
         });
 
         it('User should be able to add description text for uploaded file', () => {
-            uploadResponsePage.addFileDescriptionInput()
-                .type('This is an image')
-                .should('have.value', 'This is an image');
+            uploadResponsePage.steps.enterTextInAddFileDescriptionInputField('This is an image');
+            uploadResponsePage.steps.verifyTextInAddFileDescriptionInputField('This is an image');
         });
 
         it('When user again clicks on the \'Add file description\' icon button, the \'Add file description\' input field section should get hidden', () => {
-            uploadResponsePage.addFileDescriptionIcon()
-                .click();
-            uploadResponsePage.addFileDescriptionInput()
-                .should('not.exist');
+            uploadResponsePage.steps.clickOnAddFileDescriptionIcon();
+            utilities.verifyElementVisibilityState(uploadResponsePage.addFileDescriptionInput(), 'notExist');
         });
     });
 
@@ -232,40 +191,40 @@ describe('Create question page - Upload Response: Preview', () => {
             uploadResponsePage.steps.fileUploadAndVerify(['image.png']);
         });
 
-        it('On hovering over the \'Delete\' icon button, tooltip \'Delete\' should be displayed', () => {
-            uploadResponsePage.deleteButton()
-                .realHover();
-            commonComponents.tooltipText()
-                .should('have.text', 'Delete');
+        it('On hovering over the \'Delete\' icon button, tooltip \'Delete\' should be displayed and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            utilities.hoverOverElement(uploadResponsePage.deleteButton())
+            utilities.verifyInnerText(commonComponents.tooltipText(), 'Delete');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
         });
 
         it('When the user clicks on the \'Delete\' icon button, then \'Delete file\' popup with label \'Delete file\' and message \'Are you sure you want to delete this file?\' should be displayed and \'Delete File\' and \'Cancel\' buttons should be displayed', () => {
-            uploadResponsePage.deleteButton()
-                .click();
-            dialogBoxBase.dialogBox()
-                .should('be.visible');
-            dialogBoxBase.dialogBoxTitle()
-                .verifyInnerText('Delete file')
-            dialogBoxBase.dialogBoxContent()
-                .should('contain', 'Are you sure you want to delete this file?');
-            uploadResponsePage.rejectButton()
-                .should('be.visible')
-                .verifyInnerText('Cancel');
-            uploadResponsePage.acceptButton()
-                .should('be.visible')
-                .verifyInnerText('Delete file');
+            uploadResponsePage.steps.deleteFile();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Delete file');
+            utilities.verifyInnerText(uploadResponsePage.deletePopupContent(), 'Are you sure you want to delete this file?');
+            utilities.verifyInnerText(dialogBoxBase.buttonReject(), 'Cancel');
+            utilities.verifyInnerText(dialogBoxBase.buttonAccept(), 'Delete file');
         });
 
         it('CSS of the \'Delete file\' popup', { tags: 'css' }, () => {
-            dialogBoxBase.dialogBoxTitle()
-                .find('span')
-                .verifyCSS(css.color.questionHeading, css.fontSize.heading, css.fontWeight.bold);
-            uploadResponsePage.rejectButton()
-                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
-                .should('have.css', 'background-color', css.color.transparent);
-            uploadResponsePage.acceptButton()
-                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.semibold)
-                .should('have.css', 'background-color', css.color.deleteBtn);
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle().find('span'), {
+                'color': css.color.questionHeading,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.deleteBtn
+            });
         });
 
         it('Accessibility of the \'Delete file\' popup', { tags: 'a11y' }, () => {
@@ -274,31 +233,18 @@ describe('Create question page - Upload Response: Preview', () => {
 
         it('When the user clicks on the \'Cancel\' button, then \'Delete File\' popup should close and file should not get deleted', () => {
             cy.log('Clicking on Delete icon for popup to appear')
-            uploadResponsePage.deleteButton()
-                .click();
+            uploadResponsePage.steps.deleteFile();
             cy.log('Clicking on \'Cancel\' button')
-            uploadResponsePage.rejectButton()
-                .click();
-            dialogBoxBase.dialogBox()
-                .should('not.exist');
-            uploadResponsePage.uploadedFileWrapper()
-                .eq(0)
-                .should('exist');
+            dialogBoxBase.steps.clickOnRejectButtonInDialogBox();
+            utilities.verifyElementVisibilityState(uploadResponsePage.uploadedFileWrapper(), 'exist');
         });
 
         it('When the user clicks on the \'Delete File\' button, the delete confirmation dialog box should disappear and the uploaded file should get deleted', () => {
-            uploadResponsePage.deleteButton()
-                .click();
-            uploadResponsePage.acceptButton()
-                .click();
-            dialogBoxBase.dialogBox()
-                .should('not.exist');
-            uploadResponsePage.uploadedFilesSectionWrapper()
-                .should('not.have.text', 'image.png')
-                .children()
-                .should('have.length', 0);
-            uploadResponsePage.uploadedFileCount()
-                .verifyInnerText('0/15 File Limit');
+            uploadResponsePage.steps.deleteFile();
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            uploadResponsePage.steps.verifyFileNotExistsInUploadedFileSection('image.png');
+            utilities.verifyElementVisibilityState(uploadResponsePage.uploadedFileWrapper(), 'notExist');
+            uploadResponsePage.steps.verifyUploadedFileLimitCount(0, 15);
         });
     });
 });

package/cypress/e2e/ILC/VideoResponse/videoResponseAdditionalSettings.js

@@ -2,7 +2,7 @@ import { videoResponsePage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
-const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizeDropdownOptions = ['Tiny', 'Small', 'Default', 'Normal', 'Big', 'Huge'];
 const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
 
 describe('Create item page - Video response: Additional settings', () => {

package/cypress/e2e/ILC/VideoResponse/videoResponseAdditionalSettingsBasic.js

@@ -2,8 +2,7 @@ import { videoResponsePage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
-const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
-const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+const fontSizes = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
 
 describe('Create item page - Video response: Additional settings', () => {
     before(() => {
@@ -62,17 +61,17 @@ describe('Create item page - Video response: Additional settings', () => {
             videoResponsePage.steps.expandAdditonalSettings();
         });
 
-        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
-            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview content should be changed to ${option} in the preview tab`, () => {
-                videoResponsePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
-                utilities.verifyInnerText(videoResponsePage.fontSizeDropdown(), `${option}`)
-                videoResponsePage.steps.switchToPreviewTab();
-                utilities.verifyCSS(videoResponsePage.questionInstructionsText(), {
-                    'font-size': fontSizes[fontsIndex]
-                });
-                videoResponsePage.steps.switchToEditTab();
+        Object.keys(fontSizes).forEach((option, fontsIndex) => {
+            it(`When the user selects '${option}' option from the Font Size dropdown, then font size of the preview content should be changed to ${fontSizes[option]} in the preview tab`, () => {
+              videoResponsePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+              utilities.verifyInnerText(videoResponsePage.fontSizeDropdown(), option);
+              videoResponsePage.steps.switchToPreviewTab();
+              utilities.verifyCSS(videoResponsePage.questionInstructionsText(), {
+                'font-size': fontSizes[option]
+              });
+              videoResponsePage.steps.switchToEditTab();
             });
-        });
+          });
     });
 
     describe('Video response: Details section', () => {

package/cypress/e2e/ILC/VideoResponse/videoResponsePreviewTab.js

@@ -218,7 +218,8 @@ describe('Create item page - Video response: Preview tab - default state, record
             videoResponsePage.steps.stopAndVerifySavingAndRecordingLength();
         });
 
-        it('CSS of \'Preview\' section if recording is saved', { tags: 'css' }, () => {
+        //Adding skip here since unable to check the recording status text (Disappears too fast)
+        it.skip('CSS of \'Preview\' section if recording is saved', { tags: 'css' }, () => {
             videoResponsePage.steps.resetQuestionPreview();
             videoResponsePage.steps.recordAndSaveVideo(3000);
             utilities.verifyCSS(videoResponsePage.recordingStatusText(), {
@@ -448,7 +449,7 @@ describe('Create item page - Video response: Preview tab - default state, record
 
         it('CSS of volume control section', { tags: 'css' }, () => {
             utilities.verifyCSS(videoResponsePage.volumeControlSlider(), {
-                'background': `${css.color.transparent} linear-gradient(90deg, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 100%, ${css.color.progressBarRemainingFill} 0%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0% / auto padding-box border-box`
+                'background': `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 100%, ${css.color.progressBarRemainingFill} 0%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0% / auto padding-box border-box`
             });
             utilities.verifyCSS(videoResponsePage.volumeControlButton().find('g path'), {
                 'fill': css.color.secondaryBtnBg,
@@ -468,7 +469,7 @@ describe('Create item page - Video response: Preview tab - default state, record
 
         it('CSS of volume control section in muted state', { tags: 'css' }, () => {
             utilities.verifyCSS(videoResponsePage.volumeControlSlider(), {
-                'background': `${css.color.transparent} linear-gradient(90deg, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarRemainingFill} -100%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0% / auto padding-box border-box`
+                'background': `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarRemainingFill} -100%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0% / auto padding-box border-box`
             });
             utilities.verifyCSS(videoResponsePage.volumeControlButton().find('g g path'), {
                 'fill': css.color.secondaryBtnBg,
@@ -517,12 +518,12 @@ describe('Create item page - Video response: Preview tab - default state, record
             utilities.verifyCSS(videoResponsePage.playbackSpeedOption().eq(0), {
                 'color': css.color.liText,
                 'background-color': css.color.liTextSelectedBg,
-                'font-size': css.fontSize.normal
+                'font-size': css.fontSize.small
             });
             utilities.verifyCSS(videoResponsePage.playbackSpeedOption().eq(1), {
                 'color': css.color.liText,
                 'background-color': css.color.transparent,
-                'font-size': css.fontSize.normal
+                'font-size': css.fontSize.small
             });
         });
 

package/cypress/fixtures/theme/ilc.json

@@ -84,7 +84,8 @@
         "incorrectAnswerHighlightRegion": "rgba(209, 51, 51, 0.4)",
         "fileUploadProgressBarFill": "rgb(74, 147, 224)",
         "responseContainerPointer": "rgba(0, 0, 46, 0.4)",
-        "activeHighlightBorder": "rgb(41, 0, 128)"
+        "activeHighlightBorder": "rgb(41, 0, 128)",
+        "hoverHighlightBorder": "rgb(66, 0, 204)"
     },
     "fontSize": {
         "extraSmall": "10px",

package/cypress/pages/audioPlayerPage.js

@@ -34,10 +34,10 @@ const selectors = {
     customizeUIControlAccordion: () => cy.get('.ngie-accordion-summary[role="button"]').eq(0),
     advancedPlayerSettingsAccordion: () => cy.get('.ngie-accordion-summary[role="button"]').eq(1),
     customizeControlPlayButton: () => cy.get('[data-ngie-testid="play-toggle-button"]'),
-    customizeControlButtonLabel: () => cy.get('.audio-response-selection-panel-details').eq(0).find('.customized_button_label'),
+    customizeControlButtonLabel: () => cy.get('[data-ngie-testid="play-toggle-button"]').find('.ngie-toggle-button-label'),
     customizeControlPauseButton: () => cy.get('[data-ngie-testid="pause-toggle-button"]'),
     customizeControlSeekButton: () => cy.get('[data-ngie-testid="seek-toggle-button"]'),
-    advancedPlayerButtonLabel: () => cy.get('.audio-response-selection-panel-details').eq(1).find('.customized_button_label'),
+    advancedPlayerButtonLabel: () => cy.get('[data-ngie-testid="timer-toggle-button"]').find('.ngie-toggle-button-label'),
     advancedPlayerTimerButton: () => cy.get('[data-ngie-testid="timer-toggle-button"]'),
     advancedPlayerProgressBarButton: () => cy.get('[data-ngie-testid="progress-bar-toggle-button"]'),
     advancedPlayerVolumeControlButton: () => cy.get('[data-ngie-testid="volume-control-toggle-button"]'),

package/cypress/pages/components/additionalSettingsPanel.js

@@ -11,11 +11,13 @@ const selectors = {
     additionalSettingsAcknowledgementsLabel: () => cy.get('.additional-settings-detail-wrapper .additional-settings-label').eq(2),
     additionalSettingsTeacherGuidelinesInputField: () => cy.get('[title="Teacher Scoring Guidelines"]'),
     additionalSettingsSampleAnswerInputField: () => cy.get('[title="Sample Answer"]'),
-    additionalSettingsAcknowledgementsInputField: () => cy.get('[title="Acknowledgements"]'),
+    additionalSettingsAcknowledgementsInputField: () => cy.get('[title="acknowledgements & reference"]'),
     //Font-size dropdown
     fontSizeLabel: () => cy.get('#Font-Size-dropdown-label'),
     fontSizeDropdown: () => cy.get('#Font-Size-select'),
-    fontSizeListOptions: (optionIndex) => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"]').eq(optionIndex)
+    fontSizeListOptions: (optionIndex) => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"]').eq(optionIndex),
+    fontSizeListOptionLabels: () => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"] .dropdown-label-text'),
+    fontSizesLabels: () => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"] .dropdown-post-label-text'),
 }
 
 const steps = {
@@ -31,6 +33,33 @@ const steps = {
             .click();
         additionalSettingsPanel.fontSizeListOptions(dropdownOptionIndex)
             .click();
+    },
+
+    enterTextInTeacherGuidelinesInputField: (teacherGuidelinesText) => {
+        additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField()
+            .click()
+            .type(teacherGuidelinesText)
+            .blur();
+        additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField()
+            .should('have.text', teacherGuidelinesText);
+    },
+
+    enterTextInSampleAnswerInputField: (sampleAnswer) => {
+        additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
+            .click()
+            .type(sampleAnswer)
+            .blur();
+        additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
+            .should('have.text', sampleAnswer);
+    },
+
+    enterTextInAcknowledgementsInputField: (acknowledgements) => {
+        additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
+            .click()
+            .type(acknowledgements)
+            .blur();
+        additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
+            .should('have.text', acknowledgements);
     }
 }
 
@@ -62,7 +91,7 @@ const tests = {
                 .should('have.text', 'Teacher scoring guidelines');
         });
 
-        it('\'Sample Answer\' label and input field should be displayed and user should be able to enter \'Sample Answer\'', () => {
+        it('\'Sample answer\' label and input field should be displayed and user should be able to enter \'Sample answer\'', () => {
             additionalSettingsPanel.additionalSettingsSampleAnswerLabel()
                 .verifyInnerText('Sample answer');
             additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
@@ -70,9 +99,9 @@ const tests = {
                 .should('have.text', 'Sample Answer');
         });
 
-        it('\'Acknowledgements\' label and input field should be displayed and user should be able to enter \'Acknowledgements\'', () => {
+        it('\'Acknowledgements & reference\' label and input field should be displayed and user should be able to enter \'Acknowledgements\'', () => {
             additionalSettingsPanel.additionalSettingsAcknowledgementsLabel()
-                .should('have.text', 'Acknowledgements');
+                .verifyInnerText('Acknowledgements & reference');
             additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
                 .type('Acknowledgements')
                 .should('have.text', 'Acknowledgements');
@@ -110,9 +139,8 @@ const tests = {
     },
 
     verifyFontSizeSectionContents: () => {
-        const fontsizes = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
-
-        it('CSS of \'Font Size\' dropdown', { tags: 'css' }, () => {
+        const fontSizes = { 'Tiny': '12 px', 'Small': '14 px', 'Default': '16 px', 'Normal': '18 px', 'Big': '22 px', 'Huge': '26 px' };
+        it('CSS of \'Font Size\' dropdown - default state', { tags: 'css' }, () => {
             additionalSettingsPanel.fontSizeLabel()
                 .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
             additionalSettingsPanel.fontSizeDropdown()
@@ -128,24 +156,28 @@ const tests = {
                 .verifyInnerText('Default');
         });
 
-        it('Clicking on Font Size dropdown should open a list of 6 options - Default, Small, Normal, Large, Extra large, Huge', () => {
+        it(`Clicking on \'Font size\' dropdown should open a list of ${Object.keys(fontSizes).length} options - ${Object.keys(fontSizes).join(',')}`, () => {
             additionalSettingsPanel.fontSizeDropdown()
                 .realClick();
             additionalSettingsPanel.fontSizeListOptions(0)
                 .should('be.visible');
-            fontsizes.forEach((index, count) => {
-                additionalSettingsPanel.fontSizeListOptions(count)
-                    .verifyInnerText(index);
+            Object.keys(fontSizes).forEach((size, index) => {
+                additionalSettingsPanel.fontSizeListOptionLabels()
+                    .eq(index)
+                    .verifyInnerText(size);
+                additionalSettingsPanel.fontSizesLabels()
+                    .eq(index)
+                    .verifyInnerText(fontSizes[size]);
             });
             cy.get('body')
                 .click();
         });
 
-        it('CSS of Font size dropdown in Active state', { tags: 'css' }, () => {
+        it('CSS of Font size dropdown - active state', { tags: 'css' }, () => {
             cy.log('Pre step: Clicking on Font size dropdown')
             additionalSettingsPanel.fontSizeDropdown()
                 .click();
-            additionalSettingsPanel.fontSizeListOptions(0)
+            additionalSettingsPanel.fontSizeListOptions(2)
                 .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
                 .should('have.css', 'background-color', css.color.liTextSelectedBg);
             additionalSettingsPanel.fontSizeListOptions(1)