itemengine-cypress-automation 1.0.46 → 1.0.48

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextAdditionalSettings.js

@@ -0,0 +1,450 @@
+import { specialOrMathCharacters } from "../../../fixtures/specialAndMathCharacters";
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+symbolsString = symbolsString.join('');
+
+describe('Fill In the gaps over image - text - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: Placeholder text - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Advanced settings for all response areas\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.advanceSettingsforAllResponseAreasLabel(), 'Advanced settings for all response areas');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.advanceSettingsforAllResponseAreasLabel(), 'visible');
+        });
+
+        it('\'Placeholder text\' label and input field should be displayed and by default, the input field should be empty', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.placeholderTextLabel(), 'Placeholder text');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.placeholderTextLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.placeholderTextInputField(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderTextInputFieldValue('');
+        });
+
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the set correct answer response field', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseFieldNotExists(0);
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the set correct answer response field', () => {
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldPlaceholderTextGlobal('Enter response');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseField(0, 'Enter response');
+        });
+
+        //Note: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.responseFieldSetCorrectAnswerSection().parents('.response-input-field'));
+        });
+
+        it('When the user starts typing in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the set correct answer section response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseFieldNotExists(0);
+            fillInTheGapsOverImageTextPage.steps.clearResponseFieldSetCorrectAnswerSection(0);
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseField(0, 'Enter response');
+        });
+
+        it('When the user clears the placeholder text input field, the placeholder text should get removed from the set correct answer section response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.clearPlaceholderTextInputFieldGlobal();
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseFieldNotExists(0);
+        });
+
+        it('CSS of \'Placeholder text\' label and input field', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.placeholderTextLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.placeholderTextInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: Placeholder text - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the preview tab response field', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseFieldNotExists(0);
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the preview tab response field', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldPlaceholderTextGlobal('Enter response');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseField(0, 'Enter response');
+        });
+
+        //Note: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.responseFieldPreviewTab().parents('.response-input-field'));
+        });
+
+        it('When the user starts typing in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, 'Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseFieldNotExists(0);
+            fillInTheGapsOverImageTextPage.steps.clearResponseFieldPreviewTab(0);
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseField(0, 'Enter response');
+        });
+
+        it('When the user clears the placeholder text input field, the placeholder text should get removed from the preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clearPlaceholderTextInputFieldGlobal();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseFieldNotExists(0);
+        });
+    });
+
+    describe('Additional settings: Type of answer input - Contents and set correct answer section', () => {
+        const typeOfAnswerInputs = ['Text', 'Number'];
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Type of answer input\' label and dropdown should be displayed and in \'Type of answer input\' dropdown \'Text\' option should be selected by default', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.typeOfAnswerInputLabel(), 'Type of answer input');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.typeOfAnswerInputLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.typeOfAnswerInputDropdown(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.typeOfAnswerInputDropdown(), 'Text');
+        });
+
+        it('CSS of \'Type of answer input\' dropdown in default state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.typeOfAnswerInputDropdown(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.defaultDropdownBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.typeOfAnswerInputDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            fillInTheGapsOverImageTextPage.typeOfAnswerInputDropdown()
+                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
+        });
+
+        it(`Clicking on \'Type of answer input\' dropdown should open a list of 2 options - ${typeOfAnswerInputs}`, () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnTypeOfAnswerDropdown();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.dropdownList(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyTypeOfAnswerDropdownOptions(typeOfAnswerInputs);
+        });
+
+        it('CSS of \'Type of answer input\' dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.typeOfAnswerInputDropdownListOptions().eq(0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.typeOfAnswerInputDropdownListOptions().eq(1), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of \'Type of answer input\' dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.dropdownList());
+        });
+
+        it('When \'Text\' option is set in the dropdown, then user should be able to add alpha-numeric characters in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, '1 Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, '1 Flower');
+        });
+
+        it('When the user selects \'Number\' option from the dropdown, the previously added text should get removed from the set correct answer section response field and the user should be able to add only numeric characters in the set correct answer response field', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnTypeOfAnswerDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectTypeOfAnswerDropdownOption('Number');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, '');
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, '1 Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, '1');
+        });
+    });
+
+    describe('Additional settings: Type of answer input - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Text\' option is set in the dropdown, then user should be able to add alpha-numeric characters in preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, '1 Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, '1 Flower');
+        });
+
+        it('When the user selects \'Number\' option from the dropdown then the user should be able to add only numeric characters in the preview tab input field', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clickOnTypeOfAnswerDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectTypeOfAnswerDropdownOption('Number');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, '1 Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, '1');
+        });
+    });
+
+    describe('Additional settings: Set character limit - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Set character limit\' label and input field should be displayed and in \'Set character limit\' input field the default value should be \'20\'', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.setCharacterLimitLabel(), 'Set character limit');
+            fillInTheGapsOverImageTextPage.steps.verifySetCharacterLimitInputFieldValue(20);
+        });
+
+        it('User should not be able to add characters more than the default \'Set character limit\' value in the Set correct answer response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'This is a marigold flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, 'This is a marigold f');
+        });
+
+        it('When the user removes the default set characters limit then user should be able to enter more than \'20\' characters', () => {
+            fillInTheGapsOverImageTextPage.steps.clearSetCharacterLimitInputField();
+            fillInTheGapsOverImageTextPage.steps.clearResponseFieldSetCorrectAnswerSection(0);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'This is a marigold flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, 'This is a marigold flower');
+        });
+
+        it('When the user tries to enter a response using Enter key in the response fields then the user should not be able to do so and should be able to enter the specified number of characters only for the set correct answer section response field', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'This {enter}f{enter}l{enter}o{enter}we{enter}r{enter}');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, 'This flower');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/547505
+        it('User should not be able to Set character limit value below 1', () => {
+            fillInTheGapsOverImageTextPage.steps.setCharacterLimit(0);
+            fillInTheGapsOverImageTextPage.steps.verifySetCharacterLimitInputFieldMinimumValue();
+        });
+
+        it('The user should be able to update the set character limit, after updating the character limit value, user should not be able to add characters more than the set value in the set correct answer section response field', () => {
+            fillInTheGapsOverImageTextPage.steps.setCharacterLimit(45);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'This is a marigold flower with 6 petals and four leaves and a branch');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, 'This is a marigold flower with 6 petals and f');
+        });
+
+        it('CSS of \'Set character limit\' label and input field', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.setCharacterLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.setCharacterLimitInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: Set character limit - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('User should not be able to add characters more than the default \'Set character limit\' value in the preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, 'This is a marigold flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, 'This is a marigold f');
+        });
+
+        it('When the user removes the default set characters limit then user should be able to enter more than \'20\' characters', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clearSetCharacterLimitInputField();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, 'This is a marigold flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, 'This is a marigold flower');
+        });
+
+        it('When the user tries to enter a response using Enter key in the response fields then the user should not be able to do so and should be able to enter the specified number of characters only for the preview tab response field', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, 'This {enter}f{enter}l{enter}o{enter}we{enter}r{enter}');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, 'This flower');
+        });
+
+        it('The user should be able to update the set character limit, after updating the character limit value, user should not be able to add characters more than the set value in the preview tab response field', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setCharacterLimit(45);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, 'This is a marigold flower with 6 petals and four leaves and a branch');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, 'This is a marigold flower with 6 petals and f');
+        });
+    });
+
+    describe('Additional settings: Height and Width - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Height (px)\' and \'Width (px)\' labels and input fields should be displayed and by default, the input fields should be empty', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.responseFieldHeightLabel(), 'Height (px)');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseFieldHeightLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseFieldHeightInputField(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyAdditionalSettingsHeightInputFieldValue('');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.responseFieldWidthLabel(), 'Width (px)');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseFieldWidthLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseFieldWidthInputField(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyAdditionalSettingsWidthInputFieldValue('');
+        });
+
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response field should be (197x46)px in the \'Set correct answer\' section response field', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldSetCorrectAnswerSection(0, '46px');
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(0, '13.7em');
+        });
+
+        it('When the user adds \'Height\' for the response field then the height of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldHeightGlobal(100);
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldSetCorrectAnswerSection(0, '100px');
+        });
+
+        it('When the user adds \'Width\' for the response field then the Width of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldWidthGlobal(100);
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(0, '100px');
+        });
+
+        it('When the user enters a value below 80px in the \'Width\' input field then the width of the input field should remain 80px in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldWidthGlobal(20);
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(0, '80px');
+        });
+
+        it('When the user enters a value above 400px in the \'Width\' input field then the width of the input field should remain 400px in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldWidthGlobal(800);
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(0, '400px');
+        });
+
+        it('CSS of \'Height (px)\' and \'Width (px)\' labels and input fields', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.heightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.heightInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.widthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.widthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: Height and Width - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response field should be (197x46)px for the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldPreviewTab(0, '46px');
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldPreviewTab(0, '13.7em');
+        });
+
+        it('When the user adds \'Height\' for the response field then the height of the response field should get updated accordingly in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldHeightGlobal(100);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldPreviewTab(0, '100px');
+        });
+
+        it('When the user adds \'Width\' for the response field then the response fields should get updated accordingly in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldWidthGlobal(100);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldPreviewTab(0, '100px');
+        });
+
+        it('When the user enters a value below 80px in the \'Width\' input field then the input field should remain 80px for the preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldWidthGlobal(20);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldPreviewTab(0, '80px');
+        });
+
+        it('When the user enters a value above 400px in the \'Width\' input field then the input field should remain 400px for preview tab response field', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldWidthGlobal(800);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldPreviewTab(0, '400px');
+        });
+    });
+});