itemengine-cypress-automation 1.0.72 → 1.0.73

package/cypress/e2e/ILC/ListMatching/{listMatchingAlternateAnswer.js → listMatchingAlternateAnswer.smoke.js}

@@ -1,7 +1,7 @@
 import { listMatchingPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 const css = Cypress.env('css');
-
+const grepTags = Cypress.env('grepTags');
 let optionsForThreeResponses = ['Correct answer for stem 1', 'Correct answer for stem 2', 'Correct answer for stem 3'];
 
 describe('Create Item Page: List matching: Edit tab scoring types and set correct answer section  for Alternate answer tab', () => {
@@ -9,7 +9,7 @@ describe('Create Item Page: List matching: Edit tab scoring types and set correc
         cy.loginAs('admin');
     });
 
-    describe('Alternate answer tab', () => {
+    describe('Alternate answer tab', { tags: 'smoke' }, () => {
         abortEarlySetup();
         before(() => {
             listMatchingPage.steps.navigateToCreateQuestion('list matching');
@@ -91,57 +91,61 @@ describe('Create Item Page: List matching: Edit tab scoring types and set correc
         });
     });
 
-    describe('Edit tab \'Set correct answer\' section for Alternate answer tab and \'Scoring\' for Auto-scored: All or Nothing scoring type', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigate to list matching question type');
-            listMatchingPage.steps.navigateToCreateQuestion('list matching');
-            cy.barsPreLoaderWait();
-            cy.log('Adding options, allotting points and setting correct answers in response areas of correct tab')
-            listMatchingPage.steps.addInputToOptionsForDragAndDropFields(optionsForThreeResponses);
-            listMatchingPage.steps.allotPoints(10);
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 1', 0);
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 2', 1);
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 3', 2);
-            cy.log('adding alternate tab')
-            listMatchingPage.steps.addAlternateTab(1);
-        });
-
-        listMatchingPage.tests.verifyAutoScoredAllOrNothingPointsAndMinimumScoreAwardedLabelAndInputField();
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Edit tab \'Set correct answer\' section for Alternate answer tab and \'Scoring\' for Auto-scored: All or Nothing scoring type', () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigate to list matching question type');
+                listMatchingPage.steps.navigateToCreateQuestion('list matching');
+                cy.barsPreLoaderWait();
+                cy.log('Adding options, allotting points and setting correct answers in response areas of correct tab')
+                listMatchingPage.steps.addInputToOptionsForDragAndDropFields(optionsForThreeResponses);
+                listMatchingPage.steps.allotPoints(10);
+                listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 1', 0);
+                listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 2', 1);
+                listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 3', 2);
+                cy.log('adding alternate tab')
+                listMatchingPage.steps.addAlternateTab(1);
+            });
 
-        listMatchingPage.tests.verifyDefaultStemFieldsAndResponseAreasInSetCorrectAnswerSection();
+            listMatchingPage.tests.verifyAutoScoredAllOrNothingPointsAndMinimumScoreAwardedLabelAndInputField();
 
-        listMatchingPage.tests.verifyOptionsInAlternateTab();
+            listMatchingPage.tests.verifyDefaultStemFieldsAndResponseAreasInSetCorrectAnswerSection();
 
-        listMatchingPage.tests.verifyPointsFieldErrorState(10);
+            listMatchingPage.tests.verifyOptionsInAlternateTab();
 
-        listMatchingPage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
-    });
+            listMatchingPage.tests.verifyPointsFieldErrorState(10);
 
