itemengine-cypress-automation 1.0.337-IEI-5508-automated-tests-9e03453.0 → 1.0.338

package/cypress/pages/components/fillInTheGapsDragAndDropCommonComponents.js

@@ -17,6 +17,7 @@ const selectors = {
     correctAnswerContainer: () => cy.get('.dnd-correct-answer-wrapper'),
     correctIncorrectAnswerLabel: () => cy.get('[class*="CorrectIncorrectLabel"]'),
     correctAnswerResponseWrapperWithoutEnumeration: () => cy.get('[class*="CorrectAnswers"] [class*="AnswerStatusIconAndResponseWrapper"]'),
+    answerStatusBanner: () => cy.get('[class*="AnswerStatusWrapper"]'),
 
     //additional settings
     enterAriaLabelInputField: () => cy.get('input[aria-label*="Enter ARIA label"]'),
@@ -111,7 +112,27 @@ const steps = {
         optionsTextArray.forEach((option, optionIndex) => {
             utilities.verifyTextContent(utilities.getNthElement(fillInTheGapsDragAndDropCommonComponents.optionsInputFieldInQuestionPreviewTab(), optionIndex), option);
         });
-    }
+    },
+
+    verifyAnswerStatusBannerNotExist: () => {
+        fillInTheGapsDragAndDropCommonComponents.answerStatusBanner()
+            .should('not.exist');
+    },
+
+    verifyAnswerStatusBannerExist: () => {
+        fillInTheGapsDragAndDropCommonComponents.answerStatusBanner()
+            .should('be.visible');
+    },
+
+    verifyCorrectAnswerSectionExist: () => {
+        fillInTheGapsDragAndDropCommonComponents.correctAnswerContainer()
+            .should('be.visible');
+    },
+
+    verifyCorrectAnswerSectionNotExist: () => {
+        fillInTheGapsDragAndDropCommonComponents.correctAnswerContainer()
+            .should('not.exist');
+    },
 }
 
 export const fillInTheGapsDragAndDropCommonComponents = {

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -6,6 +6,7 @@ import { optionsWrapperComponent } from "./optionsWrapperComponent";
 import { createQuestionBasePage } from "./createQuestionBasePage";
 import { placeholderTextSectionComponent } from "./placeholderTextSectionComponent";
 import { scoringSectionBaseEditTab } from "./scoringSectionBaseEditTab";
+import { dialogBoxBase } from "../dialogBoxBase";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -749,6 +750,72 @@ const steps = {
 }
 
 const tests = {
+    //TODO need to remove once Save as you go is available for all questions
+    /**
+     * @description Verifies the behavior of the 'Add alternative answer' button, warning popups, and validation error messages
+     * in the 'Specify correct answer' section for alternative answers in auto-scored questions.
+     * @param {string|null} questionType - The type of the question (e.g., 'list ordering'). Pass `null` if not applicable.
+     * @example - verifyAutoScoredAddAlternativeAnswerButtonAndValidation();
+     */
+    verifyAutoScoredAddAlternativeAnswerButtonAndValidation: (questionType = null) => {
+        it('\'+ Add alternative answer\' button should be present', () => {
+            utilities.verifyInnerText(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'Add alternative answer');
+            utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'visible');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('content', '""');
+        });
+
+        it('CSS of \'Add Alternative answer\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton().find('p'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('If user has not selected correct answer in the correct accordion, then the Add alternative answer button should be in enabled state', () => {
+            utilities.verifyElementNotDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
+            autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
+        });
+
+        it('CSS of warning popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonClose().find('svg'), {
+                'fill': css.color.closeIcon
+            });
+        });
+
+        it('Accessibility of warning popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+    },
+
+    //TODO need to remove once Save as you go is available for all questions
+    verifyWarningPopupAndAccordionNavigationWhenNoPointsAddedInAlternativeAccordion: () => {
+        it('When user tries to expand correct accordion when all the mandatory fields are not filled in the alternative accordion, then a warning popup should be displayed and on closing the popup, alternative 2 accordion should be in expanded state', () => {
+            autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                .click();
+            dialogBoxBase.steps.closeWarningPopup();
+            //TODO: Need to add error message according to question types
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                .eq(1)
+                .should('have.attr', 'aria-expanded', 'true');
+        });
+    },
+
     /**
     * Verifies the contents and functionality of the 'Specify correct answer' accordion for fill in the gaps over image dropdown question.
     * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -1715,6 +1715,72 @@ const tests = {
             fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextPreviewTab(1, 'Global placeholder');
         });
     },
+
+     //TODO need to remove once Save as you go is available for all questions
+    /**
+     * @description Verifies the behavior of the 'Add alternative answer' button, warning popups, and validation error messages
+     * in the 'Specify correct answer' section for alternative answers in auto-scored questions.
+     * @param {string|null} questionType - The type of the question (e.g., 'list ordering'). Pass `null` if not applicable.
+     * @example - verifyAutoScoredAddAlternativeAnswerButtonAndValidation();
+     */
+    verifyAutoScoredAddAlternativeAnswerButtonAndValidation: (questionType = null) => {
+        it('\'+ Add alternative answer\' button should be present', () => {
+            utilities.verifyInnerText(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'Add alternative answer');
+            utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'visible');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('content', '""');
+        });
+
+        it('CSS of \'Add Alternative answer\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton().find('p'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('If user has not selected correct answer in the correct accordion, then the Add alternative answer button should be in enabled state', () => {
+            utilities.verifyElementNotDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
+            autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
+        });
+
+        it('CSS of warning popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonClose().find('svg'), {
+                'fill': css.color.closeIcon
+            });
+        });
+
+        it('Accessibility of warning popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+    },
+
+    //TODO need to remove once Save as you go is available for all questions
+    verifyWarningPopupAndAccordionNavigationWhenNoPointsAddedInAlternativeAccordion: () => {
+        it('When user tries to expand correct accordion when all the mandatory fields are not filled in the alternative accordion, then a warning popup should be displayed and on closing the popup, alternative 2 accordion should be in expanded state', () => {
+            autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                .click();
+            dialogBoxBase.steps.closeWarningPopup();
+            //TODO: Need to add error message according to question types
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                .eq(1)
+                .should('have.attr', 'aria-expanded', 'true');
+        });
+    },
 }
 
 export const fillInTheGapsTextCommonComponent = {

package/cypress/pages/components/layoutSectionComponent.js

@@ -19,7 +19,7 @@ const selectors = {
     },
     widthLabel: () => cy.get('.number-line-layout-options [for="Width (px)"]'),
     widthInputField: () => cy.get('.number-line-layout-options input[aria-label="Width (px)"]'),
-    heightLabel: () => cy.get('.number-line-layout-options [aria-labelledby="Height (px)"]'),
+    heightLabel: () => cy.get('.number-line-layout-options [for*="Height"]'),
     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)"]'),

