itemengine-cypress-automation 1.0.131-updateILCrepo6March-02c78d1.0 → 1.0.132

package/cypress/e2e/ILC/AudioResponseNew/barRecorderStyle.smoke.js

@@ -236,10 +236,9 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewRetakeButton(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
-            utilities.verifyElementVisibilityState(audioResponsePage.previewVolumeMeter(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPlaybackTime(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
-            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:10', '00:10');
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:00', '00:10');
         });
     });
 
@@ -386,7 +385,6 @@ describe('Preview of Audio response for bar audio recorder style', () => {
     
             it('When the user seeks the progress bar slider while the audio is playing, then the audio should continue to play from the position where the slider is seeked', () => {
                 audioResponsePage.steps.seekProgressBarSliderToCenter();
-                audioResponsePage.steps.addWaitToPlayAudio(1000);
                 audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
             });
     
@@ -394,12 +392,11 @@ describe('Preview of Audio response for bar audio recorder style', () => {
                 audioResponsePage.steps.pausePlayback();
                 audioResponsePage.steps.seekProgressBarSliderToCenter();
                 audioResponsePage.steps.startPlayback();
-                audioResponsePage.steps.addWaitToPlayAudio(5000);
                 audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
             });
     
             it('When the audio playback is completed, the \'Pause\' button should get replaced with \'Play\' button', () => {
-                audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:45', '00:45');
+                audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:10', '00:10');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPauseButton(), 'notExist');
                 audioResponsePage.steps.verifyProgressBarSliderPosition(99);
@@ -484,7 +481,7 @@ describe('Preview of Audio response for bar audio recorder style', () => {
             it('When the user clicks on Confirm button of the retake popup, the previous recording should get deleted and a new recording should begin', () => {
                 audioResponsePage.steps.retakeRecordingBarPreview();
                 audioResponsePage.steps.confirmRetake();
-                audioResponsePage.steps.verifyRecordingTimeBarPreview('00:02', '15:00');
+                audioResponsePage.steps.verifyRecordingTimeBarPreview('00:05', '00:10');
                 utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
                 utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
             });

package/cypress/e2e/ILC/AudioResponseNew/compactRecorderStyle.smoke.js

@@ -219,6 +219,7 @@ describe('Preview of Audio response for compact audio recorder style', () => {
             audioResponsePage.steps.switchToEditTab();
             audioResponsePage.steps.setMaximumRecorderLength(5);
             audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.startRecordingCompactPreview();
             audioResponsePage.steps.waitForRecordingToStartCompactPreview();
             cy.log('Starting a recording and letting it record until Maximum recording length is reached');
             audioResponsePage.steps.verifyResponseIsRecordedHelpText();
@@ -376,7 +377,6 @@ describe('Preview of Audio response for compact audio recorder style', () => {
 
             it('When the user seeks the progress bar slider while the audio is playing, then the audio should continue to play from the position where the slider is seeked', () => {
                 audioResponsePage.steps.seekProgressBarSliderToCenter();
-                audioResponsePage.steps.addWaitToPlayAudio(1000);
                 audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
             });
 
@@ -384,7 +384,6 @@ describe('Preview of Audio response for compact audio recorder style', () => {
                 audioResponsePage.steps.pausePlaybackCompactPreview();
                 audioResponsePage.steps.seekProgressBarSliderToCenter();
                 audioResponsePage.steps.startPlaybackCompactPreview();
-                audioResponsePage.steps.addWaitToPlayAudio(5000);
                 audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
             });
 
@@ -450,7 +449,6 @@ describe('Preview of Audio response for compact audio recorder style', () => {
                 audioResponsePage.steps.navigateToCreateQuestion('audio response');
                 cy.barsPreLoaderWait();
                 audioResponsePage.steps.selectAudioRecorderStyle('Compact');
-                audioResponsePage.steps.setMaximumRecorderLength(10);
                 audioResponsePage.steps.switchToPreviewTab();
                 audioResponsePage.steps.recordAndSaveAudioCompactPreview(10000);
             });
@@ -475,7 +473,7 @@ describe('Preview of Audio response for compact audio recorder style', () => {
             it('When the user clicks on Confirm button of the retake popup, the previous recording should get deleted and a new recording should begin', () => {
                 audioResponsePage.steps.retakeRecordingCompactPreview();
                 audioResponsePage.steps.confirmRetake();
-                audioResponsePage.steps.verifyRecordingTimeCompactPreview('00:02', '15:00');
+                audioResponsePage.steps.verifyRecordingTimeCompactPreview('00:04', '15:00');
                 utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
                 utilities.verifyInnerText(audioResponsePage.compactPreviewRecordingStatusText(), 'Recording...');
             });

package/cypress/e2e/ILC/AudioResponseNew/standardRecorderStyle.smoke.js

@@ -84,7 +84,7 @@ describe('Preview of Audio response for standard audio recorder style', () => {
             audioResponsePage.steps.resetQuestionPreview();
             audioResponsePage.steps.startRecordingStandardPreview();
             audioResponsePage.steps.waitForRecordingToStartStandardPreview();
-            utilities.verifyCSS(audioResponsePage.recordingMicIcon().find('svg path').eq(1), {
+            utilities.verifyCSS(audioResponsePage.recordingMicIcon(), {
                 'fill': css.color.microphoneIcon
             });
             utilities.verifyCSS(audioResponsePage.recordingStatusText(), {
@@ -254,7 +254,6 @@ describe('Preview of Audio response for standard audio recorder style', () => {
             audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:00', '00:04');
         });
 
-        //Failing due to https://redmine.zeuslearning.com/issues/560794
         it('When recording is inprogress and user has reached maximum recorder length, \'Your response has been recorded\' message should be displayed below mic icon. Retake and Play icon should be displayed along with progress bar. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'. Volume meter should not be displayed in player', () => {
             audioResponsePage.steps.switchToEditTab();
             audioResponsePage.steps.setMaximumRecorderLength(10);
@@ -262,14 +261,13 @@ describe('Preview of Audio response for standard audio recorder style', () => {
             audioResponsePage.steps.startRecordingStandardPreview();
             audioResponsePage.steps.waitForRecordingToStartStandardPreview();
             cy.log('Response will keep recording until maximum recording length of 10 seconds is reached');
-            utilities.verifyInnerText(audioResponsePage.standardPreviewRecorderHelpText(), 'Recording...');
             audioResponsePage.steps.verifyResponseIsRecordedHelpText();
             utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewRetakeButton(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.previewVolumeMeter(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewPlaybackTime(), 'visible');
             utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
-            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:10', '00:10');
+            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:00', '00:10');
         });
     });
 
@@ -420,7 +418,6 @@ describe('Preview of Audio response for standard audio recorder style', () => {
 
             it('When the user seeks the progress bar slider while the audio is playing, then the audio should continue to play from the position where the slider is seeked', () => {
                 audioResponsePage.steps.seekProgressBarSliderToCenter();
-                audioResponsePage.steps.addWaitToPlayAudio(1000);
                 audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
             });
 
@@ -428,12 +425,11 @@ describe('Preview of Audio response for standard audio recorder style', () => {
                 audioResponsePage.steps.pausePlayback();
                 audioResponsePage.steps.seekProgressBarSliderToCenter();
                 audioResponsePage.steps.startPlayback();
-                audioResponsePage.steps.addWaitToPlayAudio(5000);
                 audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
             });
 
             it('When the audio playback is completed, the \'Pause\' button should get replaced with \'Play\' button', () => {
-                audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:45', '00:45');
+                audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:10', '00:10');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
                 utilities.verifyElementVisibilityState(audioResponsePage.playbackPauseButton(), 'notExist');
                 audioResponsePage.steps.verifyProgressBarSliderPosition(99);

package/cypress/e2e/ILC/EssayResponse/essayResponseCustomizeFormattingOptions1.smoke.js

@@ -21,6 +21,7 @@ describe('Create question page - Essay Response: Customize formatting options (f
         abortEarlySetup();
         before(() => {
             essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
         });
 
         it('By default \'Customize formatting options\' accordion should be collapsed and by clicking on the \'Customize formatting options (for student player)\' accordion, user should be able to expand the accordion', () => {
@@ -117,6 +118,7 @@ describe('Create question page - Essay Response: Customize formatting options (f
         abortEarlySetup();
         before(() => {
             essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
         });
 
         it(`When the user switches to Preview tab, then the following options should be displayed in the response field toolbar - ${defaultFormattingOptionsPreviewTab}`, () => {

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/additionalSettings.js

@@ -0,0 +1,154 @@
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const fontSizeDropdownOptions = ['Tiny', 'Small', 'Default', 'Normal', 'Big', 'Huge'];
+const fontSizes = ['12px', '14px', '16px', '18px', '22px', '26px'];
+
+describe('Create item page - Fill in the gaps with drag and drop: Additional Settings accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');;
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');;
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size functionality edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');;
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addQuestionInstructions();
+            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${option} accordingly`, () => {
+                fillInTheGapsDragAndDropPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(fillInTheGapsDragAndDropPage.fontSizeDropdown(), `${option}`);
+                utilities.verifyCSS(fillInTheGapsDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size functionality preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');;
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addQuestionInstructions();
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(['Petals', 'Leaves']);
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0, 'Leaves': 1 });
+            fillInTheGapsDragAndDropPage.steps.allotPoints(20);
+            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${option} accordingly`, () => {
+                fillInTheGapsDragAndDropPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(fillInTheGapsDragAndDropPage.fontSizeDropdown(), `${option}`);
+                fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(fillInTheGapsDragAndDropPage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsDragAndDropPage.questionContainerPreviewTab(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsDragAndDropPage.optionContainerOptionsPreviewTab(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                fillInTheGapsDragAndDropPage.steps.switchToGradingView();
+                utilities.verifyCSS(fillInTheGapsDragAndDropPage.dropzoneNumeration(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsDragAndDropPage.correctAnswersLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsDragAndDropPage.correctAnswersNumeration(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsDragAndDropPage.correctAnswersOptions(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Setting tab: Accessibility section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');;
+            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
+        });
+
+        it('When the user expands additional settings accordion then \'Accessibility\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.accessibilityLabel(), 'Accessibility');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.accessibilityLabel(), 'visible');
+        });
+
+        it('In \'Accessibility\' section, \'Flag this question as non-accessible\' label with checkbox should be displayed and it should be unchecked by default', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.flagNonAccessibleCheckbox(), 'exist');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.flagNonAccessibleLabel(), 'Flag this question as non-accessible');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.flagNonAccessibleLabel(), 'visible');
+            fillInTheGapsDragAndDropPage.steps.verifyFlagThisItemNonAccessibleCheckboxIsUnchecked();
+        });
+
+
+        it('User should be able to check the \'Flag this question as non-accessible\' checkbox', () => {
+            fillInTheGapsDragAndDropPage.steps.checkFlagThisItemNonAccessibleCheckbox();
+        });
+
+        it('CSS of \'Accessibility\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.accessibilityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.flagNonAccessibleLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.flagNonAccessibleCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of checked \'Flag this question as non-accessible\' checkbox and \'Alternate accessible item id\' input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.flagNonAccessibleCheckbox());
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');;
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyDetailsSection();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/dropzoneAlternateAnswerPopup.js

@@ -0,0 +1,170 @@
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps with text: Dropzone level alternate answer popup', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Dropzone level alternate answer popup - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addOption();
+            fillInTheGapsDragAndDropPage.steps.addOption();
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(['Petals', 'Leaves', 'Roots', 'Stem']);
+        });
+
+        it('By default a disabled \'Add alternate\' button should be displayed besides each dropzone in specify correct answer section', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDefaultAddAlternateAnswerButtonIsDisplayed(0);
+            fillInTheGapsDragAndDropPage.steps.verifyDefaultAddAlternateAnswerButtonIsDisplayed(1);
+        });
+
+        it('CSS of disabled \'Add alternate\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.addAlternateButtonSpecifyCorrectAnswer(), {
+                'color': css.color.secondaryBtnDisabled,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of of disabled \'Add alternate\' button', { tags: 'css' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.addAlternateButtonSpecifyCorrectAnswer());
+        });
+
+        it('When the user drops an option in the dropzone, then \'Add alternate\' button should be enabled', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
+            utilities.verifyElementNotDisabled(utilities.getNthElement(fillInTheGapsDragAndDropPage.addAlternateButtonSpecifyCorrectAnswer(), 0));
+            utilities.verifyElementDisabled(utilities.getNthElement(fillInTheGapsDragAndDropPage.addAlternateButtonSpecifyCorrectAnswer(), 1));
+        });
+
+        it('CSS of enabled \'Add alternate\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.addAlternateButtonSpecifyCorrectAnswer(), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of of enabled \'Add alternate\' button', { tags: 'css' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.addAlternateButtonSpecifyCorrectAnswer());
+        });
+
+        it('When the user clicks on \'Add alternate\' button of a dropzone, then a popup should be displayed with the title \'Dropzone # alternate answer(s)\' and help text \'Select alternate answer(s).\'', () => {
+            fillInTheGapsDragAndDropPage.steps.clickOnAddAlternateButton(0);
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.alternateAnswerPopupTitle(), 'Dropzone 1 alternate answer(s)');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.alternateAnswerPopupTitle(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.alternateAnswerPopupHelpText(), 'Select alternate answer(s).');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.alternateAnswerPopupHelpText(), 'visible');
+        });
+
+        it('The \'Dropzone # alternate answer(s)\' popup should display all the draggable options, except for the one already placed in the corresponding drop zone', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAlternateAnswerPopupOptions(['Leaves', 'Roots', 'Stem']);
+        });
+
+        it('User should be able to select an option by clicking on it', () => {
+            fillInTheGapsDragAndDropPage.steps.selectAlternateAnswerInAlternateAnswerPopup(['Leaves']);
+        });
+
+        it('User should be able to deselect an option by clicking on it', () => {
+            fillInTheGapsDragAndDropPage.steps.deselectAlternateAnswerInAlternateAnswerPopup(['Leaves']);
+        });
+
+        it('User should be able to select multiple alternate answer options in the dropzone level alternate answer popup', () => {
+            fillInTheGapsDragAndDropPage.steps.selectAlternateAnswerInAlternateAnswerPopup(['Leaves', 'Roots']);
+        });
+
+        it('\'Save\' and \'Cancel\' button should be displayed in the popup', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.alternateAnswerPopupCancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.alternateAnswerPopupCancelButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.alternateAnswerPopupSaveButton(), 'Save');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.alternateAnswerPopupSaveButton(), 'visible');
+        });
+
+        it('When the user clicks on \'Cancel\' button, then popup should be closed and the changes made by the user should not be saved', () => {
+            fillInTheGapsDragAndDropPage.steps.CancelDropzoneAlternateAnswersPopup();
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.alternateAnswerPopup(), 'notExist');
+        });
+
+        it('When the user has selected alternate options in the popup and clicks on \'Save\' button, then popup should be closed and the number of selected alternate options should be displayed beside the \'Add alternate\' button in the format \'# selected\'', () => {
+            fillInTheGapsDragAndDropPage.steps.clickOnAddAlternateButton(0);
+            fillInTheGapsDragAndDropPage.steps.selectAlternateAnswerInAlternateAnswerPopup(['Leaves']);
+            fillInTheGapsDragAndDropPage.steps.saveSelectedAlternateAnswers();
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.selectedAlternateAnswerCountSpecifyCorrectAnswer(), '1 selected');
+        });
+
+        it('User should be able to change the selected alternate options and the number of selected alternate options should be updated accordingly', () => {
+            fillInTheGapsDragAndDropPage.steps.clickOnAddAlternateButton(0);
+            fillInTheGapsDragAndDropPage.steps.selectAlternateAnswerInAlternateAnswerPopup(['Roots']);
+            fillInTheGapsDragAndDropPage.steps.saveSelectedAlternateAnswers();
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.selectedAlternateAnswerCountSpecifyCorrectAnswer(), '2 selected');
+        });
+
+        it('CSS of dropzone level alternate answer popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.selectedAlternateAnswerCountSpecifyCorrectAnswer(), {
+                'color': css.color.alternateAnswerCount,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            fillInTheGapsDragAndDropPage.steps.clickOnAddAlternateButton(0);
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.alternateAnswerPopupTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.alternateAnswerPopupHelpText(), {
+                'color': css.color.helperText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.normal,
+                'font-style': 'italic'
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.alternateAnswerPopupOptions().eq(0), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.alternateAnswerPopupOptions().eq(2), {
+                'color': css.color.unselectedOptionText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `1px solid ${css.color.draggableOptionBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.alternateAnswerPopupCancelButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.alternateAnswerPopupSaveButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of dropzone level alternate answer popup', { tags: 'css' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.alternateAnswerPopup());
+        });
+
+        it('When user opens the alternate answer popup for another dropzone, then alternate answer popup with the title and options as per the corresponding dropzone should be displayed', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Leaves': 1 });
+            fillInTheGapsDragAndDropPage.steps.clickOnAddAlternateButton(1);
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.alternateAnswerPopupTitle(), 'Dropzone 2 alternate answer(s)');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.alternateAnswerPopupHelpText(), 'Select alternate answer(s).');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAlternateAnswerPopupOptions(['Petals', 'Roots', 'Stem']);
+            cy.log('Post-step: Close the alternate answers popup');
+            fillInTheGapsDragAndDropPage.steps.CancelDropzoneAlternateAnswersPopup();
+        });
+
+        it('When user removes the option from the dropzone, then the add alternate button should be disabled again', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
+            utilities.verifyElementDisabled(utilities.getNthElement(fillInTheGapsDragAndDropPage.addAlternateButtonSpecifyCorrectAnswer(), 0));
+            utilities.verifyElementNotDisabled(utilities.getNthElement(fillInTheGapsDragAndDropPage.addAlternateButtonSpecifyCorrectAnswer(), 1));
+        });
+    });
+});