-    describe('Edit tab \'Set correct answer\' section for Alternate answer tab and \'Scoring\' for Auto-scored: Partial equal weights scoring type', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigate to list matching question type');
-            listMatchingPage.steps.navigateToCreateQuestion('list matching');
-            cy.barsPreLoaderWait();
-            cy.log('Adding options, allotting points and setting correct answers in response areas of correct tab')
-            listMatchingPage.steps.addInputToOptionsForDragAndDropFields(optionsForThreeResponses);
-            listMatchingPage.steps.allotPoints(10);
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 1', 0);
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 2', 1);
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 3', 2);
-            cy.log('adding alternate tab')
-            listMatchingPage.steps.addAlternateTab(1);
+            listMatchingPage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
         });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Edit tab \'Set correct answer\' section for Alternate answer tab and \'Scoring\' for Auto-scored: Partial equal weights scoring type', () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigate to list matching question type');
+                listMatchingPage.steps.navigateToCreateQuestion('list matching');
+                cy.barsPreLoaderWait();
+                cy.log('Adding options, allotting points and setting correct answers in response areas of correct tab')
+                listMatchingPage.steps.addInputToOptionsForDragAndDropFields(optionsForThreeResponses);
+                listMatchingPage.steps.allotPoints(10);
+                listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 1', 0);
+                listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 2', 1);
+                listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 3', 2);
+                cy.log('adding alternate tab')
+                listMatchingPage.steps.addAlternateTab(1);
+            });
 
-        listMatchingPage.tests.verifyAutoScoredPartialEqualWeightsScoringEditTabContents();
+            listMatchingPage.tests.verifyAutoScoredPartialEqualWeightsScoringEditTabContents();
 
-        listMatchingPage.tests.verifyOptionsInAlternateTab();
+            listMatchingPage.tests.verifyOptionsInAlternateTab();
 
-        listMatchingPage.tests.verifyDefaultStemFieldsAndResponseAreasInSetCorrectAnswerSection();
+            listMatchingPage.tests.verifyDefaultStemFieldsAndResponseAreasInSetCorrectAnswerSection();
 
