itemengine-cypress-automation 1.0.32 → 1.0.37

package/cypress/e2e/ILC/ListMatching/listMatchingAdditionalSettingsAnswerNumerationAndResponseOptionPlacement.js

@@ -0,0 +1,196 @@
+import { listMatchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+const numbers = ['1', '2'];
+const lowercase = ['a', 'b'];
+const uppercase = ['A', 'B'];
+const responsePlacementDropdownOptions = ['Top', 'Bottom', 'Left', 'Right'];
+
+describe('List matching - additional settings - Answer numeration (only while grading) and response option placement dropdown', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.expandAdditonalSettings();
+        });
+
+        listMatchingPage.tests.verifyAnswerNumerationContents();
+
+        it(`When the user selects ${answerNumerationDropdownOptions[0]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            utilities.verifyInnerText(listMatchingPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`)
+            utilities.verifyElementVisibilityState(listMatchingPage.responseAreaNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[1]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            listMatchingPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            utilities.verifyElementVisibilityState(listMatchingPage.responseAreaNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[2]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            listMatchingPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            utilities.verifyElementVisibilityState(listMatchingPage.responseAreaNumeration(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.setQuestionStemsAndOptionsForScoringWithoutAlternateTab();
+            listMatchingPage.steps.allotPoints(20);
+            listMatchingPage.steps.setCorrectAnswersForScoringWithoutAlternateTab();
+            listMatchingPage.steps.expandAdditonalSettings();
+            listMatchingPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[0]} option from the \'Answer numeration\' dropdown and has not selected show correct answer checkbox or check answer button then response area numeration should not be displayed in the preview tab`, () => {
+            utilities.verifyInnerText(listMatchingPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`)
+            listMatchingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(listMatchingPage.responseAreaNumeration(), 'notExist');
+        });
+
+        it(`When user clicks on \'Show correct answer\' checkbox then the ${answerNumerationDropdownOptions[0]} numeration should be displayed on the response areas as well as \'Correct answers:\' container`, () => {
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Incorrect answer 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Incorrect answer 2', 1);
+            listMatchingPage.steps.checkShowCorrectAnswerCheckbox();
+            listMatchingPage.steps.verifyNumerationOfResponseAreasInQuestionPreview(numbers);
+            listMatchingPage.steps.verifyCorrectAnswerContainerNumeration(numbers);
+            cy.log('Post step: Uncheck \'Show correct answer\' checkbox')
+            listMatchingPage.steps.uncheckShowCorrectAnswerCheckbox();
+        });
+
+        it('When user clicks on \'Check answer\' button then the numeration should not be displayed in the response areas', () => {
+            listMatchingPage.steps.checkAnswer();
+            utilities.verifyElementVisibilityState(listMatchingPage.responseAreaNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[1]} option from the \'Answer numeration\' dropdown and has not selected show correct answer checkbox or check answer button then response area numeration should not be displayed in the preview tab`, () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            listMatchingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(listMatchingPage.responseAreaNumeration(), 'notExist');
+        });
+
+        it(`When user clicks on \'Show correct answer\' checkbox then the ${answerNumerationDropdownOptions[1]} numeration should be displayed on the response areas as well as \'Correct answers:\' container`, () => {
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Incorrect answer 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Incorrect answer 2', 1);
+            listMatchingPage.steps.checkShowCorrectAnswerCheckbox();
+            listMatchingPage.steps.verifyNumerationOfResponseAreasInQuestionPreview(uppercase);
+            listMatchingPage.steps.verifyCorrectAnswerContainerNumeration(uppercase);
+            cy.log('Post step: Uncheck \'Show correct answer\' checkbox')
+            listMatchingPage.steps.uncheckShowCorrectAnswerCheckbox();
+        });
+
+        it('When user clicks on \'Check answer\' button then the numeration should not be displayed in the response areas', () => {
+            listMatchingPage.steps.checkAnswer();
+            utilities.verifyElementVisibilityState(listMatchingPage.responseAreaNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[2]} option from the \'Answer numeration\' dropdown and has not selected show correct answer checkbox or check answer button then response area numeration should not be displayed in the preview tab`, () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            listMatchingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(listMatchingPage.responseAreaNumeration(), 'notExist');
+        });
+
+        it(`When user clicks on \'Show correct answer\' checkbox then the ${answerNumerationDropdownOptions[1]} numeration should be displayed on the response areas as well as \'Correct answers:\' container`, () => {
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Incorrect answer 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Incorrect answer 2', 1);
+            listMatchingPage.steps.checkShowCorrectAnswerCheckbox();
+            listMatchingPage.steps.verifyNumerationOfResponseAreasInQuestionPreview(lowercase);
+            listMatchingPage.steps.verifyCorrectAnswerContainerNumeration(lowercase);
+            cy.log('Post step: Uncheck \'Show correct answer\' checkbox')
+            listMatchingPage.steps.uncheckShowCorrectAnswerCheckbox();
+        });
+
+        it('When user clicks on \'Check answer\' button then the numeration should not be displayed in the response areas', () => {
+            listMatchingPage.steps.checkAnswer();
+            utilities.verifyElementVisibilityState(listMatchingPage.responseAreaNumeration(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: response option placement - contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Response option placement\' label and dropdown should be displayed. By default \'Bottom\' option should be selected in \'Response option placement\'', () => {
+            utilities.verifyInnerText(listMatchingPage.responseOptionPlacementLabel(), 'Response option placement');
+            utilities.verifyElementVisibilityState(listMatchingPage.responseOptionPlacementLabel(), 'visible');
+            utilities.verifyInnerText(listMatchingPage.responseOptionPlacementDropdown(), 'Bottom');
+            utilities.verifyElementVisibilityState(listMatchingPage.responseOptionPlacementDropdown(), 'visible');
+        });
+
+        it('CSS of \'Response option placement\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(listMatchingPage.responseOptionPlacementDropdown(), {
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'background-color': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(listMatchingPage.responseOptionPlacementDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+
+        it('When user clicks on \'Response option placement\' dropdown, a list of 4 options should open - Top, Bottom, Left, Right', () => {
+            listMatchingPage.steps.clickOnResponseOptionPlacementDropdown();
+            utilities.verifyElementVisibilityState(listMatchingPage.responseOptionPlacementDropdownListOption(), 'visible');
+            listMatchingPage.steps.verifyResponseOptionPlacementDropdownOptions(responsePlacementDropdownOptions);
+        });
+
+        it('CSS of \'Response option placement\' dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(listMatchingPage.responseOptionPlacementDropdownListOption().eq(1), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(listMatchingPage.responseOptionPlacementDropdownListOption().eq(0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of \'Response option placement\' dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listMatchingPage.dropdownList());
+        });
+    });
+
+    describe('Additional settings: response option placement - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.expandAdditonalSettings();
+        });
+
+        responsePlacementDropdownOptions.forEach((dropdownOption) => {
+            it(`When the user selects ${dropdownOption} from the \'Response option placement\' dropdown, then the response options container should be displayed at the \'${dropdownOption}\' in the question preview`, () => {
+                listMatchingPage.steps.clickOnResponseOptionPlacementDropdown();
+                listMatchingPage.steps.selectResponseOptionPlacementDropdownOption(dropdownOption);
+                listMatchingPage.steps.switchToPreviewTab();
+                listMatchingPage.steps.verifyResponseOptionPlacementPreviewTab(dropdownOption);
+                listMatchingPage.steps.switchToEditTab();
+            });
+        })
+    });
+});

