itemengine-cypress-automation 1.0.68 → 1.0.69

package/cypress/fixtures/theme/ilc.json

@@ -84,7 +84,8 @@
         "incorrectAnswerHighlightRegion": "rgba(209, 51, 51, 0.4)",
         "fileUploadProgressBarFill": "rgb(74, 147, 224)",
         "responseContainerPointer": "rgba(0, 0, 46, 0.4)",
-        "activeHighlightBorder": "rgb(41, 0, 128)"
+        "activeHighlightBorder": "rgb(41, 0, 128)",
+        "hoverHighlightBorder": "rgb(66, 0, 204)"
     },
     "fontSize": {
         "extraSmall": "10px",

package/cypress/pages/audioPlayerPage.js

@@ -34,10 +34,10 @@ const selectors = {
     customizeUIControlAccordion: () => cy.get('.ngie-accordion-summary[role="button"]').eq(0),
     advancedPlayerSettingsAccordion: () => cy.get('.ngie-accordion-summary[role="button"]').eq(1),
     customizeControlPlayButton: () => cy.get('[data-ngie-testid="play-toggle-button"]'),
-    customizeControlButtonLabel: () => cy.get('.audio-response-selection-panel-details').eq(0).find('.customized_button_label'),
+    customizeControlButtonLabel: () => cy.get('[data-ngie-testid="play-toggle-button"]').find('.ngie-toggle-button-label'),
     customizeControlPauseButton: () => cy.get('[data-ngie-testid="pause-toggle-button"]'),
     customizeControlSeekButton: () => cy.get('[data-ngie-testid="seek-toggle-button"]'),
-    advancedPlayerButtonLabel: () => cy.get('.audio-response-selection-panel-details').eq(1).find('.customized_button_label'),
+    advancedPlayerButtonLabel: () => cy.get('[data-ngie-testid="timer-toggle-button"]').find('.ngie-toggle-button-label'),
     advancedPlayerTimerButton: () => cy.get('[data-ngie-testid="timer-toggle-button"]'),
     advancedPlayerProgressBarButton: () => cy.get('[data-ngie-testid="progress-bar-toggle-button"]'),
     advancedPlayerVolumeControlButton: () => cy.get('[data-ngie-testid="volume-control-toggle-button"]'),

package/cypress/pages/components/additionalSettingsPanel.js

@@ -11,11 +11,13 @@ const selectors = {
     additionalSettingsAcknowledgementsLabel: () => cy.get('.additional-settings-detail-wrapper .additional-settings-label').eq(2),
     additionalSettingsTeacherGuidelinesInputField: () => cy.get('[title="Teacher Scoring Guidelines"]'),
     additionalSettingsSampleAnswerInputField: () => cy.get('[title="Sample Answer"]'),
-    additionalSettingsAcknowledgementsInputField: () => cy.get('[title="Acknowledgements"]'),
+    additionalSettingsAcknowledgementsInputField: () => cy.get('[title="acknowledgements & reference"]'),
     //Font-size dropdown
     fontSizeLabel: () => cy.get('#Font-Size-dropdown-label'),
     fontSizeDropdown: () => cy.get('#Font-Size-select'),
-    fontSizeListOptions: (optionIndex) => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"]').eq(optionIndex)
+    fontSizeListOptions: (optionIndex) => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"]').eq(optionIndex),
+    fontSizeListOptionLabels: () => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"] .dropdown-label-text'),
+    fontSizesLabels: () => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"] .dropdown-post-label-text'),
 }
 
 const steps = {
@@ -31,6 +33,33 @@ const steps = {
             .click();
         additionalSettingsPanel.fontSizeListOptions(dropdownOptionIndex)
             .click();
+    },
+
+    enterTextInTeacherGuidelinesInputField: (teacherGuidelinesText) => {
+        additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField()
+            .click()
+            .type(teacherGuidelinesText)
+            .blur();
+        additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField()
+            .should('have.text', teacherGuidelinesText);
+    },
+
+    enterTextInSampleAnswerInputField: (sampleAnswer) => {
+        additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
+            .click()
+            .type(sampleAnswer)
+            .blur();
+        additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
+            .should('have.text', sampleAnswer);
+    },
+
+    enterTextInAcknowledgementsInputField: (acknowledgements) => {
+        additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
+            .click()
+            .type(acknowledgements)
+            .blur();
+        additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
+            .should('have.text', acknowledgements);
     }
 }
 
@@ -62,7 +91,7 @@ const tests = {
                 .should('have.text', 'Teacher scoring guidelines');
         });
 
-        it('\'Sample Answer\' label and input field should be displayed and user should be able to enter \'Sample Answer\'', () => {
+        it('\'Sample answer\' label and input field should be displayed and user should be able to enter \'Sample answer\'', () => {
             additionalSettingsPanel.additionalSettingsSampleAnswerLabel()
                 .verifyInnerText('Sample answer');
             additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
@@ -70,9 +99,9 @@ const tests = {
                 .should('have.text', 'Sample Answer');
         });
 
-        it('\'Acknowledgements\' label and input field should be displayed and user should be able to enter \'Acknowledgements\'', () => {
+        it('\'Acknowledgements & reference\' label and input field should be displayed and user should be able to enter \'Acknowledgements\'', () => {
             additionalSettingsPanel.additionalSettingsAcknowledgementsLabel()
-                .should('have.text', 'Acknowledgements');
+                .verifyInnerText('Acknowledgements & reference');
             additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
                 .type('Acknowledgements')
                 .should('have.text', 'Acknowledgements');
@@ -110,9 +139,8 @@ const tests = {
     },
 
     verifyFontSizeSectionContents: () => {
-        const fontsizes = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
-
-        it('CSS of \'Font Size\' dropdown', { tags: 'css' }, () => {
+        const fontSizes = { 'Tiny': '12 px', 'Small': '14 px', 'Default': '16 px', 'Normal': '18 px', 'Big': '22 px', 'Huge': '26 px' };
+        it('CSS of \'Font Size\' dropdown - default state', { tags: 'css' }, () => {
             additionalSettingsPanel.fontSizeLabel()
                 .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
             additionalSettingsPanel.fontSizeDropdown()
@@ -128,24 +156,28 @@ const tests = {
                 .verifyInnerText('Default');
         });
 
-        it('Clicking on Font Size dropdown should open a list of 6 options - Default, Small, Normal, Large, Extra large, Huge', () => {
+        it(`Clicking on \'Font size\' dropdown should open a list of ${Object.keys(fontSizes).length} options - ${Object.keys(fontSizes).join(',')}`, () => {
             additionalSettingsPanel.fontSizeDropdown()
                 .realClick();
             additionalSettingsPanel.fontSizeListOptions(0)
                 .should('be.visible');
-            fontsizes.forEach((index, count) => {
-                additionalSettingsPanel.fontSizeListOptions(count)
-                    .verifyInnerText(index);
+            Object.keys(fontSizes).forEach((size, index) => {
+                additionalSettingsPanel.fontSizeListOptionLabels()
+                    .eq(index)
+                    .verifyInnerText(size);
+                additionalSettingsPanel.fontSizesLabels()
+                    .eq(index)
+                    .verifyInnerText(fontSizes[size]);
             });
             cy.get('body')
                 .click();
         });
 
-        it('CSS of Font size dropdown in Active state', { tags: 'css' }, () => {
+        it('CSS of Font size dropdown - active state', { tags: 'css' }, () => {
             cy.log('Pre step: Clicking on Font size dropdown')
             additionalSettingsPanel.fontSizeDropdown()
                 .click();
-            additionalSettingsPanel.fontSizeListOptions(0)
+            additionalSettingsPanel.fontSizeListOptions(2)
                 .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
                 .should('have.css', 'background-color', css.color.liTextSelectedBg);
             additionalSettingsPanel.fontSizeListOptions(1)

package/cypress/pages/components/autoScoredAdditionalSettings.js

@@ -5,7 +5,7 @@ const css = Cypress.env('css');
 
 const selectors = {
     allowStudentsToCheckAnswerLabel: () => cy.get('.allow-student-check-answer-checkbox-wrapper .MuiFormControlLabel-label'),
-    allowStudentsToCheckAnswerCheckbox: () => cy.get('.ngie-checkbox [aria-label="Allow students to check answer"]'),
+    allowStudentsToCheckAnswerCheckbox: () => cy.get('.ngie-checkbox [aria-label="Allow student to check answer"]'),
     checkAnswerLabel: () => cy.get('.edit-check-answer-label'),
     maximumCheckAnswerAttemptsLabel: () => cy.get('[class*="CheckAnswerstyles__OptionWrapper"] label[class*="MuiFormLabel-root MuiInputLabel-root"]'),
     maximumCheckAnswerAttemptsInputField: () => cy.get('[class*="CheckAnswerstyles__OptionWrapper"] input[type="text"]'),
@@ -48,11 +48,11 @@ const tests = {
                 .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
         });
 
-        it('\'Check Answer\' label, \'Allow students to check answer\' checkbox label and checkbox should be displayed and by default it should be unchecked', () => {
+        it('\'Check Answer\' label, \'Allow student to check answer\' checkbox label and checkbox should be displayed and by default it should be unchecked', () => {
             autoScoredAdditionalSettings.checkAnswerLabel()
                 .verifyInnerText('Check answer');
             autoScoredAdditionalSettings.allowStudentsToCheckAnswerLabel()
-                .verifyInnerText('Allow students to check answer');
+                .verifyInnerText('Allow student to check answer');
             autoScoredAdditionalSettings.allowStudentsToCheckAnswerCheckbox()
                 .should('not.be.checked');
             if (questionType === 'multiple selection' || questionType === 'single selection') {
@@ -64,7 +64,7 @@ const tests = {
             }
         });
 
-        it('When the user checks the \'Allow students to check answer\' checkbox, \'Maximum check answer attempts\' label and input field should be displayed', () => {
+        it('When the user checks the \'Allow student to check answer\' checkbox, \'Maximum check answer attempts\' label and input field should be displayed', () => {
             autoScoredAdditionalSettings.allowStudentsToCheckAnswerCheckbox()
                 .click()
                 .should('be.checked');
@@ -121,7 +121,7 @@ const tests = {
                 .should('not.have.class', 'Mui-disabled');
         });
 
-        it('When the user unchecks the \'Allow students to check answer\' checkbox, then the \'Maximum check answer attempts\' input field should not be displayed and in Preview tab the \'Check Answer\' button should not be displayed', () => {
+        it('When the user unchecks the \'Allow student to check answer\' checkbox, then the \'Maximum check answer attempts\' input field should not be displayed and in Preview tab the \'Check Answer\' button should not be displayed', () => {
             cy.log('Pre step: Switching to Edit tab')
             createQuestionBasePage.steps.switchToEditTab();
             autoScoredAdditionalSettings.allowStudentsToCheckAnswerCheckbox()
@@ -164,7 +164,7 @@ const tests = {
                 .click();
             autoScoredPreviewBase.checkAnswerButton()
                 .click();
-            autoScoredPreviewBase.correctIncorectAnswerLabel()
+            autoScoredPreviewBase.correctIncorrectAnswerLabel()
                 .should('not.exist');
             autoScoredPreviewBase.correctIcon()
                 .should('not.exist');

package/cypress/pages/components/autoScoredPreviewBase.js

@@ -4,7 +4,7 @@ const css = Cypress.env('css');
 const selectors = {
     correctIcon: () => cy.get('.icon-correct'),
     incorrectIcon: () => cy.get('.icon-incorrect'),
-    correctIncorectAnswerLabel: () => cy.get('.answer-label-text'),
+    correctIncorrectAnswerLabel: () => cy.get('.answer-label-text'),
     checkAnswerButton: () => cy.get('.check-answer-and-status-wrapper button'),
     correctIncorrectAnswerBorder: () => cy.get('[class*="question-preview-wrapper"] [class*="correct-answer-border"]')
 }
@@ -29,7 +29,7 @@ const steps = {
     },
 
     verifyCorrectIncorrectAnswerLabel: (labelText) => {
-        autoScoredPreviewBase.correctIncorectAnswerLabel()
+        autoScoredPreviewBase.correctIncorrectAnswerLabel()
             .should('be.visible')
             .verifyInnerText(`${labelText} answer`)
             .parents('[class*="CorrectIncorrectAnswerstyles__AnswerLabelWrapper"]')
@@ -60,20 +60,18 @@ const steps = {
     },
 
     verifyCorrectIncorrectAnswerLabelNotExists: () => {
-        autoScoredPreviewBase.correctIncorectAnswerLabel()
+        autoScoredPreviewBase.correctIncorrectAnswerLabel()
             .should('not.exist');
     },
 
     verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked: () => {
-        cy.log('After deselecting Show correct answer checkbox, the question preview should return to the previous state');
-        previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
-            .click()
-            .should('not.be.checked');
+        cy.log('After selecting student view radio button, the question preview should return to the previous state');
+        previewScoringAndShowCorrectAnswerComponent.steps.uncheckShowCorrectAnswerCheckbox();
         autoScoredPreviewBase.correctIcon()
             .should('not.exist');
         autoScoredPreviewBase.incorrectIcon()
             .should('not.exist');
-        autoScoredPreviewBase.correctIncorectAnswerLabel()
+        autoScoredPreviewBase.correctIncorrectAnswerLabel()
             .should('not.exist');
         autoScoredPreviewBase.correctIncorrectAnswerBorder()
             .should('not.exist');

package/cypress/pages/components/autoScoredScoringSection.js

@@ -42,7 +42,7 @@ const steps = {
 
     verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer: () => {
         previewScoringAndShowCorrectAnswerComponent.previewScoreText()
-            .should('have.css', 'color', css.color.labels)
+            .should('have.css', 'color', css.color.text)
             .and('not.have.css', 'background-color', css.color.correctAnswer);
     },
 
@@ -62,8 +62,10 @@ const tests = {
             scoringSectionBase.pointsInputField()
                 .should('have.value', '')
                 .and('be.visible');
+            scoringSectionBase.steps.expandMinimumScoringDropdown();
+            scoringSectionBase.steps.selectMinimumScoringTypeListOption('Award minimum score only if attempted');
             scoringSectionBase.minimumScoreIfAttemptedLabel()
-                .verifyInnerText('Minimum score awarded (if attempted)')
+                .verifyInnerText('Minimum points')
                 .and('be.visible');
             scoringSectionBase.minimumScoreIfAttemptedInputField()
                 .should('have.value', '')
@@ -96,7 +98,7 @@ const tests = {
             scoringSectionBase.pointsInputField()
                 .should('have.value', '0')
                 .should('be.disabled');
-            scoringSectionBase.minimumScoreIfAttemptedInputField()
+            scoringSectionBase.minimumScoringDropdown()
                 .should('not.exist');
         });
 
@@ -106,11 +108,17 @@ const tests = {
     },
 
     verifyShowCorrectAnswerAndPointsInPreviewTabWhenNoCorrectAnswerIsSet: () => {
-        it('When the user has not set correct answer option(s) and alloted points, \'Show correct answer\' and points should not be displayed in the preview tab', () => {
+        it('When the user has not set correct answer option(s) and alloted points, \'Student view\' radio button should be checked, \'Grading view\' button should not be checked, 0 points should be displayed and no correct or incorrect icons should be displayed in the preview tab', () => {
             createQuestionBasePage.steps.switchToPreviewTab();
-            previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
-                .should('not.exist');
+            previewScoringAndShowCorrectAnswerComponent.studentViewRadioButton()
+                .should('be.checked');
+            previewScoringAndShowCorrectAnswerComponent.gradingViewRadioButton()
+                .should('not.be.checked');
             previewScoringAndShowCorrectAnswerComponent.previewScoreText()
+                .should('have.text', '0/0');
+            autoScoredPreviewBase.correctIcon()
+                .should('not.exist');
+            autoScoredPreviewBase.incorrectIcon()
                 .should('not.exist');
         });
     },
@@ -134,14 +142,14 @@ const tests = {
                 .should('have.css', 'color', css.color.primaryBtn)
                 .and('have.css', 'background-color', css.color.correctAnswer)
             if (steps.correctIncorrectLabelAndBorderExists(questionType)) {
-                autoScoredPreviewBase.correctIncorectAnswerLabel()
+                autoScoredPreviewBase.correctIncorrectAnswerLabel()
                     .verifyCSS(css.color.correctAnswer, css.fontSize.normal, css.fontWeight.bold)
                     .parent()
-                    .find('.answer-label-icon')
+                    .find('.icon-correct')
                     .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
                 autoScoredPreviewBase.steps.verifyCorrectAttemptBorder();
             } else {
-                autoScoredPreviewBase.correctIncorectAnswerLabel()
+                autoScoredPreviewBase.correctIncorrectAnswerLabel()
                     .should('not.exist');
                 autoScoredPreviewBase.correctIncorrectAnswerBorder()
                     .should('not.exist');
@@ -157,22 +165,20 @@ const tests = {
         it('CSS of incorrect answer state', { tags: 'css' }, () => {
             cy.log('Pre requisite: The user has attempted the question incorrectly')
             cy.log('Pre step: Select show answer checkbox')
-            previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
-                .click()
-                .should('be.checked');
+            previewScoringAndShowCorrectAnswerComponent.steps.checkShowCorrectAnswerCheckbox();
             cy.log('Verifying CSS of incorrect crossmark icon')
             autoScoredPreviewBase.incorrectIcon()
                 .eq(0)
                 .verifyPseudoClassBeforeProperty('color', css.color.incorrectAnswer);
             if (steps.correctIncorrectLabelAndBorderExists(questionType)) {
-                autoScoredPreviewBase.correctIncorectAnswerLabel()
+                autoScoredPreviewBase.correctIncorrectAnswerLabel()
                     .verifyCSS(css.color.incorrectAnswer, css.fontSize.normal, css.fontWeight.bold)
                     .parent()
-                    .find('.answer-label-icon')
+                    .find('.icon-incorrect')
                     .verifyPseudoClassBeforeProperty('color', css.color.incorrectAnswer);
                 autoScoredPreviewBase.steps.verifyIncorrectAttemptBorder();
             } else {
-                autoScoredPreviewBase.correctIncorectAnswerLabel()
+                autoScoredPreviewBase.correctIncorrectAnswerLabel()
                     .should('not.exist');
                 autoScoredPreviewBase.correctIncorrectAnswerBorder()
                     .should('not.exist');
@@ -182,9 +188,7 @@ const tests = {
         it('Accessibility of incorrect answer state', { tags: 'a11y' }, () => {
             cy.checkAccessibility(commonComponents.previewTabQuestionWrapper());
             cy.log('Post step: Deselect show answer checkbox')
-            previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
-                .click()
-                .should('not.be.checked');
+            previewScoringAndShowCorrectAnswerComponent.steps.uncheckShowCorrectAnswerCheckbox();
         });
     }
 }

package/cypress/pages/components/autoScoredScoringSectionMultipleResponsesType.js

@@ -1,3 +1,4 @@
+import utilities from "../../support/helpers/utilities";
 import { commonComponents } from "./commonComponents";
 import { scoringSectionBase } from "./scoringSectionBase";
 const css = Cypress.env('css');
@@ -13,8 +14,24 @@ const selectors = {
     partialEqualWeightsPointsPerResponseScore: () => cy.get('.cloze-with-text-partial-points'),
     penaltyPointsLabel: () => cy.get('.penalty-points-label'),
     penaltyPointsInputField: () => cy.get('.penlty-points-input-field [type="text"]'),
-    rounddownScoreCheckboxLabel: () => cy.get('[data-ngie-testid="round-down-score-checkbox"] .MuiFormControlLabel-label'),
+    rounddownScoreCheckboxLabel: () => cy.get('#rounding-dropdown-label'),
     rounddownScoreCheckbox: () => cy.get('[data-ngie-testid="round-down-score-checkbox"] input'),
+    roundingDropdown: () => cy.get('#rounding-select'),
+    roundingDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="rounding-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="rounding-dropdown-label"] [role="option"]')
+        }
+    },
+    penaltyScoringDropdown: () => cy.get('#penalty-scoring-select'),
+    penaltyScoringDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="penalty-scoring-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="penalty-scoring-dropdown-label"] [role="option"]')
+        }
+    },
 }
 
 const steps = {
@@ -41,6 +58,8 @@ const steps = {
 
     //V3 - This function should be updated in all files
     verifyDefaultPenaltyPointsInputFieldAndLabel: () => {
+        autoScoredScoringSectionMultipleResponsesType.steps.expandPenaltyScoringDropdown();
+        autoScoredScoringSectionMultipleResponsesType.steps.selectOptionFromPenaltyScoringDropdown('Penalty points for the entire question');
         autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel()
             .verifyInnerText('Penalty points')
             .should('be.visible');
@@ -52,14 +71,44 @@ const steps = {
     //V3 - This function should be updated in all files
     verifyDefaultRoundDownScoreCheckboxCheckedAndLabel: () => {
         autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel()
-            .verifyInnerText('Round down score')
+            .verifyInnerText('Rounding')
             .and('be.visible');
-        autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckbox()
-            .should('be.checked');
+        autoScoredScoringSectionMultipleResponsesType.roundingDropdown()
+            .verifyInnerText('None');
+    },
+
+    expandRoundingDropdown: () => {
+        autoScoredScoringSectionMultipleResponsesType.roundingDropdown()
+            .click();
+    },
+
+    /**
+     * @param {("none" | "round down if <= 0.99" | "round down if <= 0.50"|"round down if <= 0.50; Round up if > 0.50")} dropdownOption aria-label of dropdown options
+     * @description this function selects dropdown option from rounding dropdown
+     */
+    selectOptionFromRoundingDropdownOption: (dropdownOption) => {
+        autoScoredScoringSectionMultipleResponsesType.roundingDropdownListOptions(dropdownOption)
+            .click();
+    },
+
+    expandPenaltyScoringDropdown: () =>  {
+        autoScoredScoringSectionMultipleResponsesType.penaltyScoringDropdown()
+            .click();
+    },
+
+    /**
+     * @param {("No penalty points" | "Penalty points for the entire question" | "Penalty points for each incorrect option")} dropdownOption aria-label of dropdown options
+     * @description this function selects dropdown option from penalty points dropdown
+     */
+    selectOptionFromPenaltyScoringDropdown: (dropdownOption) => {
+        autoScoredScoringSectionMultipleResponsesType.penaltyScoringDropdownListOptions(dropdownOption)
+            .click();
     },
 
     //V3 - This function should be updated in all files
     allotPenaltyPoints: (points) => {
+        autoScoredScoringSectionMultipleResponsesType.steps.expandPenaltyScoringDropdown();
+        autoScoredScoringSectionMultipleResponsesType.steps.selectOptionFromPenaltyScoringDropdown('Penalty points for the entire question');
         autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
             .clear()
             .type(points)
@@ -248,14 +297,16 @@ const tests = {
         it('CSS of \'Round down score\' checkbox - checked state', { tags: 'css' }, () => {
             autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel()
                 .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
-            autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckbox()
-                .parent()
-                .find('svg g g')
-                .should('have.css', 'fill', css.color.activeButtons);
+            utilities.verifyCSS(autoScoredScoringSectionMultipleResponsesType.roundingDropdown(), {
+                'color' : css.color.liText,
+                'font-size' : css.fontSize.default,
+                'font-weight' : css.fontWeight.regular,
+                'border' : `1px solid ${css.color.defaultDropdownBorder}`
+            })
         });
 
         it('Accessibility of \'Round down score\' checkbox  - checked state', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel());
+            cy.checkAccessibility(autoScoredScoringSectionMultipleResponsesType.roundingDropdown());
         });
     },
 }

package/cypress/pages/components/autoScoredSetCorrectAnswerSection.js

@@ -82,9 +82,9 @@ const steps = {
 
 const tests = {
     verifyAutoScoredSetCorrectAnswerHeaderSectionContents: (questionType) => {
-        it('\'Set Correct Answer\' label and help text should be displayed in \'Set Correct Answer\' section', () => {
+        it('\'Specify correct answer\' label and help text should be displayed in \'Specify correct answer\' section', () => {
             autoScoredSetCorrectAnswerSection.setCorrectAnswerLabel()
-                .verifyInnerText('Set correct answer');
+                .verifyInnerText('Specify correct answer');
 
             let helpText;
             switch (questionType) {
@@ -142,14 +142,14 @@ const tests = {
             autoScoredSetCorrectAnswerSection.setCorrectAnswerHelpText().verifyInnerText(helpText);
         });
 
-        it('CSS of \'Set correct answer\' header section', { tags: 'css' }, () => {
-            cy.log('CSS of set correct answer label')
+        it('CSS of \'Specify correct answer\' header section', { tags: 'css' }, () => {
+            cy.log('CSS of Specify correct answer label')
             autoScoredSetCorrectAnswerSection.setCorrectAnswerLabel()
                 .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);
-            cy.log('CSS of set correct answer help text')
+            cy.log('CSS of Specify correct answer help text')
             autoScoredSetCorrectAnswerSection.setCorrectAnswerHelpText()
                 .verifyCSS(css.color.helperText, css.fontSize.normal, css.fontWeight.regular);
-            cy.log('CSS of set correct answer correct tab')
+            cy.log('CSS of Specify correct answer correct tab')
             autoScoredSetCorrectAnswerSection.correctTab()
                 .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.bold);
         });
@@ -163,7 +163,7 @@ const tests = {
     verifyAutoScoredAlternateAnswer: (questionType = null) => {
         it('\'Add Alternate Answer\' button should be present', () => {
             autoScoredSetCorrectAnswerSection.alternateAnswerButton()
-                .verifyInnerText('Add alternate answer');
+                .verifyInnerText('Add alternative answer');
         });
 
         it('CSS of \'Add Alternate Answer\' button', { tags: 'css' }, () => {

package/cypress/pages/components/createQuestionBasePage.js

@@ -69,7 +69,7 @@ const steps = {
         createQuestionBasePage.previewTab()
             .should('have.attr', 'aria-selected', 'true');
     },
-    
+
     clickOnSaveQuestionButton: () => {
         createQuestionBasePage.saveQuestionButton()
             .click();
@@ -83,6 +83,12 @@ const steps = {
     verifyPreviewTabNotSelectedState: () => {
         createQuestionBasePage.previewTab()
             .should('have.attr', 'aria-selected', 'false');
+    },
+
+    verifySavedSuccessfullySnackbar: () => {
+        commonComponents.snackbar()
+            .should('have.text', 'Saved successfully!')
+            .should('be.visible');
     }
 }
 
@@ -114,7 +120,7 @@ const tests = {
         });
 
         it('\'Save\' button should be displayed', () => {
-            if (questionType === 'Passage' || questionType === 'Reading ruler') {
+            if (questionType === 'Passage' || questionType === 'Reading ruler' || questionType === 'Audio player') {
                 createQuestionBasePage.saveQuestionButton()
                     .verifyInnerText('Save');
             }

package/cypress/pages/components/draggableOptionsContainer.js

@@ -28,7 +28,8 @@ const selectors = {
     },
     previewTabGroupedResponseContainer: () => cy.get('.edit-question-preview-wrapper [class*="GroupDiv"]'),
     previewTabGroupedResponseTitle: () => cy.get('.edit-question-preview-wrapper [class*="GroupTitleWrapper"]'),
-    previewTabGroupedResponseOptionsGrid: () => cy.get('.edit-question-preview-wrapper [class*="DraggableGroupsGrid"]')
+    previewTabGroupedResponseOptionsGrid: () => cy.get('.edit-question-preview-wrapper [class*="DraggableGroupsGrid"]'),
+    draggableOptionText: () => cy.get('.icon-container-wrapper [class*="DraggableItemsstyle__QuestionTextWrapper"]')
 }
 
 const steps = {

package/cypress/pages/components/equationEditorFlyout.js

@@ -30,7 +30,8 @@ const selectors = {
     buttonPrevious: () => cy.get('.previous-btn'),
     inputFieldCursor: () => cy.get('.mq-hasCursor'),
     inputFieldFirstEmptyBox: () => cy.get('.mq-empty').eq(0),
-    categoryTooltip: () => cy.get('.__react_component_tooltip')
+    categoryTooltip: () => cy.get('.__react_component_tooltip'),
+    dialogBoxTitle: () => cy.get('[role="alertdialog"]')
 }
 
 const steps = {

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -14,9 +14,9 @@ const selectors = {
     previewTabToolbarWrapper: () => cy.get('.toolbar-overlay'),
     previewTabToolbarOption: (formattingOption = null) => {
         if (formattingOption) {
-            return cy.get(`.essay-preview-wrapper a[title = "${formattingOption}"]`).eq(0)
+            return cy.get(`.essay-preview-wrapper a[title = "${formattingOption}"]`)
         } else {
-            return cy.get('.essay-preview-wrapper a[title]').eq(0)
+            return cy.get('.essay-preview-wrapper a[role="button"]')
         }
     },
     //Additional settings
@@ -37,8 +37,8 @@ const selectors = {
     customSpecialCharacterInputField: () => cy.get('input[aria-label="Custom Special Characters"]'),
     wordLimitReachedWarningMessage: () => cy.get('[data-at="limit-reached"]'),
     //Preview tab
-    responseField: () => cy.get('[title="Enter your response to the question here."]').eq(0),
-    responseFieldWordCount: () => cy.get('[data-at="character-count"]').eq(0),
+    responseField: () => cy.get('[title="Enter your response to the question here."]'),
+    responseFieldWordCount: () => cy.get('[data-at="character-count"]'),
 }
 
 const steps = {
@@ -96,6 +96,12 @@ const steps = {
             .type('{backspace}');
     },
 
+    enterTextInPredefinedTextInputField: (predefinedText) => {
+        essayResponseCommonComponents.predefinedTextInputField()
+            .type(predefinedText)
+            .should('have.text', predefinedText);
+    },
+
     verifyGradingViewResponseFieldIsNonEditable: () => {
         essayResponseCommonComponents.responseField()
             .should('have.attr', 'contenteditable', 'false');

package/cypress/pages/components/figOverImageCommonComponent.js

@@ -9,6 +9,7 @@ const pointerDropdownList = ['Left', 'Right', 'Top', 'Bottom', 'Top left', 'Top
 
 const selectors = {
     addResponseContainerButton: () => cy.get('[class*="ResponseOnImagestyles"] .ngie-icon-with-label-btn').eq(0),
+    addResponseContainerButtonWrapper: () => cy.get('[class*="ResponseOnImagestyles__ButtonWrapper"]'),
     //Change selectors after https://redmine.zeuslearning.com/issues/518498 is fixed
     responseContainer: () => cy.get('.react-draggable'),
     responseContainerCloseButton: () => cy.get('.remove-button'),
@@ -30,7 +31,7 @@ const selectors = {
     ariaLabelsInputFieldNumeration: () => cy.get('.start-adornment'),
     pleaseAddResponseTokenHelpText: () => cy.get('[class*="ClozeWithTextResponsestyles__AddResponseLabel"]'),
     setCorrectAnswerResponseFieldLabel: () => cy.get('.cloze-with-text-form-control-wrapper .input-field-label'),
-    imageSectionImageLabel: () => cy.get('[class*="LabelImageWithDropDownstyles__LabelWrapper"]'),
+    imageSectionImageLabel: () => cy.get('[class*="LabelImage"][class*="styles__LabelWrapper"]'),
     imageSectionImage: () => cy.get('.image-container img'),
     imagePreviewTab: () => cy.get('[class*="ClozeWithTextResponsestyles__ContentWrapper"] .image-container img'),
     imagePropertiesContainer: () => cy.get('[class*="AddTextResponseOnImagestyles__DimensionsContainer"]'),