itemengine-cypress-automation 1.0.23 → 1.0.25

package/cypress/e2e/ILC/FillInTheGapsText/fillInTheGapsTextAdditionalSettingsResponseAccordions.js

@@ -0,0 +1,734 @@
+import { fillInTheGapsTextPage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Fill In the Gaps Additional settings: Responses accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings : Response accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyAdditionalSettingsResponseAccordionLabelCSSAndA11y();
+    });
+
+    describe('Response Accordions: ARIA label', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsTextPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsTextPage.tests.verifyDefaultStateOfAriaLabelInputFieldInResponseAccordionAndCSS();
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        //ARIA label test cases for set correct answer section
+        it('When the user has not set \'ARIA label\' input field then the default \'ARIA label\' should be present for the \'Set correct answer\' section response field', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el, count) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${count + 1}`);
+                });
+        });
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('ARIA label');
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the \'Set correct answer\' section response field and for the other response field, value of the aria-label should remain the same', () => {
+            fillInTheGapsTextPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria Label');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('have.attr', 'aria-label', 'Custom Aria Label');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .should('have.attr', 'aria-label', 'Add answer for response 2');
+        });
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelVisibleOnResponseAccordion('ARIA label');
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelOnResponseAccordionCSS();
+
+        it('Accessibility of input field in \'Set correct answer\' section when custom \'ARIA label\' is set and Custom label', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.setCorrectAnswerResponseField().parents('.response-input-field'))
+            cy.checkAccessibility(fillInTheGapsTextPage.responseAccordionCustomLabel())
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response fields in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.ariaLabelInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el, count) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${count + 1}`);
+                });
+        });
+
+        //ARIA label test cases for preview tab
+        //https://redmine.zeuslearning.com/issues/537797
+        it('When the user has not set \'ARIA label\' input field then in the preview tab default \'ARIA label\' should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Preview tab')
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el, count) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${count + 1}`);
+                });
+        });
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria Label');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('have.attr', 'aria-label', 'Custom Aria Label');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .should('have.attr', 'aria-label', 'Add answer for response 2');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.previewTabResponseField().parents('.response-input-field'))
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.ariaLabelInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el, count) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${count + 1}`);
+                });
+        });
+    });
+
+    describe('Response Accordions: Placeholder text', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.steps.expandResponseAccordion(0)
+            fillInTheGapsTextPage.steps.expandResponseAccordion(1)
+        });
+
+        fillInTheGapsTextPage.tests.verifyDefaultStateOfPlaceholderTextInputFieldInResponseAccordionAndCSS();
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        //Placeholder test cases for Set correct answer section
+        it('When the user has not set Placeholder text in the Response accordion then placeholder should not be displayed in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('not.have.attr', 'placeholder');
+                });
+        });
+
+        fillInTheGapsTextPage.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', () => {
+            fillInTheGapsTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Placeholder text');
+
+        it('When the user removes the Placeholder text from the individual responses the Placeholders should get updated accordingly in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.placeholderTextInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('not.have.attr', 'placeholder');
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .type('Global placeholder')
+                .should('have.value', 'Global placeholder');
+            fillInTheGapsTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .should('have.attr', 'placeholder', 'Global placeholder');
+        });
+
+        //Comment: 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(fillInTheGapsTextPage.setCorrectAnswerResponseField().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', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .type('Response')
+                .should('have.value', 'Response')
+                .should('not.have.attr', 'placeholder');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .clear()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+
+        //Placeholder test cases for preview tab
+        it('When the user has not set Placeholder text in the Response accordion then placeholder should not be displayed in preview tab response fields', () => {
+            cy.log('Pre step: Clearing the set Placeholder text')
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.placeholderTextInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('not.have.attr', 'placeholder');
+                });
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .should('not.have.attr', 'placeholder');
+        });
+
+        it('When the user removes the Placeholder text from individual responses the Placeholders should get updated accordingly for both the responses in preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.placeholderTextInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('not.have.attr', 'placeholder');
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .type('Global placeholder')
+                .should('have.value', 'Global placeholder');
+            fillInTheGapsTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .should('have.attr', 'placeholder', 'Global placeholder');
+        });
+
+        //Comment: 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(fillInTheGapsTextPage.previewTabResponseField().parents('.response-input-field'))
+        });
+
+        //https://redmine.zeuslearning.com/issues/529544
+        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', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .type('Response')
+                .should('have.value', 'Response')
+                .should('not.have.attr', 'placeholder');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .clear()
+                .blur()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+    });
+
+    describe('Response Accordions: Type of answer input', () => {
+        abortEarlySetup();
+        const typeOfAnswers = ['Text', 'Number'];
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsTextPage.steps.expandResponseAccordion(1);
+        });
+
+        it('\'Type of answer\' label and dropdown should be displayed and by default in the \'Type of answer\' dropdown \'Text\' option should be selected for both response accordions', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsTextPage.typeOfAnswerInputLabel()
+                                .verifyInnerText('Type of answer input');
+                            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                                .verifyInnerText('Text');
+                        });
+                })
+        });
+
+        it('CSS of \'Type of answer\' dropdown', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputLabel()
+                        .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+                });
+        });
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        it(`Clicking on Type of answer dropdown should open a list of 2 options - ${typeOfAnswers}`, () => {
+            cy.log('Checking dropdown contents for Response 1 accordion')
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .should('be.visible');
+            typeOfAnswers.forEach((index, count) => {
+                fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(count)
+                    .verifyInnerText(index);
+            });
+            cy.get('body')
+                .click();
+            cy.log('Checking dropdown contents for Response 2 accordion')
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .should('be.visible');
+            typeOfAnswers.forEach((index, count) => {
+                fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(count)
+                    .verifyInnerText(index);
+            });
+        });
+
+        it('CSS of Type of answer input dropdown in Active state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of Type of answer input dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList());
+        });
+
+        it('When the user has not set the Type of answer input in the response accordion then the custom label should not be displayed', () => {
+            fillInTheGapsTextPage.responseAccordionCustomLabel()
+                .should('not.exist');
+        });
+
+        //Type of answer input test cases for set correct answer section
+        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', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .type('Response 1')
+                .should('have.value', 'Response 1');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .type('Response 1')
+                .should('have.value', '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', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .verifyInnerText('Number');
+                });
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .type('Response 1')
+                .should('have.value', '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\'', () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Number');
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                                .verifyInnerText('Number');
+                        });
+                });
+        });
+
+        it('When the user has set \'Text\' option in 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', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .click();
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .verifyInnerText('Text');
+                });
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .click()
+                .type('1 Response', { delay: 1000 })
+                .should('have.value', '1 Response');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .clear()
+                .type('Response 1')
+                .should('have.value', '1');
+        });
+
+        it('When the user has set a Type of answer input in Response accordion then Custom label should be displayed', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.responseAccordionCustomLabel()
+                        .should('be.visible');
+                });
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.responseAccordionCustomLabel()
+                        .should('not.exist');
+                });
+        });
+
+        //Type of answer input test cases for preview tab
+        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', () => {
+            cy.log('Pre step: Set the Type of answer input dropdowns to \'Text\'')
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Text');
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                                .verifyInnerText('Text');
+                        });
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('Response 1')
+                        .should('have.value', 'Response 1');
+                });
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .verifyInnerText('Number');
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .type('Response 1')
+                .should('have.value', '1');
+        });
+
+        it('When the user has set \'Text\' option in 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\'')
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Number');
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .click();
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .verifyInnerText('Text');
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .type('Response 1')
+                .should('have.value', 'Response 1');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .type('Response 1')
+                .should('have.value', '1');
+        });
+    });
+
+    describe('Response Accordions: Height and Width', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsTextPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsTextPage.tests.verifyDefaultStateOfHeightAndWidthInputFieldInResponseAccordionAndCSS();
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        //Height and width test cases for Set correct answer section
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        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', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '46px')
+                        .and('have.attr', 'width', '13.7em');
+                });
+        });
+
+        fillInTheGapsTextPage.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', () => {
+            fillInTheGapsTextPage.steps.setHeightInResponseAccordion(0, '100');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'height', '100px');
+        });
+
+        fillInTheGapsTextPage.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', () => {
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '100');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '100px');
+        });
+
+        it('When the user has set width below 80px then the width should remain 80px in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '20');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '80px');
+        });
+
+        it('When the user has set width above 400px then the width should remain 400px in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '800');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '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', () => {
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('250')
+                .should('have.value', '250');
+            fillInTheGapsTextPage.heightInputField()
+                .clear()
+                .type('180')
+                .should('have.value', '180');
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '175');
+            fillInTheGapsTextPage.steps.setHeightInResponseAccordion(0, '120');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '175px')
+                .and('have.attr', 'height', '120px');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '250px')
+                .and('have.attr', 'height', '180px');
+        });
+
+        //Height and width test cases for preview tab
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        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', () => {
+            cy.log('Pre step: clearing the set values of height and width to bring back the dimensions of the response field to default dimensions')
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsTextPage.heightInputField()
+                                .clear()
+                                .should('have.value', '');
+                            fillInTheGapsTextPage.widthInputField()
+                                .clear()
+                                .should('have.value', '');
+                        });
+                })
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '46px')
+                        .and('have.attr', 'width', '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 in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.setHeightInResponseAccordion(0, '100');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'height', '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 in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '100');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '100px');
+        });
+
+        it('When the user has set width below 80px then the width should remain 80px in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '20');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '80px');
+        });
+
+        it('When the user has set width above 400px then the width should remain 400px in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '800');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '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 preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('250')
+                .should('have.value', '250');
+            fillInTheGapsTextPage.heightInputField()
+                .clear()
+                .type('180')
+                .should('have.value', '180');
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '175');
+            fillInTheGapsTextPage.steps.setHeightInResponseAccordion(0, '120');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '175px')
+                .and('have.attr', 'height', '120px');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '250px')
+                .and('have.attr', 'height', '180px')
+        });
+    });
+});