itemengine-cypress-automation 1.0.327-IEI-5098-RCA-for-FIG-text-and-short-text-7bbafe1.0 → 1.0.328-UpdateRepo28thFeb-24a9148.0

package/cypress/e2e/ILC/TextSelection/ScoringGeneric/basicScoringForAllTextSelectionTypes.smoke.js

@@ -250,7 +250,7 @@ describe('Create Item page - Text selection - Basic scoring for all text selecti
             textSelectionPage.steps.switchToPreviewTab();
         });
 
-        it('When the user selects \'Grading\' view without attempting the question, then correct/incorrect answer should not be displayed in the preview tab and correct answer section should be displayed with correct answers', () => {
+        it('When the user selects "Grading" view without attempting the question, then correct/incorrect answer should not be displayed in the preview tab and correct answer section should be displayed with correct answers', () => {
             textSelectionPage.steps.verifyPreviewScore(0, 20);
             textSelectionPage.steps.switchToGradingView();
             textSelectionPage.steps.verifyCorrectIncorrectIconForOptionNotExist(sentenceTextArray[0]);
@@ -260,7 +260,7 @@ describe('Create Item page - Text selection - Basic scoring for all text selecti
             textSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
         });
 
-        it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers should be displayed', () => {
+        it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to "Grading" view, incorrect icons should be displayed besides all incorrect responses, a status message with text "Your answer is incorrect" and correct answer section with all correct answers should be displayed', () => {
             textSelectionPage.steps.resetQuestionPreview();
             textSelectionPage.steps.selectOptionInPreviewTab(sentenceTextArray[2]);
             textSelectionPage.steps.selectOptionInPreviewTab(sentenceTextArray[3]);
@@ -274,7 +274,7 @@ describe('Create Item page - Text selection - Basic scoring for all text selecti
             textSelectionPage.steps.verifyCorrectIconForOptionCorrectAnswerSection(sentenceTextArray[0]);
             textSelectionPage.steps.verifyCorrectIconForOptionCorrectAnswerSection(sentenceTextArray[1]);
             textSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            /*cy.log('When user clicks on Check answer button after attempting the question incorrectly, then incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            /*cy.log('When user clicks on Check answer button after attempting the question incorrectly, then incorrect icons should be displayed besides all incorrect responses, a status message with text "Your answer is incorrect" should be displayed and correct answer section should not be displayed')
             textSelectionPage.steps.checkAnswer();
             textSelectionPage.steps.verifyCorrectIncorrectIconForOptionNotExist(sentenceTextArray[0]);
             textSelectionPage.steps.verifyCorrectIncorrectIconForOptionNotExist(sentenceTextArray[1]);
@@ -284,7 +284,7 @@ describe('Create Item page - Text selection - Basic scoring for all text selecti
             textSelectionPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
-        it('When the user attempts the question partially correct with some correct and some incorrect options, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer response, incorrect icon should be displayed besides the incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers should be displayed', () => {
+        it('When the user attempts the question partially correct with some correct and some incorrect options, then the user should be awarded 0 points and on switching to "Grading" view, correct icon should be displayed besides the correct answer response, incorrect icon should be displayed besides the incorrect answer response, a status message with text "Your answer is incorrect" and correct answer section with all correct answers should be displayed', () => {
             textSelectionPage.steps.resetQuestionPreview();
             textSelectionPage.steps.selectOptionInPreviewTab(sentenceTextArray[0]);
             textSelectionPage.steps.selectOptionInPreviewTab(sentenceTextArray[2]);
@@ -298,7 +298,7 @@ describe('Create Item page - Text selection - Basic scoring for all text selecti
             textSelectionPage.steps.verifyCorrectIconForOptionCorrectAnswerSection(sentenceTextArray[0]);
             textSelectionPage.steps.verifyCorrectIconForOptionCorrectAnswerSection(sentenceTextArray[1]);
             textSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            /*cy.log('When user clicks on Check answer button after he attempts the question partially correct with some correct and some incorrect options, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            /*cy.log('When user clicks on Check answer button after he attempts the question partially correct with some correct and some incorrect options, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text "Your answer is incorrect" should be displayed and correct answer section should not be displayed')
             textSelectionPage.steps.checkAnswer();
             textSelectionPage.steps.verifyCorrectIconForOption(sentenceTextArray[0]);
             textSelectionPage.steps.verifyCorrectIncorrectIconForOptionNotExist(sentenceTextArray[1]);
@@ -308,7 +308,7 @@ describe('Create Item page - Text selection - Basic scoring for all text selecti
             textSelectionPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
-        it('When the user attempts the question correctly then the user should be awarded full points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' should be displayed and correct answer section should not be displayed', () => {
+        it('When the user attempts the question correctly then the user should be awarded full points and on switching to "Grading" view, correct icon should be displayed besides the correct answer responses, a status message with text "Your answer is correct" should be displayed and correct answer section should not be displayed', () => {
             textSelectionPage.steps.resetQuestionPreview();
             textSelectionPage.steps.selectOptionInPreviewTab(sentenceTextArray[0]);
             textSelectionPage.steps.selectOptionInPreviewTab(sentenceTextArray[1]);
@@ -321,7 +321,7 @@ describe('Create Item page - Text selection - Basic scoring for all text selecti
             textSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
             textSelectionPage.steps.verifyCorrectAnswerSectionNotExists();
             textSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            /*cy.log('When user clicks on Check answer button after he attempts the question correctly, then correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' should be displayed and correct answer section should not be displayed')
+            /*cy.log('When user clicks on Check answer button after he attempts the question correctly, then correct icon should be displayed besides the correct answer responses, a status message with text "Your answer is correct" should be displayed and correct answer section should not be displayed')
             textSelectionPage.steps.checkAnswer();
             textSelectionPage.steps.verifyCorrectIconForOption(sentenceTextArray[0]);
             textSelectionPage.steps.verifyCorrectIconForOption(sentenceTextArray[1]);

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

@@ -82,12 +82,12 @@ describe('Create item page - Text selection : Preview contents', () => {
                 });
             });
 
-            it('The text which is not available as option should not be interactive in preview tab', () => {
+            it(`Text selection - ${view} - The text which is not available as option should not be interactive in preview tab`, () => {
                 textSelectionPage.steps.verifyNonOptionTextIsNotInteractiveInPreviewTab(paragraphTextArray[3]);
             });
 
             if (view !== 'Grading view' && view !== 'Correct answer view') {
-                it('The selected options in specify possible options section should be displayed and by default all options should not be selected', () => {
+                it(`The selected options in specify possible options section should be displayed and by default all options should not be selected`, () => {
                     for (let index = 0; index < 3; index++) {
                         utilities.verifyInnerText(utilities.getNthElement(textSelectionPage.optionPreviewTab(), index), paragraphTextArray[index]);
                         utilities.verifyElementVisibilityState(utilities.getNthElement(textSelectionPage.optionPreviewTab(), index), 'visible');
@@ -96,34 +96,34 @@ describe('Create item page - Text selection : Preview contents', () => {
                     utilities.verifyElementCount(textSelectionPage.optionPreviewTab(), 3);
                 });
 
-                it('When user hovers on the available options, then those options should be displayed in hover state highlight', () => {
+                it(`When user hovers on the available options, then those options should be displayed in hover state highlight`, () => {
                     for (let index = 0; index < 3; index++) {
                         textSelectionPage.steps.verifyHoverStateOfOptionInPreviewTab(paragraphTextArray[index], "blue");
                     };
                 });
 
-                it('When user selects an option, then that option should be displayed in selected state', () => {
+                it(`When user selects an option, then that option should be displayed in selected state`, () => {
                     textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
                     textSelectionPage.steps.verifySelectedStateOptionInPreviewTab(paragraphTextArray[0], "blue");
                     textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[1]);
                     textSelectionPage.steps.verifySelectedStateOptionInPreviewTab(paragraphTextArray[1], "blue");
                 });
 
-                it('When user clicks on a selected option, then that option should be deselected', () => {
+                it(`When user clicks on a selected option, then that option should be deselected`, () => {
                     textSelectionPage.steps.deselectOptionInPreviewTab(paragraphTextArray[0]);
                     textSelectionPage.steps.verifyStandardStateOptionInPreviewTab(paragraphTextArray[0]);
                 });
             } else if (view === 'Grading view') {
-                it('The question text should be displayed with the selected correct options and status message \' Your answer is incorrect\' should be displayed', () => {
+                it(`The question text should be displayed with the selected correct options and status message 'Your answer is incorrect' should be displayed`, () => {
                     textSelectionPage.steps.verifyCorrectIconForOption(paragraphTextArray[1]);
                     textSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
                 });
 
-                it('The submitted answer options should not be editable', () => {
+                it(`The submitted answer options should not be editable`, () => {
                     textSelectionPage.steps.verifyAnswerSectionNotEditableInPreviewTab();
                 });
             } else {
-                it('The question text should be displayed with the selected correct options', () => {
+                it(`The question text should be displayed with the selected correct options`, () => {
                     for (let index = 0; index < 2; index++) {
                         textSelectionPage.steps.verifyCorrectIconForOption(paragraphTextArray[index]);
                     };

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

@@ -116,8 +116,7 @@ describe('Create question page - Upload Response: Question Instructions, Support
         it('When the user deselects all the file types from the \'Supported file types\' accordion menu, then a validation text \'Error: Please select a file type.\' should not be displayed', () => {
             cy.log('Deselecting all file types to get error message.');
             uploadResponsePage.steps.uncheckDefaultSelectedFileTypes();
-            utilities.verifyInnerText(uploadResponsePage.errorMessage(), 'Error: Please select a file type.');
-            utilities.verifyElementVisibilityState(uploadResponsePage.errorMessage(), 'visible');
+            utilities.verifyElementVisibilityState(uploadResponsePage.errorMessage(), 'notExist');
         });
 
         uploadResponsePage.tests.verifyErrorMessageCSSAndA11y();
@@ -226,7 +225,7 @@ describe('Create question page - Upload Response: Question Instructions, Support
 
         it('User should be able to upload maximum 15 files and count in the file limit section should update accordingly', () => {
             uploadResponsePage.steps.fileUploadAndVerify(['sample.csv', 'sample.xlsx', 'sample.gif', 'sample.jpg', 'sample.pdf', 'image.png', 'sample.ppt', 'sample.pub', 'sample.rtf', 'sample.txt', 'sample.doc', 'sample.xps', 'sample.zip', 'sample1.jpg', 'sample2.jpg']);
-            utilities.verifyInnerText(uploadResponsePage.uploadedFileCount(), '15/15 File Limit');
+            uploadResponsePage.steps.verifyUploadedFileLimitCount(15, 15);
         });
 
         it('When user updates \'Maximum number of files\' input field , then file limit should be updated in preview tab', () => {

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/editTabBasicSection.js

@@ -117,7 +117,6 @@ describe('Create item page - Video response: Question instructions, Maximum reco
         });
     });
 
-    //Failing due to https://redmine.zeuslearning.com/issues/573549
     describe('Maximum recording duration: Edit tab', () => {
         abortEarlySetup();
         before(() => {
@@ -162,8 +161,7 @@ describe('Create item page - Video response: Question instructions, Maximum reco
 
         it('When the user focuses in and out of the empty \'Maximum recording duration\' input field, \'Error: Maximum recording duration is required.\' validation error should be displayed below the \'Maximum recording duration\' input field', () => {
             videoResponsePage.steps.clearMaximumRecordingDurationInputField();
-            //Failing due to https://redmine.zeuslearning.com/issues/573549
-            // utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Maximum recording duration is required.');
+            utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Maximum recording duration is required.');
             utilities.verifyElementVisibilityState(videoResponsePage.errorMessage(), 'visible');
         });
 
@@ -208,8 +206,9 @@ describe('Create item page - Video response: Question instructions, Maximum reco
 
         it('When the user focuses in and out of the empty \'Maximum recording duration\' input field, \'Error: Maximum recording duration is required.\' validation error should be displayed below the \'Maximum recording duration\' input field', () => {
             videoResponsePage.steps.clearMaximumRecordingDurationInputField();
-            //Failing due to https://redmine.zeuslearning.com/issues/573549
-            // utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Maximum recording duration is required.');
+            videoResponsePage.steps.toggleMaximumRecordingDurationInputField('Secs');
+            videoResponsePage.steps.clearMaximumRecordingDurationInputField();
+            utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Maximum recording duration is required.');
             utilities.verifyElementVisibilityState(videoResponsePage.errorMessage(), 'visible');
         });
 
@@ -221,7 +220,7 @@ describe('Create item page - Video response: Question instructions, Maximum reco
         });
 
         it('When the user has set \'Maximum recording duration\' to \'0\' (zero), a validation message \'Error: Value must be greater than 0 mins.\' should be displayed', () => {
-            videoResponsePage.steps.setMaximumRecordingDuration(0);
+            videoResponsePage.steps.setMaximumRecordingDurationNew(0);
             videoResponsePage.steps.verifyMaximumRecordingDuration(0);
             // Uncomment once https://redmine.zeuslearning.com/issues/583618 is resolved
             // utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Value must be greater than 0 mins.');
@@ -233,6 +232,7 @@ describe('Create item page - Video response: Question instructions, Maximum reco
         it('When the user updates the \'Maximum recording duration\' value, then the validation message \'Error: Value must be greater than 0 mins.\' should disappear', () => {
             videoResponsePage.steps.setMaximumRecordingDuration(5);
             videoResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+            videoResponsePage.steps.toggleMaximumRecordingDurationInputField('Mins');
         });
 
         it('When user tries to add a value greater than 10 it should be automatically set back to 10 and should not allow to add greater than set value', () => {

package/cypress/pages/components/autoScoredScoringPreviewTab.js

@@ -153,7 +153,6 @@ const steps = {
 }
 
 const tests = {
-    //Note: need to fix this function once save as you go is available for all question types
     verifyPreviewModesAndScoreWhenPointsAndCorrectAnswersIsNotSet: () => {
         it('When the user has not set correct answer option(s) and alloted points, \'Student view\' radio button should be checked, \'Grading view\' button should not be checked, 0 points should be displayed and no correct or incorrect icons should be displayed in the preview tab', () => {
             utilities.verifyInnerText(autoScoredScoringPreviewTab.studentViewRadioButtonLabel(), 'Student view');

package/cypress/pages/components/barAndLineChartComponent.js

@@ -37,7 +37,7 @@ const selectors = {
     xAxisCheckbox: () => cy.get('[data-ngie-testid="x-axis-checkbox"] input'),
     xAxisLabelSelectChartType: () => cy.get('[data-ngie-testid="x-axis-checkbox"] .MuiFormControlLabel-label'),
     gridCellSelectChartType: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .grid-cell'),
-    gridSnappingLabel: () => cy.get('[aria-labelledby="grid snapping"]'),
+    gridSnappingLabel: () => cy.get('[for="grid snapping"]'),
     gridSnappingInputField: () => cy.get('input[id="grid snapping"]'),
 
     //Specify correct answer section

package/cypress/pages/components/ckEditorInsertTableComponent.js

@@ -756,4 +756,4 @@ const steps = {
 export const ckEditorInsertTableComponent = {
     ...selectors,
     steps
-}
+}

package/cypress/pages/components/ckEditorToolbar.js

@@ -81,4 +81,4 @@ const steps = {
 export const ckEditorToolbar = {
     ...selectors,
     steps
-}
+}

package/cypress/pages/components/equationEditorSectionCommonComponent.js

@@ -312,7 +312,6 @@ 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`, () => {
@@ -364,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', () => {
@@ -431,7 +431,7 @@ 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();

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -44,6 +44,7 @@ const selectors = {
 
     //Preview tab
     dropdownWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-dropdown-wrapper'),
+    dropdownPreviewWrapper: () => cy.get('[class*="AnswerStatusIconAndResponseWrapper"]'),
     dropdownPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-haspopup="listbox"]'),
     dropdownPlaceholderText: () => cy.get('.cloze-with-dropdown-placeholder'),
     dropdownTextLabel: () => cy.get('.dropdown-label-text'),
@@ -734,6 +735,16 @@ const steps = {
                     });
             }
         });
+    },
+
+    checkIfDropdownMenuOverflowForAutoScale: () => {
+        fillInTheGapsDropdownCommonComponent.dropdownPreviewWrapper()
+            .should('exist')
+            .then(($dropdown) => {
+                const scrollWidth = $dropdown[0].scrollWidth;
+                const clientWidth = $dropdown[0].clientWidth;
+                expect(scrollWidth).to.not.be.greaterThan(clientWidth);
+            });
     }
 }
 

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -8,6 +8,7 @@ import { autoScoredSpecifyCorrectAnswerSection } from "./autoScoredSpecifyCorrec
 import { colorPopupComponent } from "./colorPopupComponent";
 import { commonComponents } from "./commonComponents";
 import { createQuestionBasePage } from "./createQuestionBasePage";
+import { scoringSectionBaseEditTab } from "./scoringSectionBaseEditTab";
 import { specifyRowsAndColumnsComponent } from "./specifyRowsAndColumnsComponent";
 const css = Cypress.env('css');
 
@@ -105,7 +106,7 @@ const selectors = {
     //Style and layout customization
     layoutLabel: () => cy.get('[class*="Layoutstyles__SectionWrapper"]'),
     rowSpacingDropdownLabel: () => cy.get('#Row-spacing-dropdown-label'),
-    rowSpacingDropdown: () => cy.get('[aria-labelledby*="Row-spacing-dropdown-label"]').eq(0),
+    rowSpacingDropdown: () => cy.get('[aria-labelledby*="Row-spacing-select"]').eq(0),
     rowSpacingDropdownOptions: (ariaLabel = null) => {
         if (ariaLabel) {
             return cy.get(`[aria-labelledby*="Row-spacing-dropdown-label"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
@@ -114,7 +115,7 @@ const selectors = {
         }
     },
     columnSpacingDropdownLabel: () => cy.get('#Column-spacing-dropdown-label'),
-    columnSpacingDropdown: () => cy.get('[aria-labelledby*="Column-spacing-dropdown-label"]'),
+    columnSpacingDropdown: () => cy.get('[aria-labelledby*="Column-spacing-select"]'),
     columnSpacingDropdownOptions: (ariaLabel = null) => {
         if (ariaLabel) {
             return cy.get(`[aria-labelledby*="Column-spacing-dropdown-label"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
@@ -2052,7 +2053,6 @@ const steps = {
             .within(() => {
                 utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'notExist');
             });
-
         scoringSectionBaseEditTab.pointsWrapper()
             .within(() => {
                 utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'notExist');
@@ -2071,7 +2071,6 @@ const steps = {
 }
 
 const tests = {
-    //Note: need to remove this as change the global function once save as you go is available for all question types
     verifyPreviewModesAndScoreWhenPointsAndCorrectAnswersIsNotSet: () => {
         it('When the user has not set correct answer option(s) and alloted points, \'Student view\' radio button should be checked, \'Grading view\' button should not be checked, 0 points should be displayed and no correct or incorrect icons should be displayed in the preview tab', () => {
             utilities.verifyInnerText(autoScoredScoringPreviewTab.studentViewRadioButtonLabel(), 'Student view');

package/cypress/pages/components/imageCanvasComponent.js

@@ -1017,6 +1017,8 @@ const tests = {
         });
 
         it(`'Image alignment' section should have three options ${alignmentOptions} and ${alignmentOptions[0]} should be active selection by default`, () => {
+            //Uncheck Fill image to canvas checkbox to verify image is left aligned in the canvas
+            imageCanvasComponent.steps.uncheckFillImageToCanvasCheckbox();
             utilities.verifyInnerText(imageCanvasComponent.topLeftAlignmentButton(), 'Top left');
             utilities.verifyElementVisibilityState(imageCanvasComponent.topLeftAlignmentButton(), 'visible');
             utilities.verifyInnerText(imageCanvasComponent.centerAlignmentButton(), 'Center');

package/cypress/pages/components/layoutSectionComponent.js

@@ -23,7 +23,7 @@ const selectors = {
     heightInputField: () => cy.get('.number-line-layout-options input[aria-label="Height (px)"]'),
     marginLabel: () => cy.get('.margin-input-wrapper [for="Margin (px)"]'),
     marginInputField: () => cy.get('.number-line-layout-options input[aria-label="Margin (px)"]'),
-    responseSpacingLabel: () => cy.get('.dropdown-wrapper [aria-labelledby="Response Spacing"]'),
+    responseSpacingLabel: () => cy.get('.dropdown-wrapper [for="Response Spacing"]'),
     responseSpacingInputField: () => cy.get('.dropdown-wrapper input[aria-label="Response Spacing"]'),
     makeResponsiveLabel: () => cy.get('.mobile-responsive-wrapper .MuiFormControlLabel-label'),
     makeResponsiveCheckbox: () => cy.get('.mobile-responsive-wrapper input'),

package/cypress/pages/components/maximumCapacityPerDropzoneComponent.js

@@ -26,7 +26,7 @@ const steps = {
      */
     selectOptionFromMaxCapacityPerDropzoneDropdown: (listOption) => {
         maximumCapacityPerDropzoneComponent.maxCapacityPerDropzoneDropdownListOptions(listOption)
-            .click();
+            .click({force: true});
     },
 
     verifyMaxCapacityPerDropzoneListOptions: (options) => {

package/cypress/pages/components/numberLineCommonComponent.js

@@ -20,9 +20,9 @@ const selectors = {
     correctIncorrectAnswerTextWrapper: () => cy.get('[class*="CorrectIncorrectWrapper"]'),
     warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
     warningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
-    nodesOnNumberLineOfNumberLineSection: () => cy.get('[class*="LineGridSettingstyles__LineSettingWrapper"] .ngie-jxgbox [stroke-linecap="round"]'),
-    nodesOnNumberLineOfSpecifyCorrectAnswerSection: () => cy.get('[class*="AnswerAccordionstyles__AnswerPanel"] .ngie-jxgbox [stroke-linecap="round"]'),
-    nodesOnNumberLineInPreviewTab: () => cy.get('[class*="TabsComponentstyles__PreviewWrapper"] .ngie-jxgbox [stroke-linecap="round"]'),
+    nodesOnNumberLineOfNumberLineSection: () => cy.get('[class*="LineGridSettingstyles__LineSettingWrapper"] .ngie-jxgbox [id*="ticks"][stroke-linecap="round"]'),
+    nodesOnNumberLineOfSpecifyCorrectAnswerSection: () => cy.get('[class*="AnswerAccordionstyles__AnswerPanel"] .ngie-jxgbox [id*="ticks"][stroke-linecap="round"]'),
+    nodesOnNumberLineInPreviewTab: () => cy.get('[class*="TabsComponentstyles__PreviewWrapper"] .ngie-jxgbox [id*="ticks"][stroke-linecap="round"]'),
 }
 
 const steps = {

package/cypress/pages/createItemPage.js

@@ -31,7 +31,6 @@ const selectors = {
     sectionsNumber1Label: () => cy.get('.tablist-numbered-label').eq(0),
     sectionsNumber2Label: () => cy.get('.tablist-numbered-label').eq(1),
     noPreviewText: () => cy.get('[class*="__NoPreview"]'),
-    buttonEditItemTitle: () => cy.get('[data-at="edit-button"]'),
     editItemButton: () => cy.get('.column-component-column .icon-pencil'),
     pointsValue: () => cy.get('[class*="PreviewTabstyles__PointsValue"]'),
     moreActionsButton: () => cy.get('[class*="MoreActionMenuButton"] [type="button"]'),
@@ -149,8 +148,6 @@ const steps = {
     enterTitle: (value) => {
         createItemPage.titleInputField()
             .type(value);
-        createItemPage.titleInputField()
-            .blur();
     },
 
     clickOnSubmitButton: () => {
@@ -586,10 +583,6 @@ const steps = {
             });
     },
 
-    editItemTitle: () => {
-        createItemPage.buttonEditItemTitle()
-    },
-
     /**
      * @param {number} index of the question
      * @description this function is used to click on edit item button

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -328,6 +328,38 @@ const steps = {
         };
     },
 
+    /**
+     * @param {number} cellIndex - Index of the table cell.
+     * @param {("Heading" | "Subheading" | "Text" | "Dropzone" | "None")} cellProperty - Type of property to verify.
+     * @description Verifies the appearance and content of a specific property in a table cell on the preview tab.
+     */
+    verifyTableCellPropertyStudentView: (cellIndex, cellProperty) => {
+        switch (cellProperty) {
+            case 'Heading':
+                utilities.getNthElement(dragAndDropIntoCategoriesPage.cellContainerPreviewTab(), cellIndex)
+                    .should('have.class', 'header-cell');
+                break;
+            case 'Subheading':
+                utilities.getNthElement(dragAndDropIntoCategoriesPage.cellContainerPreviewTab(), cellIndex)
+                    .should('have.class', 'sub-header-cell');
+                break;
+            case 'Text':
+                utilities.getNthElement(dragAndDropIntoCategoriesPage.cellContainerPreviewTab(), cellIndex)
+                    .should('have.class', 'text-cell');
+                break;
+            case 'Dropzone':
+                utilities.getNthElement(dragAndDropIntoCategoriesPage.cellContainerPreviewTab(), cellIndex)
+                    .should('have.class', 'dropzone-cell');
+                break;
+            case 'None':
+                utilities.getNthElement(dragAndDropIntoCategoriesPage.cellContainerPreviewTab(), cellIndex)
+                    .should('have.class', 'none-cell');
+                break;
+            default:
+                throw new Error('Invalid list option');
+        };
+    },
+
     /**
     * @param {number} cellIndex - Index of the table cell.
     * @param {("Heading" | "Subheading" | "Text" | "Dropzone" | "None")} cellProperty - Type of property to verify.

package/cypress/pages/drawingResponsePage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities"
-import { questionInstructionsComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, scoringSectionBaseEditTab, customizeSpecialCharacterComponent, customizeMathCharacterComponent } from "./components"
+import { questionInstructionsComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, scoringSectionBaseEditTab, customizeSpecialCharacterComponent, customizeMathCharacterComponent, backgroundImageUploadComponent } from "./components"
 import { createItemPage } from "./createItemPage";
 import { dialogBoxBase } from "./dialogBoxBase";
 
@@ -15,6 +15,7 @@ const selectors = {
     ...createQuestionBasePage,
     ...customizeSpecialCharacterComponent,
     ...customizeMathCharacterComponent,
+    ...backgroundImageUploadComponent,
     //Customize toolbar options and controls
     customizeToolbarOptionsAndControlsAccordion: () => cy.get('.drawing-response-accordion .ngie-accordion-summary'),
     customizeToolbarOptionsAndControlsLabel: () => cy.get('.customized-options-label'),
@@ -116,9 +117,9 @@ const selectors = {
     imageRadioButton: () => cy.get('input[aria-label="Image"]'),
     patternLabel: () => cy.get('label[aria-label="Pattern"]'),
     patternRadioButton: () => cy.get('input[aria-label="Pattern"]'),
-    canvasWidthLabel: () => cy.get('label[aria-labelledby="Canvas width (px)"]'),
+    canvasWidthLabel: () => cy.get('label[for="Canvas width (px)"]'),
     canvasWidthInputField: () => cy.get('input[aria-label="Canvas width (px)"]'),
-    canvasHeightLabel: () => cy.get('label[aria-labelledby="Canvas height (px)"]'),
+    canvasHeightLabel: () => cy.get('label[for="Canvas height (px)"]'),
     canvasHeightInputField: () => cy.get('input[aria-label="Canvas height (px)"]'),
     aspectRatioButton: () => cy.get('.lock-reset-icon-wrapper button').eq(0),
     resetDimensionsButton: () => cy.get('.lock-reset-icon-wrapper button').eq(1),
@@ -231,6 +232,7 @@ const steps = {
     ...customizeSpecialCharacterComponent.steps,
     ...customizeMathCharacterComponent.steps,
     ...createItemPage.steps,
+    ...backgroundImageUploadComponent.steps,
     /**
      * @param {string[]} arrayOfToolbarOptions array of toolbar options to be selected
      * @description this function selects toolbar options from edit tab
@@ -642,6 +644,14 @@ const steps = {
             .attachFile(file);
     },
 
+    /**
+     * @description this function deletes an uploaded file
+     */
+    deleteUploadedFile: () => {
+        backgroundImageUploadComponent.steps.deleteImage();
+        backgroundImageUploadComponent.steps.clickOnDeleteButtonInDeleteImagePopup();
+    },
+
     verifyImageContainerErrorMessage: (fileName) => {
         drawingResponsePage.insertImageContainerErrorMessage()
             .should('have.text', `The following files were rejected${fileName} is too large. The maximum file size is 5MB`)

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -76,9 +76,9 @@ const selectors = {
     optionAlignmentInDropzoneOptions: (alignmentOption) => cy.get(`.option-alignment button[aria-label*="option alignment in dropzone ${alignmentOption}"]`),
     setHeightAndWidthForAllDropzoneCheckboxLabel: () => cy.get('[data-ngie-testid="set-height-and-width-for-all-dropzones-checkbox"] .MuiFormControlLabel-label'),
     setHeightAndWidthForAllDropzoneCheckbox: () => cy.get('[data-ngie-testid="set-height-and-width-for-all-dropzones-checkbox"] input'),
-    dropzoneHeightInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [aria-labelledby="Height (px)"]'),
+    dropzoneHeightInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [for="Height (px)"]'),
     dropzoneHeightInputField: () => cy.get('.dropzone-text-container-dimension [id="Height (px)"]'),
-    dropzoneWidthInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [aria-labelledby="Width (px)"]'),
+    dropzoneWidthInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [for="Width (px)"]'),
     dropzoneWidthInputField: () => cy.get('.dropzone-text-container-dimension [id="Width (px)"]'),
     draggableOptionPanelPlacementLabel: () => cy.get('.draggable-option-panel-label'),
     panelPlacementLabel: () => cy.get('.panel-placement-style .options-label'),
@@ -711,7 +711,7 @@ const steps = {
 
     verifyNoImageAlternativeTextPresentInPreviewTab: () => {
         imageCanvasComponent.canvasImageInPreviewTab()
-            .should('have.attr', 'alt', 'highlightImage.jpg');
+            .should('have.attr', 'alt', 'highlightImage');
     },
 
     /**
@@ -765,10 +765,11 @@ const steps = {
 
     checkBlockRadioButton: () => {
         fillInTheGapsOverImageDragAndDropPage.blockRadioButton()
-            .click()
+            .click();
         cy.wait(500);
         fillInTheGapsOverImageDragAndDropPage.blockRadioButton()
-            .should('be.checked');
+            .parents('[data-value="block"]')
+            .should('have.class', 'radio-option-checked');
     },
 
     verifyInlineOptionPlacementSpecifyCorrectAnswer: () => {

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -36,9 +36,9 @@ const selectors = {
     correctAnswerSectionWithoutEnumerationWrapper: () => cy.get('.label-image-with-text-correct-answer-wrapper'),
     setHeightAndWidthForAllTextContainersCheckboxLabel: () => cy.get('[data-ngie-testid="set-height-and-width-for-all-text-containers-checkbox"] .MuiFormControlLabel-label'),
     setHeightAndWidthForAllTextContainersCheckbox: () => cy.get('[data-ngie-testid="set-height-and-width-for-all-text-containers-checkbox"] input'),
-    textContainerHeightInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [aria-labelledby="Height (px)"]'),
+    textContainerHeightInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [for="Height (px)"]'),
     textContainerHeightInputField: () => cy.get('.dropzone-text-container-dimension [id="Height (px)"]'),
-    textContainerWidthInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [aria-labelledby="Width (px)"]'),
+    textContainerWidthInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [for="Width (px)"]'),
     textContainerWidthInputField: () => cy.get('.dropzone-text-container-dimension [id="Width (px)"]'),
     textContainerConnectorStyleLabel: () => cy.get('.dropzone-connector-style-label'),
     responseArea: () => cy.get('.canvas-dropzone'),
@@ -69,7 +69,7 @@ const steps = {
     ...styleAndLayoutCustomizationAccordionComponent.steps,
     ...figCommonStyleAndLayoutComponent.steps,
     ...connectorStyleStyleAndLayoutCustomizationComponent.steps,
-     ...createItemPage.steps,
+    ...createItemPage.steps,
     /**
      * Verify that the incorrect option icon is displayed for a specific answer input field.
      * @param {number} inputFieldIndex - The index of the answer input field to verify.
@@ -316,7 +316,17 @@ const steps = {
      */
     verifyTextContainerWidthInputFieldValue: (value) => {
         utilities.verifyInputFieldValue(fillInTheGapsOverImageTextPage.textContainerWidthInputField(), value);
-    }
+    },
+
+    /**
+     * @param {string} file name of the file in fixtures/upload folder
+]    * @description this function uploads a file
+     */
+    uploadFileWithoutVerification: (file) => {
+        fillInTheGapsOverImageTextPage.inputTypeFile()
+            .attachFile(file);
+        cy.wait(4000);
+    },
 }
 
 const tests = {