itemengine-cypress-automation 1.0.143-migrationScripts-d059d60.0 → 1.0.144-21MatchRepoUpdate-0ab2c79.0

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdownNew/minimumScoringPenaltyPointsAndRoundingDropdown.js

@@ -0,0 +1,194 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const penaltyScoringTypeArray = ['No penalty points', 'Penalty points for the entire question', 'Penalty points for each incorrect dropdown'];
+
+describe('Create item page - Fill in the gaps over image - dropdown: Minimum scoring, Penalty scoring, Rounding - Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Scoring section: Minimum scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(10);
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyMinimumScoringDropdown();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyMinimumPointsLabelAndInputField();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyMinimumPointsFieldErrorState();
+    });
+
+    describe('Scoring section: Penalty scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(10);
+            fillInTheGapsOverImageDropdownPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPenaltyScoringDropdown(penaltyScoringTypeArray);
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPenaltyPointsLabelAndInputField();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPenaltyPointsErrorState();
+
+        it('When the user selects \'Penalty points for each incorrect dropdown\' from the penalty scoring dropdown, \'Automatically set penalty for each incorrect dropdown to total points / no. of incorrect dropdowns\' label and checkbox should be displayed, by default the checkbox should be unchecked. Two radio buttons with labels - \'Specify total penalty points\' and \'Specify points for each incorrect dropdown\' should be displayed. By default, \'Specify total penalty points\' radio button should be checked', () => {
+            fillInTheGapsOverImageDropdownPage.steps.expandPenaltyScoringDropdown();
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromPenaltyScoringDropdown('Penalty points for each incorrect dropdown');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.automaticallySetPenaltyPointsCheckboxLabel(), 'Automatically set penalty for each incorrect dropdown to total points / no. of incorrect dropdowns');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.specifyTotalPenaltyPointsRadioButtonLabel(), 'Specify total penalty points');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.specifyPointsForEachIncorrectOptionRadioButtonLabel(), 'Specify points for each incorrect dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.verifyAutomaticallySetPenaltyPointsCheckboxUncheckedState();
+            fillInTheGapsOverImageDropdownPage.steps.verifySpecifyTotalPenaltyPointsRadioButtonCheckedState();
+            fillInTheGapsOverImageDropdownPage.steps.verifySpecifyPointsForEachIncorrectOptionRadioButtonUncheckedState();
+        });
+
+        it('When \'Specify total penalty points\' is selected, a penalty points detail section with \'Total penalty points\' label and empty input field, \'Penalty points for each incorrect dropdown: -\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionInputFieldLabel(), 'Total penalty points');
+            fillInTheGapsOverImageDropdownPage.steps.verifyTotalPenaltyPointsValue('');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionAllottedPointsLabel(), 'Penalty points for each incorrect dropdown: -');
+        });
+
+        it('When the user allots total penalty points, then \'points for each incorrect dropdown\' should get updated as per the count of incorrect options available', () => {
+            fillInTheGapsOverImageDropdownPage.steps.allotTotalPenaltyPoints(5);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPenaltyPointsForEachIncorrectDropdown(2.5);
+        });
+
+        it('When the user adds a new option, then \'points for each incorrect dropdown\' should get updated accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPenaltyPointsForEachIncorrectDropdown(1.67);
+        });
+
+        it('When the user deletes an option, then \'points for each incorrect dropdown\' should get updated accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.removeResponseArea(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPenaltyPointsForEachIncorrectDropdown(2.5);
+        });
+
+        it('CSS of the penalty points section - Total penalty points', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.automaticallySetPenaltyPointsCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.automaticallySetPenaltyPointsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.specifyTotalPenaltyPointsRadioButton().parent().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.specifyPointsForEachIncorrectOptionRadioButton().parent().find('svg path'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.specifyTotalPenaltyPointsRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.specifyPointsForEachIncorrectOptionRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionInputFieldLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.totalPenaltyPointsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionAllottedPointsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of the penalty points section - Total penalty points', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.automaticallySetPenaltyPointsCheckboxLabel().parents('.penalty-score-for-each-incorrect-wrapper'));
+        });
+
+        it('When the user selects \'Specify points for each incorrect answer\', a penalty points detail section with \'Penalty points for each incorrect dropdown:\' label and empty input field, \'Total penalty points: -\' label should be displayed', () => {
+            cy.log('Pre-step: Clearing the total penalty points input field')
+            fillInTheGapsOverImageDropdownPage.steps.clearTotalPenaltyPointsInputField();
+            fillInTheGapsOverImageDropdownPage.steps.selectPenaltyPointsForEachIncorrectOptionType('Specify points for each incorrect option');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionInputFieldLabel(), 'Penalty points for each incorrect dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPenaltyPointsForEachIncorrectDropdownValue('');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionAllottedPointsLabel(), 'Total penalty points: -');
+        });
+
+        it('When the user allots Penalty points for each incorrect dropdown, then \'Total penalty points\' should get updated as per the count of incorrect options available', () => {
+            fillInTheGapsOverImageDropdownPage.steps.allotPenaltyPointsForEachIncorrectDropdown(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyTotalPenaltyPoints(2);
+        });
+
+        it('When the user adds a new option, then \'Total penalty points\' should get updated accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea();
+            fillInTheGapsOverImageDropdownPage.steps.verifyTotalPenaltyPoints(3);
+        });
+
+        it('When the user deletes an option, then \'points for each incorrect dropdown\' should get updated accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.removeResponseArea(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyTotalPenaltyPoints(2);
+        });
+
+        it('CSS of the penalty points section - Penalty points for each incorrect dropdown', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionInputFieldLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.penaltyPointsForEachIncorrectDropdownInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionAllottedPointsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of the penalty points section - Penalty points for each incorrect dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.automaticallySetPenaltyPointsCheckboxLabel().parents('.penalty-score-for-each-incorrect-wrapper'));
+        });
+
+        it('When the user switches to the \'Specify total penalty points\' option, the total penalty points input field should be filled as per the total penalty points in \'Specify points for each incorrect dropdown\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectPenaltyPointsForEachIncorrectOptionType('Specify total penalty points');
+            fillInTheGapsOverImageDropdownPage.steps.verifyTotalPenaltyPointsValue(2);
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionAllottedPointsLabel(), 'Penalty points for each incorrect dropdown: 1');
+        });
+
+        it('When the user checks the \'Automatically set penalty for each incorrect dropdown to total points / no. of incorrect dropdowns\' checkbox, both radio buttons should get disabled, \'Specify points for each incorrect dropdown\' should get checked, in the penalty points details section, \'Penalty points for each incorrect dropdown: #\' and \'Total penalty points: #\' should be displayed as per the alloted points and available incorrect options', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkAutomaticallySetPenaltyPointsCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifySpecifyTotalPenaltyPointsDisabledState();
+            fillInTheGapsOverImageDropdownPage.steps.verifySpecifyPointsForEachIncorrectOptionRadioButtonSelectedAndDisabledState();
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionAllottedPointsLabel(), 0), 'Penalty points for each incorrect dropdown: 5');
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.penaltyPointsDetailsSectionAllottedPointsLabel(), 1), 'Total penalty points: 10');
+        });
+    });
+
+    describe('Scoring section: Rounding - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(10);
+            fillInTheGapsOverImageDropdownPage.steps.selectAutoScoredScoringSubtype('Partial equal weights')
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyRoundingDropdown();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyRoundNegativeScoreToZeroLabelAndCheckbox();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdownNew/supportedFileTypes.js

@@ -0,0 +1,49 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create item page - Fill in the gaps over image with dropdown: Supported file types', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Supported file types functionality: device popup', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        const supportedFormatFiles = {
+            'jpg': 'highlightImage.jpg',
+            'jpeg': 'sample.jpeg',
+            'png': 'image.png',
+            'gif': 'sample.gif',
+            'svg': 'sample.svg'
+        };
+
+        Object.keys(supportedFormatFiles).forEach((fileType) => {
+            it(`User should be able to upload ${fileType} file in the image section using link text \'device\' and it should be displayed in the \'Image\' section and \'Preview tab\'`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.uploadFile(supportedFormatFiles[fileType]);
+                fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+                fillInTheGapsOverImageDropdownPage.steps.verifyUploadedImageFormatInBackgroundImageSection(fileType);
+                cy.log('Checking in preview tab')
+                fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.canvasImageInPreviewTab(), 'visible');
+                fillInTheGapsOverImageDropdownPage.steps.verifyUploadedImageFormatInPreviewTab(fileType);
+                cy.log('Post step: Delete the image')
+                fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+                fillInTheGapsOverImageDropdownPage.steps.deleteImage();
+                fillInTheGapsOverImageDropdownPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+            });
+        });
+
+        it('When the user tries to uploads an image with unsupported file type, then an error message, "Error: The file type is not supported. Please upload a file with the following supported formats: JPG, PNG, GIF, SVG.", should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('sample.heic');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.errorMessage(), 'Error: The file type is not supported. Please upload a file with the following supported formats: JPG, PNG, GIF, SVG.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.errorMessage(), 'visible');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyErrorMessageCSSAndA11y();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/additionalSettingsBasic.js

