itemengine-cypress-automation 1.0.47 → 1.0.50

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

@@ -0,0 +1,431 @@
+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');
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/546987, https://redmine.zeuslearning.com/issues/546981
+    describe('Additional settings - \'Advanced settings for individual response area\' section contents', () => {
+        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.expandAdditonalSettings();
+        });
+
+        it('When the user has not added any response container, response accordion should not be displayed', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordionWrapper(), 'notExist');
+        });
+
+        it('When the user adds response container, \'Advanced settings for individual response area\' label along with response accordion should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordionWrapper(), 2);
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.advanceSettingForIndividualResponsesLabel(), 'Advanced settings for individual response area');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.advanceSettingForIndividualResponsesLabel(), 'visible');
+        });
+
+        it('The response accordion should have a label \'Response #\', by default the response accordion should be collapsed and by clicking on the response accordion, user should be able to expand the accordion', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAccordionLabel(0);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAccordionLabel(1);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAccordionCollapsedState(0);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAccordionCollapsedState(1);
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(0);
+        });
+
+        it('\'Placeholder text\' label and input field should be displayed and by default, the input field should be empty', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderTextLabelAndInputFieldResponseAccordion(0);
+        });
+
+        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', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyTypeOfAnswerLabelAndDropdownResponseAccordion(0);
+        });
+
+        it('\'Pointer\' label and dropdown should be displayed and in \'Type of answer input\' dropdown \'Left\' option should be selected by default', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyPointerLabelAndDropdownResponseAccordion(0);
+        });
+
+        it('\'Height (px)\' and \'Width (px)\' labels and input fields should be displayed and by default, the input fields should be empty', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyHeightAndWidthLabelAndInputFieldResponseAccordion(0);
+        });
+
+        //Note: The CSS of labels and response fields are being verified in their respective describes, so not verifying them here again
+
+        it('Accessibility of \'Advanced settings for individual response area\' section contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.responseAccordionWrapper());
+        });
+    });
+
+    describe('Response accordions: Placeholder text - 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.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(1);
+        });
+
+        it('When the user has not set placeholder text in the Response accordion then placeholder should not be displayed in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseFieldNotExists(0);
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseFieldNotExists(1);
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Placeholder text');
+
+        it('When the user has set a placeholder text in either response accordion then a placeholder text should be displayed for the respective response in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Enter response here');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseField(0, 'Enter response here');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseFieldNotExists(1);
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Placeholder text');
+
+        it('CSS of Custom label', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseAccordionCustomLabel(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.medium,
+                'border': `1px solid ${css.color.primaryBtnBorder}`
+            });
+        });
+
+        it('When the user removes the placeholder text from the individual responses, then the placeholder attribute of the response fields should get updated accordingly in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.clearPlaceholderTextInResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseFieldNotExists(0);
+        });
+
+        it('When the user has set placeholder text in the individual response areas, then it should override the placeholder text set in the \'Advanced settings for all response areas\' in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldPlaceholderTextGlobal('Global placeholder');
+            fillInTheGapsOverImageTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Enter response here');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseField(0, 'Enter response here');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseField(1, 'Global placeholder');
+        });
+
+        //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\' in \'Set correct answer\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.responseFieldSetCorrectAnswerSection().parents('.response-input-field'));
+        });
+
+        it('When the user enters text 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', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseFieldNotExists(0);
+            fillInTheGapsOverImageTextPage.steps.clearResponseFieldSetCorrectAnswerSection(0);
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseField(0, 'Enter response here');
+        });
+
+        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.clearPlaceholderTextInResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseFieldNotExists(0);
+        });
+    });
+
+    describe('Response accordions: 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.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(0)
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(1)
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set placeholder text in the Response accordion then placeholder should not be displayed in preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseFieldNotExists(0);
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseFieldNotExists(1);
+        });
+
+        it('When the user has set a placeholder text in either individual response accordion a placeholder text should be displayed for the respective response in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Enter response here');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseField(0, 'Enter response here');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseFieldNotExists(1);
+        });
+
+        it('When the user removes the placeholder text from individual responses the Placeholders should get updated accordingly for both the responses in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clearPlaceholderTextInResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseFieldNotExists(0);
+        });
+
+        it('When the user has set placeholder text in the individual response area, then it should override the placeholder text set in the \'Advanced settings for all response areas\' in the preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldPlaceholderTextGlobal('Global placeholder');
+            fillInTheGapsOverImageTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Enter response here');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseField(0, 'Enter response here');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseField(1, 'Global placeholder');
+        });
+
+        //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\' in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.responseFieldPreviewTab().parents('.response-input-field'))
+        });
+
+        it('When the user enters text in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, 'Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseFieldNotExists(0);
+            fillInTheGapsOverImageTextPage.steps.clearResponseFieldPreviewTab(0);
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseField(0, 'Enter response here');
+        });
+
+        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.clearPlaceholderTextInResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyPlaceholderAttributeInPreviewTabResponseFieldNotExists(0);
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/547573
+    describe('Response accordions: Type of answer input - 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.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Type of answer input');
+
+        it('When the user has set \'Text\' option in the response accordion, then user should be able to enter alpha-numeric characters in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnTypeOfAnswerDropdownInResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.selectTypeOfAnswerDropdownOption('Text');
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'Response 1');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, 'Response 1');
+        });
+
+        it('When the user has set \'Number\' option the response accordion, then user should be able to enter only numeric characters in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnTypeOfAnswerDropdownInResponseAccordion(1);
+            fillInTheGapsOverImageTextPage.steps.selectTypeOfAnswerDropdownOption('Number');
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, 'Response 1');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(1, '1');
+        });
+
+        it('When the user has set \'Number\' option in the \'Advanced settings for all response areas\' then both the options in the Response accordions should change to \'Number\'', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnTypeOfAnswerDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectTypeOfAnswerDropdownOption('Number');
+            fillInTheGapsOverImageTextPage.steps.verifySelectedOptionInTypeOfAnswerDropdownInResponseAccordion(0, 'Number');
+            fillInTheGapsOverImageTextPage.steps.verifySelectedOptionInTypeOfAnswerDropdownInResponseAccordion(1, 'Number');
+        });
+
+        it('When the user has set \'Text\' option in the response accordion then it should override the \'Number\' option set in the \'Advanced settings for all response areas\' and user should be able to enter responses accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnTypeOfAnswerDropdownInResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.selectTypeOfAnswerDropdownOption('Text');
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, '1 Response');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, '1 Response');
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, '1 Response');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(1, '1');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Type of answer input');
+    });
+
+    describe('Response accordions: 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.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(1);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has set \'Text\' option in the response accordion, then user should be able to enter alpha-numeric characters in preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.verifySelectedOptionInTypeOfAnswerDropdownInResponseAccordion(0, 'Text');
+            fillInTheGapsOverImageTextPage.steps.verifySelectedOptionInTypeOfAnswerDropdownInResponseAccordion(1, 'Text');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, '1 Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, '1 Flower');
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, '2 Leaves');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(1, '2 Leaves');
+        });
+
+        it('When the user has set \'Number\' option in the response accordion, then the user should be able to enter only numeric characters in preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clickOnTypeOfAnswerDropdownInResponseAccordion(1);
+            fillInTheGapsOverImageTextPage.steps.selectTypeOfAnswerDropdownOption('Number');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, '1 Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, '1 Flower');
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, '2 Leaves');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(1, '2');
+        });
+
+        it('When the user has set \'Text\' option in the response accordion, then it should override the \'Number\' option set in \'Advanced settings for all response areas\' and user should be able to enter responses accordingly in the preview tab section', () => {
+            cy.log('Pre step: Setting \'Number\' option in \'Advanced settings for all response areas\'')
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clickOnTypeOfAnswerDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectTypeOfAnswerDropdownOption('Number');
+            fillInTheGapsOverImageTextPage.steps.clickOnTypeOfAnswerDropdownInResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.selectTypeOfAnswerDropdownOption('Text');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, '1 Flower');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, '1 Flower');
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, '2 Leaves');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(1, '2');
+        });
+    });
+
+    describe('Response accordions: Height and Width - 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.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(1);
+        });
+
+        it('When the user has not set \'Height\' and \'Width\' for response fields then the default dimension of the response field in the \'Set correct answer\' section response fields should be (197x46)px', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldSetCorrectAnswerSection(0, '46px');
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(0, '13.7em');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Height\' for the response field then the height of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setHeightInResponseAccordion(0, 100);
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldSetCorrectAnswerSection(0, '100px');
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldSetCorrectAnswerSection(1, '46px');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Width\' for the response field then the Width of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setWidthInResponseAccordion(0, 100);
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(0, '100px');
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(1, '13.7em');
+        });
+
+        it('When the user has set width below 80px then the width should remain 80px in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setWidthInResponseAccordion(0, 20);
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(0, '80px');
+        });
+
+        it('When the user has set width above 400px then the width should remain 400px in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setWidthInResponseAccordion(0, 800);
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(0, '400px');
+        });
+
+        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldWidthGlobal(250);
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldHeightGlobal(180);
+            fillInTheGapsOverImageTextPage.steps.setWidthInResponseAccordion(0, 175);
+            fillInTheGapsOverImageTextPage.steps.setHeightInResponseAccordion(0, 120);
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(0, '175px');
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldSetCorrectAnswerSection(0, '120px');
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldSetCorrectAnswerSection(1, '250px');
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldSetCorrectAnswerSection(1, '180px');
+        });
+    });
+
+    describe('Response accordions: 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');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.expandResponseAccordion(1);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set \'Height\' and \'Width\' for the response accordion then the default dimension of the response field in the preview tab response field should be (197x46)px', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldPreviewTab(0, '46px')
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldPreviewTab(0, '13.7em');
+        });
+
+        it('When the user has set \'Height\' for the response field then the height of the preview tab response field should get updated accordingly', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setHeightInResponseAccordion(0, 100);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldPreviewTab(0, '100px');
+        });
+
+        it('When the user has set \'Width\' for the response field then the width of the preview tab response field should get updated accordingly', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setWidthInResponseAccordion(0, 100);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldPreviewTab(0, '100px');
+        });
+
+        it('When the user has set width below 80px then the width of the preview tab response field should remain 80px', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setWidthInResponseAccordion(0, 20);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldPreviewTab(0, '80px');
+        });
+
+        it('When the user has set width above 400px then the width of the preview tab response field should remain 400px', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setWidthInResponseAccordion(0, 800);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldPreviewTab(0, '400px');
+        });
+
+        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' for the preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldWidthGlobal(250);
+            fillInTheGapsOverImageTextPage.steps.setResponseFieldHeightGlobal(180);
+            fillInTheGapsOverImageTextPage.steps.setWidthInResponseAccordion(0, 175);
+            fillInTheGapsOverImageTextPage.steps.setHeightInResponseAccordion(0, 120);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldPreviewTab(0, '175px');
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldPreviewTab(0, '120px');
+            fillInTheGapsOverImageTextPage.steps.verifyWidthResponseFieldPreviewTab(1, '250px');
+            fillInTheGapsOverImageTextPage.steps.verifyHeightResponseFieldPreviewTab(1, '180px');
+        });
+    });
+});