-        listMatchingPage.tests.verifyAutoScoredPartialEqualWeightsScoringEditTabFunctionality();
-    });
+            listMatchingPage.tests.verifyAutoScoredPartialEqualWeightsScoringEditTabFunctionality();
+        });
+    }
 
     describe('Edit tab \'Set correct answer\' section for Alternate answer tab and \'Scoring\' for Auto-scored: Partial different weights scoring type', () => {
         abortEarlySetup();

package/cypress/e2e/ILC/ListMatching/listMatchingGroupedOptionsSection.smoke.js

@@ -0,0 +1,211 @@
+import { listMatchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+const grepTags = Cypress.env('grepTags');
+const optionsForGroup2 = ['Response 5', 'Response 6'];
+let optionsForThreeResponses = ['Response 1', 'Response 2', 'Response 3'];
+let optionsForFourResponses = ['Response 1', 'Response 2', 'Response 3', 'Response 4'];
+
+describe('Create Item Page: List matching: Grouped response layout - Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('\'Grouped\' response options layout - Edit tab section contents', () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigating to List Matching question type');
+                listMatchingPage.steps.navigateToCreateQuestion('list matching');
+                cy.barsPreLoaderWait();
+            });
+
+            listMatchingPage.tests.verifyGroupedOptionsContentAndFunctionality();
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('\'Grouped\' response options layout - Set correct answer section contents', () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigating to List Matching question type');
+                listMatchingPage.steps.navigateToCreateQuestion('list matching');
+                cy.barsPreLoaderWait();
+                listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+            });
+
+            it('When the user has not entered text in the \'Group title\' input field then no group title should be displayed for the group in the response options container of the \'Set Correct Answer\' section', () => {
+                listMatchingPage.setCorrectAnswerSectionGroupedResponseTitle()
+                    .should('not.exist');
+            });
+
+            it('When the user enters text in the \'Group title\' input field, a group title should be displayed for the group in the response options container of the \'Set Correct Answer\' section', () => {
+                listMatchingPage.steps.addGroupTitle(0, 'Group title A');
+                listMatchingPage.setCorrectAnswerSectionGroupedResponseTitle()
+                    .should('have.text', 'Group title A');
+            });
+
+            it('When the user has not entered text in the options input field then three empty draggable options along with drag handles should be displayed as a group in the response options container of the \'Set Correct Answer\' section', () => {
+                listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['', '', '']);
+                listMatchingPage.steps.verifyDragIconVisibleInOptionsInSetCorrectAnswerSection();
+            });
+
+            it('When the user enters text in options input fields then the entered text should be displayed in the respective draggable options in a group in the response options container of the \'Set Correct Answer\' section', () => {
+                listMatchingPage.steps.addInputToOptionsForDragAndDropFields(optionsForThreeResponses);
+                cy.wait(500);
+                listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, optionsForThreeResponses);
+            });
+
+            //Failing due to https://redmine.zeuslearning.com/issues/541421
+            it('CSS of \'Grouped\' container in the \'Set Correct Answer\' section', { tags: 'css' }, () => {
+                listMatchingPage.setCorrectAnswerSectionGroupedResponseContainer()
+                    .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`);
+                listMatchingPage.draggableOption()
+                    .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                    .find('.question-text-wrapper')
+                    .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                listMatchingPage.draggableOption()
+                    .find('.drag-indicator-icon')
+                    .should('have.css', 'fill', `${css.color.activeButtons}`);
+            });
+
+            it('Accessibility of \'Grouped\' container in the \'Set Correct Answer\' section', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(listMatchingPage.setCorrectAnswerSectionGroupedResponseContainer());
+            });
+
+            it('When the user adds an option using \'Add Option\' button then the added option should be displayed along with drag handle inside the group in the response options container of the \'Set Correct Answer\' section', () => {
+                listMatchingPage.steps.addOption();
+                listMatchingPage.steps.verifyCountOfDraggableOptionsInSetCorrectAnswerSection('List matching', 4);
+                listMatchingPage.steps.verifyDefaultStateOfDraggableOptionsInSetCorrectAnswerSection('List matching', 3);
+                cy.log('Checking that input text to the newly added option is displayed in the response options container of the \'Set Correct Answer\' section')
+                listMatchingPage.steps.addInputToOptionForDragAndDropInputField(optionsForFourResponses[3], 3);
+                cy.wait(500);
+                listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, optionsForFourResponses);
+            });
+
+            it('When the user deletes an option then the deleted option should get removed from the group in the response options container of the \'Set Correct Answer\' section', () => {
+                listMatchingPage.steps.deleteResponseOptionInputField(3);
+                cy.log('verifying the text of draggable options after deleting an option')
+                listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, optionsForThreeResponses);
+            });
+
+            it('When the user adds a new group, the new group should be displayed in the response options container of the \'Set Correct Answer\' section', () => {
+                listMatchingPage.steps.addGroup();
+                listMatchingPage.steps.verifyCountOfGroupsInSetCorrectAnswerSection(2);
+                listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, ['', '']);
+            });
+
+            it('When the user deletes a group, then the deleted group should get removed from the response options container as well as from the response areas (if any) of the \'Set Correct Answer\' section', () => {
+                cy.log('Pre step: Entering text into the text fields of group 2 response container')
+                listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(1, optionsForGroup2);
+                listMatchingPage.steps.addGroupTitle(1, 'Group title B');
+                cy.log('Setting a correct answer option')
+                listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Response 2', 0);
+                cy.log('Deleting the 1st group')
+                listMatchingPage.steps.deleteGroup(0);
+                listMatchingPage.steps.verifyCountOfGroupsInSetCorrectAnswerSection(1);
+                listMatchingPage.steps.verifyErroredStateOfEmptyResponseFieldInSetCorrectAnswerSection(0);
+                cy.log('verifying the contents of group 2 after deleting group 1')
+                listMatchingPage.steps.verifyGroupedResponseOptionsInSetCorrectAnswerSection(0, 'Group title B', optionsForGroup2);
+            });
+        });
+    }
+
+    describe('\'Grouped\' response options layout - Preview tab contents', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+            listMatchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not entered text in the \'Group title\' input field then no group title should be displayed for the group in the response options container of the \'Preview tab\'', () => {
+            listMatchingPage.previewTabGroupedResponseTitle()
+                .should('not.exist');
+        });
+
+        it('When the user enters text in the \'Group title\' input field, a group title should be displayed for the group in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addGroupTitle(0, 'Group title A');
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.previewTabGroupedResponseTitle()
+                .should('have.text', 'Group title A');
+        });
+
+        it('When the user has not entered text in the options input field then three empty draggable options along with drag handles should be displayed as a group in the response options container of the \'Preview tab\'', () => {
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['', '', '']);
+        });
+
+        it('When the user enters text in options input fields then the entered text should be displayed in the respective draggable options in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addInputToOptionsForDragAndDropFields(optionsForThreeResponses);
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForThreeResponses);
+        });
+
+        it('CSS of \'Grouped\' container in the response options container of the \'Preview tab\'', { tags: 'css' }, () => {
+            listMatchingPage.previewTabGroupedResponseContainer()
+                .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
+                .within(() => {
+                    listMatchingPage.draggableOption()
+                        .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                        .find('.drag-indicator-icon')
+                        .should('have.css', 'fill', `${css.color.activeButtons}`);
+                });
+        });
+
+        it('Accessibility of \'Grouped\' container in the response options container of the \'Preview tab\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listMatchingPage.previewTabGroupedResponseContainer());
+        });
+
+        it('When the user adds an option using \'Add Option\' button then the added option should be displayed inside the group in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addOption();
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyCountOfDraggableOptionsInPreviewTab('List matching', 4);
+            listMatchingPage.steps.verifyDefaultStateOfDraggableOptionsInPreviewTab('List matching', 3);
+            cy.log('Checking that input text to the newly added option is displayed in the option in Preview tab section')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addInputToOptionForDragAndDropInputField(optionsForFourResponses[3], 3);
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForFourResponses);
+        });
+
+        it('When the user deletes an option then the deleted option should get removed from the group in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.deleteResponseOptionInputField(3);
+            cy.log('Checking the deleted option should not exist in the Preview tab')
+            listMatchingPage.steps.switchToPreviewTab();
+            cy.log('verifying the text of draggable options after deleting an option')
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForThreeResponses);
+        });
+
+        it('When the user adds a new group, the new group should be displayed in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addGroup();
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyCountOfGroupsInPreviewTab(2);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, ['', '']);
+        });
+
+        it('When the user deletes a group, it should get removed from response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            cy.log('Pre step: Entering text into the text fields of group 2 response container')
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(1, optionsForGroup2)
+            listMatchingPage.steps.addGroupTitle(1, 'Group title B');
+            listMatchingPage.steps.deleteGroup(0);
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyCountOfGroupsInPreviewTab(1);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForGroup2);
+            listMatchingPage.steps.verifyGroupTitleInPreviewTab(0, 'Group title B');
+        });
+    });
+})

package/cypress/e2e/ILC/ListMatching/listMatchingQuestionInstructionsAndStemsSection.smoke.js

@@ -0,0 +1,254 @@
+import { listMatchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+const grepTags = Cypress.env('grepTags');
+const stems = ['Land pollution', 'Water pollution', 'Air pollution'];
+
+describe('Create Item page - List Matching: Question Instructions and Stems section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Question Instructions input field - Edit tab', () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigating to List Matching question type');
+                listMatchingPage.steps.navigateToCreateQuestion('list matching');
+                cy.barsPreLoaderWait();
+            });
+
+            listMatchingPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Question Instructions input field - Preview tab', () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigating to List Matching question type');
+                listMatchingPage.steps.navigateToCreateQuestion('list matching');
+                cy.barsPreLoaderWait();
+            });
+
+            listMatchingPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Stems - Edit tab stems section contents', () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigating to List Matching question type');
+                listMatchingPage.steps.navigateToCreateQuestion('list matching');
+                cy.barsPreLoaderWait();
+            });
+
+            it('\'Stems\' label should be displayed', () => {
+                listMatchingPage.stemsLabel()
+                    .verifyInnerText('Stems');
+            });
+
+            it('By default, 3 \'Stem\' input fields should be displayed with placeholder text and numeration, Drag handle and Delete option icon buttons should be displayed besides each input field', () => {
+                for (let index = 0; index < 3; index++) {
+                    listMatchingPage.steps.verifyStemContents(index)
+                }
+                listMatchingPage.stemWrapper()
+                    .eq(3)
+                    .should('not.exist');
+            });
+
+            it('CSS of Stems section', { tags: 'css' }, () => {
+                listMatchingPage.stemsLabel()
+                    .verifyCSS(css.color.sectionHeading, css.fontSize.normal, css.fontWeight.semibold);
+                listMatchingPage.stemWrapper()
+                    .eq(0)
+                    .within(() => {
+                        listMatchingPage.dragHandleButton()
+                            .verifyCSS(css.color.secondaryBtnActive, css.fontSize.normal, css.fontWeight.regular);
+                        listMatchingPage.buttonDeleteStem()
+                            .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+                        listMatchingPage.stemInputField()
+                            .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                        listMatchingPage.optionNumeration()
+                            .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.semibold);
+                    });
+                listMatchingPage.addStemButton()
+                    .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.medium);
+            });
+
+            it('On hovering over the drag handle of the stem, \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
+                listMatchingPage.steps.verifyDragHandleTooltipForStem();
+            });
+
+            it('When the user hovers over the enabled \'Delete\' icon buttons then, \'Delete stem\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+                listMatchingPage.steps.verifyDeleteButtonTooltipForStem();
+            });
+
+            it('When user clicks on the \'Delete\' question stem button then the respective options input field should get deleted, option numeration should change accordingly', () => {
+                listMatchingPage.steps.deleteStem(0);
+                for (let index = 0; index < 2; index++) {
+                    listMatchingPage.steps.verifyStemContents(index)
+                }
+                listMatchingPage.stemWrapper()
+                    .eq(2)
+                    .should('not.exist');
+            });
+
+            it('When number of stem is equal to 1, then the Delete option icon buttons should be displayed in disabled state', () => {
+                listMatchingPage.steps.deleteStem(0);
+                listMatchingPage.steps.verifyDisabledDeleteStemButton(0);
+            });
+
+            it('When the user hovers over the disabled \'Delete\' icon buttons then, \'Minimum one stem is required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+                listMatchingPage.steps.verifyDisabledDeleteStemButtonTooltip();
+            });
+
+            it('\'Add stem\' button should be present', () => {
+                listMatchingPage.addStemButton()
+                    .verifyInnerText('Add stem')
+                    .should('be.visible');
+            });
+
+            it('When user adds a question stem using the \'Add stem\' button then added stem should be displayed with drag handle, placeholder text, option numeration and delete button', () => {
+                listMatchingPage.steps.addStem()
+                listMatchingPage.steps.verifyStemContents(1)
+            });
+
+            it('When user focus in and out of any of the \'Stem\' input field without typing anything, an error message should be thrown', () => {
+                listMatchingPage.steps.focusInAndFocusOutOfStemInputField(1);
+                listMatchingPage.steps.verifyStemErrorMessageIsDisplayed(1);
+            });
+
+            it('CSS of error message', { tags: 'css' }, () => {
+                listMatchingPage.stemWrapper()
+                    .eq(1)
+                    .within(() => {
+                        listMatchingPage.errorMessage()
+                            .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+                    });
+            });
+
+            it('Accessibility of error message', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(listMatchingPage.errorMessage());
+            });
+
+            it('When user enters text in question stem input field the \'Error: Question stem is required.\' error message should disappear', () => {
+                listMatchingPage.steps.addInputToStemField(1, stems[1]);
+                listMatchingPage.steps.verifyStemErrorMessageIsNotDisplayed(1);
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Stems - set correct answer section', () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigating to List Matching question type');
+                listMatchingPage.steps.navigateToCreateQuestion('list matching');
+                cy.barsPreLoaderWait();
+            });
+
+            it('When user clicks on the \'Delete\' question stem button then deleted stem should not be displayed in the \'Set Correct Answer\' section table', () => {
+                listMatchingPage.steps.deleteStem(0);
+                listMatchingPage.setCorrectAnswerStemRow()
+                    .eq(2)
+                    .should('not.exist');
+            });
+
+            it('When user adds a question stem using the \'Add stem\' button then added stem should be displayed in the \'Set Correct Answer\' section table', () => {
+                listMatchingPage.steps.addStem();
+                listMatchingPage.setCorrectAnswerStemRow()
+                    .eq(2)
+                    .should('exist');
+            });
+
+            it('When user adds text to all the stem input field, the added text should be displayed in the set correct answer section section in the stem fields', () => {
+                listMatchingPage.steps.addInputToAllStemFields(stems);
+                listMatchingPage.steps.verifyAllStemTextInSetCorrectAnswerSection(stems);
+            });
+
+            it('When user removes text from a stem input field, the text should also be removed from the stem field in the set correct answer section', () => {
+                listMatchingPage.steps.clearStemInputField(0);
+                listMatchingPage.steps.verifyAllStemTextInSetCorrectAnswerSection(['', 'Water pollution', 'Air pollution']);
+            });
+
+            it('CSS of \'Set Correct Answer\' section stems', { tags: 'css' }, () => {
+                listMatchingPage.setCorrectAnswerStemLabel()
+                    .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                listMatchingPage.setCorrectAnswerStemField()
+                    .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`);
+                listMatchingPage.setCorrectAnswerStemResponseArea()
+                    .should('have.css', 'border', `2px dashed ${css.color.figDefaultComponentBorder}`);
+            });
+        });
+    }
+
+    describe('Stem - Preview tab section', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            cy.log('Switching to Preview tab')
+            listMatchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When user deletes a question stem then the deleted stem should not be displayed in the \'Preview\' tab table', () => {
+            cy.log('Switching to Edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.deleteStem(0);
+            cy.log('Switching to Preview tab')
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.previewTabStemRow()
+                .eq(2)
+                .should('not.exist');
+        });
+
+        it('When user adds a question stem using the \'Add stem\' button then added stem should be displayed in the \'Preview\' tab table', () => {
+            cy.log('Switching to Edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addStem();
+            cy.log('Switching to Preview tab')
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.previewTabStemRow()
+                .eq(2)
+                .should('exist');
+        });
+
+        it('When user adds text to all the question stem input field, the added text should be displayed in the Preview tab table under the Question stem column', () => {
+            cy.log('Switching to Edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addInputToAllStemFields(stems);
+            cy.log('Switching to Preview tab')
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyAllStemTextInPreviewTab(stems);
+        });
+
+        it('When user removes text from a stem input field, the text should also be removed from the stem field in the preview tab', () => {
+            cy.log('Switching to Edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.stemInputField()
+                .eq(0)
+                .clear();
+            cy.log('Switching to Preview tab')
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.previewTabStemLabel()
+                .eq(0)
+                .verifyInnerText('');
+        });
+
+        it('CSS of added stems in \'Preview\' tab table', { tags: 'css' }, () => {
+            listMatchingPage.previewTabStemLabel()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            listMatchingPage.previewTabStemField()
+                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`);
+            listMatchingPage.previewTabStemResponseArea()
+                .should('have.css', 'border', `2px dashed ${css.color.figDefaultComponentBorder}`);
+        });
+
+        it('Accessibility of \'Preview\' tab stem fields', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listMatchingPage.previewTabStemLabel().parents('[class*="ClozeWithDragAndDropstyles__QuestionItemContainer"]'));
+        });
+    });
+});