@@ -17,6 +17,16 @@ describe('Fill In the gaps over image with text - Additional settings', () => {
         fillInTheGapsOverImageTextPage.tests.verifyAdditionalSettingsAccordionProperties();
     });
 
+    describe('Additional settings: Font size - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyFontSizeSectionContents();
+    });
+
     describe('Additional settings: Font size - functionality in preview tab', () => {
         abortEarlySetup();
         before(() => {
@@ -53,16 +63,31 @@ describe('Fill In the gaps over image with text - Additional settings', () => {
                 utilities.verifyCSS(fillInTheGapsOverImageTextPage.correctAnswerResponse(), {
                     'font-size': fontSizes[option]
                 });
+                utilities.verifyCSS(fillInTheGapsOverImageTextPage.correctIncorrectStatusMessageText(), {
+                    'font-size': fontSizes[option]
+                });
                 fillInTheGapsOverImageTextPage.steps.switchToStudentView();
                 fillInTheGapsOverImageTextPage.steps.switchToEditTab();
             });
         });
     });
+    
+    describe('Additional settings: Accessibility section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyAdditionalSettingsAccessibilitySection();
+    });
 
     describe('Additional settings: Details section', () => {
         abortEarlySetup();
         before(() => {
             fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
         });
 

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/additionalSettingsForAnswerInputFields.js

@@ -0,0 +1,251 @@
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const enumerationOptions = {
+    'Numerical': ['1', '2'],
+    'Alphabet (uppercase)': ['A', 'B'],
+    'Alphabet (lowercase)': ['a', 'b'],
+    'Roman numeral (uppercase)': ['I', 'II'],
+    'Roman numeral (lowercase)': ['i', 'ii'],
+};
+const css = Cypress.env('css');
+
+describe('Fill In the gaps over image with text - Additional settings : Placeholder text, Grading view, ARIA label for text containers', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: Placeholder text - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(30);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyPlaceholderTextSectionContents('text containers');
+
+        it('When the user checks the "Customize placeholder text for individual text containers" checkbox, "Placeholder text for text containers" label and two input fields for individual text containers should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.checkCustomizePlaceholderTextCheckbox();
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.individualPlaceholderTextInputField(), 2);
+            fillInTheGapsOverImageTextPage.steps.verifyIndividualPlaceholderTextInputFields(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIndividualPlaceholderTextInputFields(1);
+        });
+
+        it('When the users adds a new text container, the count of the placeholder text input fields should update accordingly', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea();
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.individualPlaceholderTextInputField(), 3);
+            fillInTheGapsOverImageTextPage.steps.verifyIndividualPlaceholderTextInputFields(2);
+        });
+
+        it('When the user deletes any text container, the count of the placeholder text input fields should update accordingly', () => {
+            fillInTheGapsOverImageTextPage.steps.removeResponseArea(1);
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.individualPlaceholderTextInputField(), 2);
+            fillInTheGapsOverImageTextPage.steps.verifyIndividualPlaceholderTextInputFields(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIndividualPlaceholderTextInputFields(1);
+        });
+    });
+
+    describe('Additional settings: Placeholder text - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyPlaceholderTextPreviewTabFunctionality();
+
+        fillInTheGapsOverImageTextPage.tests.verifyIndividualPlaceholderTextPreviewTabFunctionality();
+    });
+
+    describe('Additional Settings: Grading view - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyGradingViewEnumerationSectionContents('Text container');
+
+        it('When the user selects "Without enumeration" radio button, the identifiers section should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.selectEnumerationType('without enumeration');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.identifiersLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.numericalToggleButton(), 'notExist');
+        });
+
+        it('When the user selects "With enumeration" radio button again, the identifiers section should appear again', () => {
+            fillInTheGapsOverImageTextPage.steps.selectEnumerationType('with enumeration');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.identifiersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.numericalToggleButton(), 'visible');
+        })
+    });
+
+    describe('Additional settings: Grading view - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsOverImageTextPage.steps.allotPoints(20);
+            fillInTheGapsOverImageTextPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(enumerationOptions).forEach(option => {
+            it(`When "${option}" toggle button is selected in the text container identifiers section, then on switching to the preview tab text container numeration should not be displayed`, () => {
+                fillInTheGapsOverImageTextPage.steps.selectIdentifierToggleButton(option);
+                fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaNumerationNotExists();
+            });
+
+            it('When user clicks on \'Check answer\' button then the numeration should not be displayed in the text containers', () => {
+                fillInTheGapsOverImageTextPage.steps.checkAnswer();
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaNumerationNotExists();
+            });
+
+            it(`When the user switches to the "Grading view", then the "${option}" numeration should be displayed in the answer input fields as well as correct answer options in the correct answer section`, () => {
+                fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldEnumeration(enumerationOptions[option]);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesEnumeration(enumerationOptions[option]);
+                cy.log('Post step: Switch to Edit tab')
+                fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            });
+        });
+
+        it('When the user selects "without enumeration" radio button, then in the "Grading view", numeration should not be displayed for answer input fields and in the correct answer section, the entire question preview should be displayed with correct answers', () => {
+            fillInTheGapsOverImageTextPage.steps.selectEnumerationType('without enumeration');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+            utilities.verifyElementVisibilityState(utilities.getNthElement(fillInTheGapsOverImageTextPage.canvasImageInPreviewTab(), 1), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesWithoutEnumeration(['Flower', 'Leaf']);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaNumerationNotExists();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.correctAnswerResponseNumeration(), 'notExist');
+        });
+
+        it('CSS of correct answer section', { tags: 'css' }, () => {
+            fillInTheGapsOverImageTextPage.correctAnswerSectionWithoutEnumerationWrapper()
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageTextPage.correctAnswerResponseWrapperWithoutEnumeration(), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageTextPage.correctAnswerResponseWrapperWithoutEnumeration().parents('.response-input-field'), {
+                        'border': `1px solid ${css.color.correctAnswer}`
+                    });
+                })
+        });
+
+        
+        it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.correctAnswerSectionWithoutEnumerationWrapper().parents('[class*="question-preview-wrapper"]'));
+        });
+    });
+
+    describe('Additional settings: ARIA label for text containers - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+        });
+
+        it('When the user has not added any text containers, then the "ARIA label for text containers" section should be displayed in the additional settings panel', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.ariaLabelSectionLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.ariaLabelInputField(), 'notExist');
+        });
+
+        it('When the user adds text containers, then the "ARIA label for text containers" section should be displayed in the additional settings panel', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.ariaLabelSectionLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.ariaLabelInputField(), 'visible');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyAriaLabelSectionContents('text containers');
+
+        it('When the users adds a new text container, the count of the aria label text input fields should update accordingly', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(30);
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.ariaLabelInputField(), 3);
+            fillInTheGapsOverImageTextPage.steps.verifyAriaLabelTextInputFields(2);
+        });
+
+        it('When the user deletes any text container, the count of the aria label texts input fields should update accordingly', () => {
+            fillInTheGapsOverImageTextPage.steps.removeResponseArea(1);
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.ariaLabelInputField(), 2);
+            fillInTheGapsOverImageTextPage.steps.verifyAriaLabelTextInputFields(0);
+            fillInTheGapsOverImageTextPage.steps.verifyAriaLabelTextInputFields(1);
+        });
+
+        it('When the user sets aria label, then in the answer input fields of the specify correct answer section, the aria labels should not change', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAriaLabelInputField(0, 'Add answer for response 1');
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldAriaLabelSpecifyCorrectAnswerSection(0, 'Enter answer');
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldAriaLabelSpecifyCorrectAnswerSection(1, 'Enter answer');
+        });
+    });
+
+    describe('Additional settings: ARIA label for text containers - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set \'ARIA label\' input field, then default aria labels should be present for the answer input fields in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(0, 'Add answer for response 1');
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(1, 'Add answer for response 2');
+        });
+
+        it('When the user has set \'ARIA label\', then it should be present for the answer input fields in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAriaLabelInputField(0, 'Correct response 1');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(0, 'Correct response 1');
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(1, 'Add answer for response 2');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default aria labels should be present for the answer input fields in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clearTextInAriaLabelInputField(0);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(0, 'Add answer for response 1');
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(1, 'Add answer for response 2');
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/supportedFileTypes.js

@@ -0,0 +1,49 @@
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create item page - Fill in the gaps over image with text: Supported file types', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Supported file types functionality: device popup', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        const supportedFormatFiles = {
+            'jpg': 'highlightImage.jpg',
+            'jpeg': 'sample.jpeg',
+            'png': 'image.png',
+            'gif': 'sample.gif',
+            'svg': 'sample.svg'
+        };
+
+        Object.keys(supportedFormatFiles).forEach((fileType) => {
+            it(`User should be able to upload ${fileType} file in the image section using link text \'device\' and it should be displayed in the \'Image\' section and \'Preview tab\'`, () => {
+                fillInTheGapsOverImageTextPage.steps.uploadFile(supportedFormatFiles[fileType]);
+                fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                fillInTheGapsOverImageTextPage.steps.verifyUploadedImageFormatInBackgroundImageSection(fileType);
+                cy.log('Checking in preview tab')
+                fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.canvasImageInPreviewTab(), 'visible');
+                fillInTheGapsOverImageTextPage.steps.verifyUploadedImageFormatInPreviewTab(fileType);
+                cy.log('Post step: Delete the image')
+                fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+                fillInTheGapsOverImageTextPage.steps.deleteImage();
+                fillInTheGapsOverImageTextPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+            });
+        });
+
+        it('When the user tries to uploads an image with unsupported file type, then an error message, "Error: The file type is not supported. Please upload a file with the following supported formats: JPG, PNG, GIF, SVG.", should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.uploadFile('sample.heic');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.errorMessage(), 'Error: The file type is not supported. Please upload a file with the following supported formats: JPG, PNG, GIF, SVG.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.errorMessage(), 'visible');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyErrorMessageCSSAndA11y();
+    });;
+});