itemengine-cypress-automation 1.0.573-IEI-7080-f70315e.0 → 1.0.573-IEI-7065-Improve-test-coverage-for-essay-response-c25d1ee.0

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

@@ -1,7 +1,8 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const fontSizes = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
+let itemReferenceID = "";
 
 describe('Fill In the gaps over image with text - Additional settings', () => {
     before(() => {
@@ -15,6 +16,15 @@ describe('Fill In the gaps over image with text - Additional settings', () => {
         });
 
         fillInTheGapsOverImageTextPage.tests.verifyAdditionalSettingsAccordionProperties();
+
+        it('When the user expands the Additional settings accordion make some changes and collapse and re-expand it, the changes should persist', () => {
+            fillInTheGapsOverImageTextPage.steps.checkCustomizePlaceholderTextCheckbox();
+            fillInTheGapsOverImageTextPage.steps.selectEnumerationType('without enumeration');
+            fillInTheGapsOverImageTextPage.steps.collapsedAdditionalSettings();
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+            fillInTheGapsOverImageTextPage.steps.verifyWithoutEnumerationRadioButtonCheckedState();
+            fillInTheGapsOverImageTextPage.steps.verifyCustomizePlaceholderTextCheckboxChecked();
+        });
     });
 
     describe('Additional settings: Font size - Contents in edit tab', () => {
@@ -73,7 +83,7 @@ describe('Fill In the gaps over image with text - Additional settings', () => {
             });
         });
     });
-    
+
     describe('Additional settings: Accessibility section', () => {
         abortEarlySetup();
         before(() => {
@@ -95,4 +105,29 @@ describe('Fill In the gaps over image with text - Additional settings', () => {
 
         fillInTheGapsOverImageTextPage.tests.verifyDetailsSection();
     });
+
+    describe('Additional settings: Details section Grading view', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addTextInQuestionInstructionsInputField('Navigating to fill in the gaps over image with text');
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+            fillInTheGapsOverImageTextPage.steps.enterTextInTeacherGuidelinesInputField('Teacher scoring guidelines');
+            fillInTheGapsOverImageTextPage.steps.enterTextInSampleAnswerInputField('Sample answer');
+            fillInTheGapsOverImageTextPage.steps.enterTextInAcknowledgementsInputField('Acknowledgements');
+        });
+
+        it('When the user navigates to the grading view, the Details section information should be displayed correctly', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+            fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+            utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+            cy.wrap(itemPreviewPage.steps.getItemReferenceID()).then((referenceId) => {
+                itemReferenceID = referenceId;
+                cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                fillInTheGapsOverImageTextPage.steps.verifyTeacherGuidelinesLabelInGradingView('Teacher Guidelines');
+                fillInTheGapsOverImageTextPage.steps.verifyTeacherGuidelinesDescriptionInGradingView('Teacher scoring guidelines');
+            });
+        });
+    });
 });

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

@@ -1,4 +1,4 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage, dialogBoxBase } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const enumerationOptions = {
@@ -9,6 +9,9 @@ const enumerationOptions = {
     'Roman numeral (lowercase)': ['i', 'ii'],
 };
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Grading view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Fill In the gaps over image with text - Additional settings : Placeholder text, Grading view, ARIA label for text containers', () => {
     before(() => {
@@ -110,7 +113,7 @@ describe('Fill In the gaps over image with text - Additional settings : Placehol
             fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
             fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }]);
             fillInTheGapsOverImageTextPage.steps.allotPoints(20);
-             //fillInTheGapsOverImageTextPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            //fillInTheGapsOverImageTextPage.steps.checkAllowStudentToCheckAnswerCheckbox();
             fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
         });
 
@@ -154,12 +157,11 @@ describe('Fill In the gaps over image with text - Additional settings : Placehol
                         'font-weight': css.fontWeight.regular
                     });
                     utilities.verifyCSS(fillInTheGapsOverImageTextPage.correctAnswerResponseWrapperWithoutEnumeration().parents('.response-input-field'), {
-                        'border': `1px solid ${css.color.correctAnswer}`
+                        'border': `1px solid ${css.color.primaryBtnBg}`
                     });
                 })
         });
 