package/cypress/e2e/ILC/ListMatching/listMatchingAdditionalSettingsBasic.js

@@ -0,0 +1,210 @@
+import { listMatchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+
+describe('List matching - additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+        });
+
+        listMatchingPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: font size - contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.setQuestionStemsAndOptionsForScoringWithoutAlternateTab();
+            listMatchingPage.steps.expandAdditonalSettings();
+            listMatchingPage.steps.enterTextInStemColumnHeaderInputField('Stem column header');
+            listMatchingPage.steps.enterTextInResponseColumnHeaderInputField('Response column header');
+        });
+
+        listMatchingPage.tests.verifyFontSizeSectionContents();
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font size dropdown, then font size of the contents in the \'Set correct answer\' section should be changed to ${option}`, () => {
+                listMatchingPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(listMatchingPage.fontSizeDropdown(), `${option}`);
+                cy.log('Checking correct answer section font size')
+                utilities.verifyCSS(listMatchingPage.setCorrectAnswerStemLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.setCorrectAnswerStemResponseArea(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.draggableOption(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.stemColumnHeader(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.responseColumnHeader(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: font size - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.addQuestionInstructions('Question Instructions');
+            listMatchingPage.steps.setQuestionStemsAndOptionsForScoringWithoutAlternateTab();
+            listMatchingPage.steps.allotPoints(20);
+            listMatchingPage.steps.setCorrectAnswersForScoringWithoutAlternateTab();
+            listMatchingPage.steps.expandAdditonalSettings();
+            listMatchingPage.steps.enterTextInStemColumnHeaderInputField('Stem column header');
+            listMatchingPage.steps.enterTextInResponseColumnHeaderInputField('Response column header');
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font size dropdown, then font size of the preview tab should change to ${option} accordingly`, () => {
+                listMatchingPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(listMatchingPage.fontSizeDropdown(), `${option}`);
+                listMatchingPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(listMatchingPage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.stemColumnHeader(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.responseColumnHeader(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.previewTabStemLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.previewTabStemResponseArea(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.draggableOption(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                listMatchingPage.steps.checkShowCorrectAnswerCheckbox();
+                utilities.verifyCSS(listMatchingPage.previewTabCorrectAnswerLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.previewTabCorrectAnswerResponseNumerationWrapper(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listMatchingPage.previewTabCorrectAnswerResponseText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                listMatchingPage.steps.uncheckShowCorrectAnswerCheckbox();
+                listMatchingPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: check answer', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.setQuestionStemsAndOptionsForScoringWithoutAlternateTab();
+            listMatchingPage.steps.setCorrectAnswersForScoringWithoutAlternateTab();
+            listMatchingPage.steps.allotPoints(20);
+            listMatchingPage.steps.expandAdditonalSettings();
+        });
+
+        listMatchingPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional settings: check answer - functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.setQuestionStemsAndOptionsForScoringWithoutAlternateTab();
+            listMatchingPage.steps.setCorrectAnswersForScoringWithoutAlternateTab();
+            listMatchingPage.steps.allotPoints(20);
+            listMatchingPage.steps.expandAdditonalSettings();
+            listMatchingPage.steps.setMaximumCheckAnswerAttempts(2);
+            listMatchingPage.steps.switchToPreviewTab();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/548211 
+        listMatchingPage.tests.verifyCheckAnswerButtonFunctionalityWhenQuestionIsUnattempted();
+
+        it('When the user attempts the question partially correct, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response, red cross-mark should be displayed besides incorrect response and \'Incorrect answer\' label should be displayed below the question preview', () => {
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Incorrect answer 2', 1);
+            listMatchingPage.steps.checkAnswer();
+            listMatchingPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            listMatchingPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            listMatchingPage.steps.verifyIncorrectAttemptBorder();
+            listMatchingPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            listMatchingPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('When the user attempts the question correctly, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response and \'Correct answer\' label should be displayed below the question preview', () => {
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 2', 1);
+            listMatchingPage.steps.checkAnswer();
+            listMatchingPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            listMatchingPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            listMatchingPage.steps.verifyCorrectAttemptBorder();
+            listMatchingPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            listMatchingPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        listMatchingPage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y();
+
+        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the preview tab', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            listMatchingPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(1);
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyCheckAnswerButtonEnabled();
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 2', 1);
+            listMatchingPage.steps.checkAnswer();
+            listMatchingPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 2', 1);
+            listMatchingPage.steps.checkAnswer();
+            listMatchingPage.steps.verifyCheckAnswerButtonEnabled();
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Incorrect answer 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Incorrect answer 2', 1);
+            listMatchingPage.steps.checkAnswer();
+            listMatchingPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Additional settings: details section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.expandAdditonalSettings();
+        });
+
+        listMatchingPage.tests.verifyDetailsSection();
+    });
+});

package/cypress/e2e/ILC/ListMatching/listMatchingAdditionalSettingsStemAndResponseColumnHeader.js

@@ -0,0 +1,206 @@
+import { listMatchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('List matching - additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.expandAdditonalSettings();
+        });
+
+        listMatchingPage.tests.verifyStudentResponseAreaAndLayoutLabelAndCSS();
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: stem column header - contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Stem column header\' label and input field should be displayed. By default, the \'Stem column header\' input field should be empty', () => {
+            utilities.verifyInnerText(listMatchingPage.stemColumnHeaderLabel(), 'Stem column header');
+            utilities.verifyElementVisibilityState(listMatchingPage.stemColumnHeaderLabel(), 'visible');
+            utilities.verifyElementVisibilityState(listMatchingPage.stemColumnHeaderInputField(), 'visible');
+            listMatchingPage.steps.verifyStemColumnHeaderInputFieldValue('');
+        });
+
+        it('CSS of \'Stem column header\' contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(listMatchingPage.stemColumnHeaderLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(listMatchingPage.stemColumnHeaderInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+
+        it('The user should be able to enter any text in the \'Stem column header\' input field', () => {
+            listMatchingPage.steps.enterTextInStemColumnHeaderInputField('Stem 1 header');
+            listMatchingPage.steps.verifyStemColumnHeaderInputFieldValue('Stem 1 header');
+        });
+
+        it('When the user has entered text in the \'Stem column header\' input field, then it should be displayed as the stem column header in set correct answer section', () => {
+            utilities.verifyInnerText(listMatchingPage.stemColumnHeader(), 'Stem 1 header');
+        });
+
+        it('CSS of \'Stem column header\' in set correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(listMatchingPage.stemColumnHeader(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('When the user clears the \'Stem column header\' input field, then the stem column header in set correct answer section should not be displayed', () => {
+            listMatchingPage.steps.clearTextInStemColumnHeaderInputField();
+            utilities.verifyInnerText(listMatchingPage.stemColumnHeader(), '');
+        });
+    });
+
+    describe('Additional settings: stem column header - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.expandAdditonalSettings();
+        });
+
+        it('When the user has not given any input in the \'Stem column header\' input field, then stem column header should not be displayed in the preview tab', () => {
+            listMatchingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(listMatchingPage.stemColumnHeader(), '');
+        });
+
+        it('When the user gives an input in the \'Stem column header\' input field, then the given input should be displayed as stem column header in the preview tab', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.enterTextInStemColumnHeaderInputField('Stem 1 header');
+            listMatchingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(listMatchingPage.stemColumnHeader(), 'Stem 1 header');
+        });
+
+        it('CSS of \'Stem column header\' in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(listMatchingPage.stemColumnHeader(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('When user clears the \'Stem column header\' input field, then the stem column header should not be displayed in preview tab', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.clearTextInStemColumnHeaderInputField();
+            listMatchingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(listMatchingPage.stemColumnHeader(), '');
+        });
+    });
+
+    describe('Additional settings: response column header - contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Response column header\' label and input field should be displayed. By default, the \'Response column header\' input field should be empty', () => {
+            utilities.verifyInnerText(listMatchingPage.ResponseColumnHeaderLabel(), 'Response column header');
+            utilities.verifyElementVisibilityState(listMatchingPage.ResponseColumnHeaderLabel(), 'visible');
+            utilities.verifyElementVisibilityState(listMatchingPage.ResponseColumnHeaderInputField(), 'visible');
+            listMatchingPage.steps.verifyResponseColumnHeaderInputFieldValue('');
+        });
+
+        it('CSS of \'Response column header\' contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(listMatchingPage.ResponseColumnHeaderLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(listMatchingPage.ResponseColumnHeaderInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+
+        it('The user should be able to enter any text in the \'Response column header\' input field', () => {
+            listMatchingPage.steps.enterTextInResponseColumnHeaderInputField('Response 1 header');
+            listMatchingPage.steps.verifyResponseColumnHeaderInputFieldValue('Response 1 header');
+        });
+
+        it('When the user has entered text in the \'Response column header\' input field, then it should be displayed as the stem column header in set correct answer section', () => {
+            utilities.verifyInnerText(listMatchingPage.responseColumnHeader(), 'Response 1 header');
+        });
+
+        it('CSS of \'Response column header\' in set correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(listMatchingPage.responseColumnHeader(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('When the user clears the \'Response column header\' input field, then the stem column header in set correct answer section should not be displayed', () => {
+            listMatchingPage.steps.clearTextInResponseColumnHeaderInputField();
+            utilities.verifyInnerText(listMatchingPage.responseColumnHeader(), '');
+        });
+    });
+
+    describe('Additional settings: response column header - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to list matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.expandAdditonalSettings();
+        });
+
+        it('When the user has not given any input in the \'Response column header\' input field, then response column header should not be displayed in the preview tab', () => {
+            listMatchingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(listMatchingPage.responseColumnHeader(), '');
+        });
+
+        it('When the user gives an input in the \'Response column header\' input field, then the given input should be displayed as response column header in the preview tab', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.enterTextInResponseColumnHeaderInputField('Response 1 header');
+            listMatchingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(listMatchingPage.responseColumnHeader(), 'Response 1 header');
+        });
+
+        it('CSS of \'Response column header\' in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(listMatchingPage.responseColumnHeader(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('When user clears the \'Response column header\' input field, then the response column header should not be displayed in preview tab', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.clearTextInResponseColumnHeaderInputField();
+            listMatchingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(listMatchingPage.responseColumnHeader(), '');
+        });
+    });
+});