package/cypress/pages/components/optionsWrapperComponent.js

@@ -270,6 +270,7 @@ const steps = {
         for (let i = 0; i < optionFieldsCount; i++) {
             optionsWrapperComponent.addOptionButton()
                 .click();
+                cy.wait(200);
         };
     },
 

package/cypress/pages/components/scoringSectionBaseEditTab.js

@@ -78,8 +78,9 @@ const steps = {
     selectOptionFromScoringTypeDropdown: (scoringType) => {
         const convertedString = scoringType.replace(/\b\w/g, (match) => match.toUpperCase());
         scoringSectionBaseEditTab.scoringTypeDropdownListOptions(convertedString)
+            .should('be.visible') // Ensure the dropdown option is visible
             .click();
-        cy.wait(2000);
+        cy.wait(2000); // Wait for the dropdown to close
         utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
     },
 

package/cypress/pages/createItemPage.js

@@ -31,6 +31,7 @@ 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"]'),
@@ -148,6 +149,8 @@ const steps = {
     enterTitle: (value) => {
         createItemPage.titleInputField()
             .type(value);
+        createItemPage.titleInputField()
+            .blur();
     },
 
     clickOnSubmitButton: () => {
@@ -583,6 +586,10 @@ 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/dialogBoxBase.js

@@ -15,11 +15,15 @@ const selectors = {
 }
 
 const steps = {
-    allFieldsRequiredWarningPopupContents: () => {
+    allFieldsRequiredWarningPopupContents: (requiredFieldsArray = null) => {
         utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
-        utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Warning!');
-        utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Please fill the required fields.');
-        utilities.verifyElementVisibilityState(dialogBoxBase.buttonClose(), 'visible');
+        utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Incomplete question');
+        utilities.verifyInnerText(dialogBoxBase.dialogBoxHelpText(), "Are you sure you want to save? Required fields are missing:");
+        if (requiredFieldsArray != null) {
+            requiredFieldsArray.forEach((field, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(dialogBoxBase.dialogBoxWarningFieldList(), index), field);
+            });
+        }
     },
 
     closeWarningPopup: () => {
@@ -48,11 +52,13 @@ const tests = {
         it('When user has made no edits and clicks on Save Question button, the user should get a warning popup', () => {
             createQuestionBasePage.saveQuestionButton()
                 .click();
-            dialogBoxBase.steps.allFieldsRequiredWarningPopupContents();
+            if (requiredFieldsArray != null) {
+                dialogBoxBase.steps.allFieldsRequiredWarningPopupContents(requiredFieldsArray);
+            }
         });
 
-        it('Warning popup should close on clicking the Close icon button', () => {
-            dialogBoxBase.steps.closeWarningPopup();
+        it('Leave page popup should close on clicking the reject button', () => {
+            dialogBoxBase.steps.clickOnRejectButtonInDialogBox();
             utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
         });
     },

package/cypress/pages/drawingResponsePage.js

@@ -77,6 +77,7 @@ const selectors = {
     previewTabSecondaryOptionPopup: () => cy.get('.extended__drawing-tool .drawing-tool-options__options'),
     previewTabSecondaryPopup: () => cy.get('.drawing-tool-options__options:visible'),
     previewTabSecondaryOptionPopupTitle: () => cy.get('.edit-question-preview-wrapper .drawing-tool-options__options .drawing-tool-options__options__label'),
+    textColorTitle: () => cy.get('.drawing-tool-options__options__label'),
     previewTabSecondaryOptionPopupOptions: () => cy.get('.drawing-tool-options__options .drawing-tool-options__options__options-list__button'),
     previewTabColorPickerLabel: () => cy.get('.drawing-tool-color-picker__label'),
     colorPalleteSelectedColorLabel: () => cy.get('.drawing-tool-color-picker__selected-color-label'),
@@ -101,6 +102,15 @@ const selectors = {
     inputTypeFile: () => cy.get('input[type="file"]'),
     insertImageContainerErrorMessage: () => cy.get('.image-upload__error'),
 
+    //Capture image
+    captureImageContainer: () => cy.get('[class="drawing-tool-modal__content Camera"]'),
+    captureCancelImageIcon: () => cy.get('button.outlined').contains('Cancel'),
+    captureImageButton: () => cy.get('button.contained').contains('Capture'),
+    retakeButton: () => cy.get('button.outlined').contains('Retake'),
+    saveButton: () => cy.get('button.contained').contains('Save'),
+    canvasContainer: () => cy.get('[class*="Camerastyled__CapturingCanvas"]'),
+    cameraIsVisible: () => cy.get('.camera-component__video'),
+
     //Characters popup
     charactersPopupTitle: () => cy.get('[class*="characters__title-container"]'),
     charactersPopupCloseButton: () => cy.get('[class*="DrawingToolOptionsstyled__ButtonWrapper"]'),
@@ -114,6 +124,8 @@ const selectors = {
     blankCanvasLabel: () => cy.get('label[aria-label="Blank canvas"]'),
     blankCanvasRadioButton: () => cy.get('input[aria-label="Blank canvas"]'),
     imageLabel: () => cy.get('label[aria-label="Image"]'),
+    uploadedImage: () => cy.get('[aria-label="Image"]'),
+    uploadImageLoader: () => cy.get('[class*="InlineLoaderstyles__LoaderDiv"]'),
     imageRadioButton: () => cy.get('input[aria-label="Image"]'),
     patternLabel: () => cy.get('label[aria-label="Pattern"]'),
     patternRadioButton: () => cy.get('input[aria-label="Pattern"]'),
@@ -124,8 +136,6 @@ const selectors = {
     aspectRatioButton: () => cy.get('.lock-reset-icon-wrapper button').eq(0),
     resetDimensionsButton: () => cy.get('.lock-reset-icon-wrapper button').eq(1),
     uploadLabel: () => cy.get('[class*="SimpleImageUploaderstyles__LabelWrapper"]').eq(0),
-    uploadedImage: () => cy.get('[aria-label="Image"]'),
-    uploadImageLoader: () => cy.get('[class*="InlineLoaderstyles__LoaderDiv"]'),
     fileNameLabel: () => cy.get('[class*="SimpleImageUploaderstyles__LabelWrapper"]').eq(1),
     fileUploadSection: () => cy.get('.file-input-wrapper'),
     chooseFileButton: () => cy.get('.choose-file-button'),
@@ -629,6 +639,67 @@ const steps = {
         utilities.verifyElementVisibilityState(drawingResponsePage.insertImageContainer(), 'notExist');
     },
 
+    verifyCaptureImageContainerIsVisible: () => {
+        utilities.verifyElementVisibilityState(drawingResponsePage.captureImageContainer(), 'visible');
+    },
+
+    verifyCaptureImageContainerNotExist: () => {
+        utilities.verifyElementVisibilityState(drawingResponsePage.captureImageContainer(), 'notExist');
+    },
+
+    clickOnCancelIconOfCaptureImage: () => {
+        drawingResponsePage.captureCancelImageIcon()
+            .should('be.visible')
+            .click();
+    },
+
+    clickOnCaptureButtonOfCaptureImage: () => {
+        drawingResponsePage.captureImageButton()
+            .should('be.visible')
+            .click();
+    },
+
+    verifyCaptureImageIsVisible: () => {
+        drawingResponsePage.canvasContainer()
+            .should('be.visible')
+            .within(() => {
+                cy.get('img')
+                    .should('be.visible')
+                    .and('have.attr', 'src')
+                    .and('include', 'blob:'); // Ensures the image is captured
+            });
+    },
+
+    verifySaveAndRetakeButtonsAreVisible: () => {
+        drawingResponsePage.retakeButton()
+            .should('be.visible');
+        drawingResponsePage.saveButton()
+            .should('be.visible');
+    },
+
+    clickOnRetakeButton: () => {
+        drawingResponsePage.retakeButton()
+            .should('be.visible')
+            .click();
+    },
+
+    clickOnSaveButton: () => {
+        drawingResponsePage.saveButton()
+            .should('be.visible')
+            .click();
+    },
+
+    verifyCameraIsVisible: () => {
+        drawingResponsePage.cameraIsVisible()
+            .should('be.visible');
+    },
+
+    verifyCaptureAndCancelButtonIsVisible: () => {
+        drawingResponsePage.captureImageButton()
+            .should('be.visible');
+        drawingResponsePage.captureCancelImageIcon()
+            .should('be.visible');
+    },
     /**
      * @param {string} fileName name of the file being uploaded
      * @param {string} fileSize size of the file being uploaded

package/cypress/pages/feedbackScalePage.js

@@ -739,6 +739,8 @@ const steps = {
     expandDefaultTextDropdown: () => {
         feedbackScalePage.defaultTextDropdown()
             .click();
+        cy.wait(500);
+        utilities.verifyElementVisibilityState(feedbackScalePage.defaultTextDropdownListOptions(), 'visible');
     },
 
     /**

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -3,6 +3,7 @@ import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
 import { createQuestionBasePage, optionsWrapperComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, fillInTheGapsDragAndDropCommonComponents, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, autoScoredStudentViewSettings, ckEditorToolbar, equationEditorFlyout, draggableOptionContainer, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, draggableOptionsSectionComponent, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, responseAreaSettingsPopupComponent, gradingViewEnumerationComponent, ariaLabelSectionComponent, styleAndLayoutCustomizationAccordionComponent, figCommonStyleAndLayoutComponent, draggableOptionsStyleAndLayoutComponent } from "./components"
 import { createItemPage } from "./createItemPage";
+import { dialogBoxBase } from "./dialogBoxBase";
 
 //TODO update option container selectors when https://redmine.zeuslearning.com/issues/563159 is resolved
 const selectors = {
@@ -91,7 +92,7 @@ const steps = {
     ...styleAndLayoutCustomizationAccordionComponent.steps,
     ...figCommonStyleAndLayoutComponent.steps,
     ...draggableOptionsStyleAndLayoutComponent.steps,
-     ...createItemPage.steps,
+    ...createItemPage.steps,
     /**
      * Sets options in dropzone in the Preview Tab based on the provided optionsObject.
      * @param {Object} optionsObject - An object where keys are option texts and values are dropzone indices.
@@ -1040,6 +1041,72 @@ const tests = {
     ...styleAndLayoutCustomizationAccordionComponent.tests,
     ...figCommonStyleAndLayoutComponent.tests,
     ...draggableOptionsStyleAndLayoutComponent.tests,
+    //TODO need to remove once Save as you go is available for all questions
+    /**
+     * @description Verifies the behavior of the 'Add alternative answer' button, warning popups, and validation error messages
+     * in the 'Specify correct answer' section for alternative answers in auto-scored questions.
+     * @param {string|null} questionType - The type of the question (e.g., 'list ordering'). Pass `null` if not applicable.
+     * @example - verifyAutoScoredAddAlternativeAnswerButtonAndValidation();
+     */
+    verifyAutoScoredAddAlternativeAnswerButtonAndValidation: (questionType = null) => {
+        it('\'+ Add alternative answer\' button should be present', () => {
+            utilities.verifyInnerText(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'Add alternative answer');
+            utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'visible');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('content', '""');
+        });
+
+        it('CSS of \'Add Alternative answer\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton().find('p'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('If user has not selected correct answer in the correct accordion, then the Add alternative answer button should be in enabled state', () => {
+            utilities.verifyElementNotDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
+            autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
+        });
+
+        it('CSS of warning popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonClose().find('svg'), {
+                'fill': css.color.closeIcon
+            });
+        });
+
+        it('Accessibility of warning popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+    },
+
+    //TODO need to remove once Save as you go is available for all questions
+    verifyWarningPopupAndAccordionNavigationWhenNoPointsAddedInAlternativeAccordion: () => {
+        it('When user tries to expand correct accordion when all the mandatory fields are not filled in the alternative accordion, then a warning popup should be displayed and on closing the popup, alternative 2 accordion should be in expanded state', () => {
+            autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                .click();
+            dialogBoxBase.steps.closeWarningPopup();
+            //TODO: Need to add error message according to question types
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                .eq(1)
+                .should('have.attr', 'aria-expanded', 'true');
+        });
+    },
+
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
             utilities.verifyElementCount(fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), 3);
@@ -1061,16 +1128,16 @@ const tests = {
 
         it(`When the user has removed all the options from the dropzone in the ${accordionName} accordion, 'Error: Please set a correct answer.' error message should be thrown along with an error icon on the '${accordionName}' accordion`, () => {
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist')
             if (accordionName == 'Correct') {
                 autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
                     .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'notExist');
                     });
             } else {
                 autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
                     .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'notExist');
                     });
             };
         });

package/cypress/pages/fillInTheGapsDropdownPage.js

@@ -40,6 +40,7 @@ const selectors = {
     alternateAnswerPopupCancelButton: () => cy.get('[class*="AlternateOptionstyle__ButtonWrapper"] button').eq(0),
     alternateAnswerPopupSaveButton: () => cy.get('[class*="AlternateOptionstyle__ButtonWrapper"] button').eq(1),
     selectedAlternateAnswerCountSpecifyCorrectAnswer: () => cy.get('.selected-option-wrapper'),
+    answerStatusBanner: () => cy.get('[class*="AnswerStatusWrapper"]'),
 }
 
 const steps = {
@@ -313,6 +314,26 @@ const steps = {
                 .should('not.have.class', 'selected');
         });
     },
+
+    verifyCorrectAnswerSectionNotExist: () => {
+        fillInTheGapsDropdownPage.correctAnswerSectionWrapper()
+            .should('not.exist');
+    },
+
+    verifyCorrectAnswerSectionExist: () => {
+        fillInTheGapsDropdownPage.correctAnswerSectionWrapper()
+            .should('exist');
+    },
+
+    verifyAnswerStatusBannerNotExist: () => {
+        fillInTheGapsDropdownPage.answerStatusBanner()
+            .should('not.exist');
+    },
+
+    verifyAnswerStatusBannerExist: () => {
+        fillInTheGapsDropdownPage.answerStatusBanner()
+            .should('be.visible');
+    },
 }
 
 const tests = {

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -1032,13 +1032,13 @@ const steps = {
                         break;
                     case 'Left':
                         fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
-                            .should('have.css', 'width', '143.84375px')
+                            .should('have.css', 'width', '145px')
                             .and('have.css', 'padding-right', '24px')
                             .and('have.css', 'padding-left', '8px')
                         break;
                     case 'Right':
                         fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
-                            .should('have.css', 'width', '143.84375px')
+                            .should('have.css', 'width', '145px')
                             .and('have.css', 'padding-right', '8px')
                             .and('have.css', 'padding-left', '24px')
                         break;

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -38,6 +38,8 @@ const selectors = {
     dropdownPointer: () => cy.get('.canvas-pointer-wrapper'),
     dropdownTextLabel: () => cy.get('.dropdown-list .dropdown-label-text'),
     dropdownTextLabelCollapsed: () => cy.get('.response-dropdown .dropdown-label-text'),
+    answerStatusBanner: () => cy.get('[class*="AnswerStatusWrapper"]'),
+    correctAnswerWrapper: () => cy.get('[class*="CorrectAnswerWrapper"]'),
 }
 
 const steps = {
@@ -302,6 +304,26 @@ const steps = {
             .eq(index)
             .trigger('mouseout', { force: true });
     },
+
+    verifyCorrectAnswerSectionNotExist: () => {
+        fillInTheGapsOverImageDropdownPage.correctAnswerWrapper()
+            .should('not.exist');
+    },
+
+    verifyCorrectAnswerSectionExist: () => {
+        fillInTheGapsOverImageDropdownPage.correctAnswerWrapper()
+            .should('exist');
+    },
+
+    verifyAnswerStatusBannerNotExist: () => {
+        fillInTheGapsOverImageDropdownPage.answerStatusBanner()
+            .should('not.exist');
+    },
+
+    verifyAnswerStatusBannerExist: () => {
+        fillInTheGapsOverImageDropdownPage.answerStatusBanner()
+            .should('be.visible');
+    },
 }
 
 const tests = {

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -42,6 +42,8 @@ const selectors = {
     textContainerWidthInputField: () => cy.get('.dropzone-text-container-dimension [id="Width (px)"]'),
     textContainerConnectorStyleLabel: () => cy.get('.dropzone-connector-style-label'),
     responseArea: () => cy.get('.canvas-dropzone'),
+    answerStatusBanner: () => cy.get('[class*="AnswerStatusWrapper"]'),
+    correctAnswerSectionWrapper: () => cy.get('[class*="label-image-with-text-correct-answer-wrapper"]'),
 }
 
 const steps = {
@@ -327,6 +329,26 @@ const steps = {
             .attachFile(file);
         cy.wait(4000);
     },
+
+    verifyCorrectAnswerSectionNotExist: () => {
+        fillInTheGapsOverImageTextPage.correctAnswerSectionWrapper()
+            .should('not.exist');
+    },
+
+    verifyCorrectAnswerSectionExist: () => {
+        fillInTheGapsOverImageTextPage.correctAnswerSectionWrapper()
+            .should('exist');
+    },
+
+    verifyAnswerStatusBannerNotExist: () => {
+        fillInTheGapsOverImageTextPage.answerStatusBanner()
+            .should('not.exist');
+    },
+
+    verifyAnswerStatusBannerExist: () => {
+        fillInTheGapsOverImageTextPage.answerStatusBanner()
+            .should('be.visible');
+    },
 }
 
 const tests = {