-        
         it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
             cy.checkAccessibility(fillInTheGapsOverImageTextPage.correctAnswerSectionWithoutEnumerationWrapper().parents('[class*="question-preview-wrapper"]'));
         });
@@ -248,4 +250,70 @@ describe('Fill In the gaps over image with text - Additional settings : Placehol
             fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(1, 'Add answer for response 2');
         });
     });
+
+    views.forEach((view) => {
+        describe(`${view}: Additional Settings: Grading view style with numeration`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(2);
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(30);
+                        fillInTheGapsOverImageTextPage.steps.allotPoints(20);
+                        fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }]);
+                        fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+                        fillInTheGapsOverImageTextPage.steps.selectIdentifierToggleButton('Alphabet (uppercase)');
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            if (view === 'Grading view') {
+                it(`When the user selected with numeration radio button, then the numeration should be displayed in the answer input fields in the ${view}`, () => {
+                    fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldEnumeration(['A', 'B']);
+                });
+            }
+
+            if (view === 'Item preview' || view === 'Question preview') {
+                it(`When the user selected with numeration radio button, then the numeration should be displayed in the answer input fields as well as correct answer options in the correct answer section in the ${view}`, () => {
+                    fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldEnumeration(['A', 'B']);
+                    fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesEnumeration(['A', 'B']);
+                });
+            }
+        });
+    });
 });

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

@@ -72,6 +72,12 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
 
         fillInTheGapsOverImageTextPage.tests.verifyInsertTextTooltip();
 
+        it('When user insert text container, then it should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(50);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.undoAction();
+        });
+
         fillInTheGapsOverImageTextPage.tests.verifyUndoRedoClearAllButtons();
     });
 
@@ -217,7 +223,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
                 'border': `1px solid ${css.color.activeComponentBorder}`
             });
             utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageTextPage.responseArea(), 0), {
-                'border': `1px dashed ${css.color.activeComponentBorder}`
+                'border': `1px solid ${css.color.activeComponentBorder}`
             });
         });
 
@@ -410,4 +416,16 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
 
         fillInTheGapsOverImageTextPage.tests.verifyImageNotExistPreviewTab();
     });
+
+    describe('Print layout settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyPrintLayoutSettingsAccordionProperties();
+
+        fillInTheGapsOverImageTextPage.tests.verifyPrintLayoutSettingsAccordionContents();
+    });
 });

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

@@ -1,7 +1,10 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Create Item page - Fill in the gaps over image - text: ', () => {
     before(() => {
@@ -67,4 +70,56 @@ describe('Create Item page - Fill in the gaps over image - text: ', () => {
             fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Flower232&*' }]);
         });
     });
+
+    views.forEach((view) => {
+        describe(`${view}: Accepted student input`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(50);
+                        fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(0, 'Number');
+                        fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(1, 'Integer');
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`When the user try to insert text in the response field  where the accepted student input type set to number , then it should show a warning message in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }]);
+                utilities.verifyInnerText(fillInTheGapsOverImageTextPage.limitReachedWarningMessageContainer(), 'Only number can be typed.');
+            });
+        });
+    });
 });

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

@@ -1,6 +1,10 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Create item page - Fill in the gaps over image with text: Set limit section', () => {
     before(() => {
@@ -49,7 +53,7 @@ describe('Create item page - Fill in the gaps over image with text: Set limit se
 
         //Uncomment below code once https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMaximumCharacterLimitWarningConditionsSpecifyCorrectAnswerSection();
-        
+
         //Uncomment below code once https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMinimumCharacterLimitWarningConditionsSpecifyCorrectAnswerSection();
     });
@@ -79,11 +83,61 @@ describe('Create item page - Fill in the gaps over image with text: Set limit se
         it('User should able to enter characters in the response field', () => {
             fillInTheGapsOverImageTextPage.steps.addTextInAnswerInputFieldsPreviewTab(0, 'Flower');
         });
-        
+
         //Uncomment below code oncee https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMaximumCharacterLimitWarningConditionsPreviewTab();
 
         //Uncomment below code once https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMinimumCharacterLimitWarningConditionsPreviewTab();
     });
+
+    views.forEach((view) => {
+        describe(`${view}: Student view settings`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.setMaximumLimit(30)
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`When the user sets the maximum character limit for the response field, it should be reflected in the ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimitInPreviewTab(0, 30);
+            });
+        });
+    });
 });

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

@@ -82,21 +82,21 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
 
         it('CSS of special characters section', { tags: 'css' }, () => {
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersLabel(), {
-                'color': css.color.labels,
+                'color': css.color.codeBlockText,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.semibold
             });
             //checked state of enable special characters checkbox
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.enableSpecialCharactersCheckbox().find('rect').eq(1), {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.enableSpecialCharactersCheckboxWrapper().find('svg g g').eq(0), {
                 'fill': css.color.activeButtons
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.groupByLanguageLabel(), {
-                'color': css.color.labels,
+                'color': css.color.labelText,
                 'font-size': css.fontSize.normal,
                 'font-weight': css.fontWeight.regular
             });
             //selected state of radio button
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.showOnlyCustomSpecialCharactersRadioButton().find('svg'), {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.showOnlyCustomSpecialCharactersRadioButtonWrapper().find('svg'), {
                 'fill': css.color.activeButtons
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersLabel(), {
@@ -109,7 +109,7 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular
             });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersInputField().find('fieldset'), {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersInputFieldWrapper().find('fieldset'), {
                 'border': `1px solid ${css.color.figDefaultComponentBorder}`
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.customizeSpecialCharactersPreviewButton(), {
@@ -150,13 +150,10 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
             });
             //Category tiles in de-selected state
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileIcon().eq(0).find('svg'), {
-                'fill': css.color.secondaryBtn
-            });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
-                'fill': css.color.secondaryBtn
+                'fill': css.color.optionColor
             });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
-                'fill': css.color.defaultBackground
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).find('svg'), {
+                'fill': css.color.optionColor
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileCategoryName().eq(0), {
                 'color': css.color.secondaryBtn,
@@ -172,18 +169,18 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
             utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
                 'color': css.color.flyoutTitle,
                 'font-size': css.fontSize.heading,
-                'font-weight': css.fontWeight.bold
+                'font-weight': css.fontWeight.semibold
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupCategoryLabel().eq(0), {
                 'color': css.color.accordionLabel,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.semibold
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupCategoryAccordionExpandIcon().last().find('svg'), {
                 'fill': css.color.activeButtons
             });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupSymbol().eq(0).find('svg'), {
-                'fill': css.color.defaultBackground
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupSymbol().eq(0).find('svg path'), {
+                'fill': css.color.activeButtons
             });
         });
 
@@ -191,10 +188,10 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
             cy.checkAccessibility(dialogBoxBase.dialogBox());
             cy.log('Closing preview popup');
             dialogBoxBase.steps.closeWarningPopup();
-            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel().parent());
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel());
             cy.log('Selecting show only custom special characters radio button');
             fillInTheGapsOverImageTextPage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
-            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel().parent());
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.customSpecialCharactersInputFieldWrapper());
         });
     });
 

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

@@ -1,7 +1,10 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Create Item page - drag and drop into categories: Student view settings', () => {
     before(() => {
@@ -34,6 +37,56 @@ describe('Create Item page - drag and drop into categories: Student view setting
         fillInTheGapsOverImageTextPage.tests.verifySpellCheckFunctionalityPreviewTab();
     });
 
+    views.forEach((view) => {
+        describe(`${view}: Student view settings`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.checkSpellCheckCheckbox();
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in the preview tab', () => {
+                fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldPreviewTabEnabled(0);
+            });
+        });
+    });
+
     /*describe('Allow students to check answer: Edit tab', () => {
         abortEarlySetup();
         before(() => {

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

@@ -399,6 +399,18 @@ describe('Create Item page - Fill in the gaps over image with text: Style and la
             fillInTheGapsOverImageTextPage.steps.verifyResponseAreaDimensions(30, 118);
         });
 
+        it('User should only be able to enter numeric values in the \'Height (px)\' and \'Width (px)\' input fields', () => {
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('1*2');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('2%1');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('12', '21');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('apple');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('news');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('', '');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('54!@');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('@12');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('54', '12');
+        });
+
         it('When the user specifies the height and width, the dimensions of the text containers should update accordingly', () => {
             fillInTheGapsOverImageTextPage.steps.setTextContainerHeight(100);
             fillInTheGapsOverImageTextPage.steps.setTextContainerWidth(200);