itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/fixtures/evaluationMethodsAndCustomSettings.js

@@ -0,0 +1,83 @@
+export const evaluationMethods = [
+    {
+        name: 'Symbols are equivalent',
+        description: 'Response inputted needs to be equivalent to be marked correct',
+        answerInputField: 'true',
+        customSettings: ['Case sensitive', 'Accept interval notation', 'Exclude LaTeX text from validation', 'Check for equality across sides', 'Interpret alphabets as variables', 'Interpret e as Euler\'s number', 'Interpret i as imaginary', 'Decimal separator', 'Thousands separator', 'Decimal places to be compared'],
+    },
+    {
+        name: 'Value is equivalent',
+        description: 'Response inputted needs to be equivalent but can be represented differently to be marked correct',
+        answerInputField: 'true',
+        customSettings: ['Case sensitive', 'Exclude LaTeX text from validation', 'Check for equality across sides', 'Decimal separator', 'Thousands separator', 'Decimal places to be compared', 'Tolerance']
+    },
+    {
+        name: 'Match value',
+        description: 'Response inputted needs to be equal and represented the same way to be marked correct',
+        answerInputField: 'true',
+        customSettings: ['Case sensitive', 'Accept interval notation', 'Accept expressions in any order', 'Exclude from possible correct answers', 'Ignore zeros after decimal', 'Ignore unit coefficient', 'Check for parenthesis grouping', 'Decimal separator', 'Thousands separator']
+    },
+    {
+        name: 'Equivalent structure',
+        description: 'Response inputted needs to be in set structure / format to be marked correct',
+        answerInputField: 'false',
+        customSettings: ['Case sensitive', 'Syntax']
+    },
+    {
+        name: 'Response is true',
+        description: 'Response inputted needs to be a true equation / inequality to be marked correct',
+        answerInputField: 'true',
+        customSettings: ['Case sensitive', 'Decimal separator', 'Thousands separator', 'Decimal places to be compared']
+    },
+    {
+        name: 'Expanded form',
+        description: 'Response inputted needs to be in expanded form to be marked correct',
+        answerInputField: 'false',
+        customSettings: ['Case sensitive', 'Decimal separator', 'Thousands separator']
+    },
+    {
+        name: 'Factored form',
+        description: 'Response inputted needs to be in factored form to be marked correct',
+        answerInputField: 'false',
+        customSettings: ['Case sensitive', 'Decimal separator', 'Thousands separator', 'Type of expression']
+    },
+    {
+        name: 'Simplified version',
+        description: 'Response inputted needs to be in simplified form to be marked correct',
+        answerInputField: 'false',
+        customSettings: ['Case sensitive', 'Decimal separator', 'Thousands separator']
+    },
+    {
+        name: 'Match exact',
+        description: 'Response entered needs to be an exact match to be marked correct',
+        answerInputField: 'true',
+        customSettings: ['Case sensitive', 'Ignore spaces before and after', 'Ignore extra spaces'],
+    }
+]
+
+export const syntaxDropdown = ['Number', 'Integer', 'Decimal', 'Scientific', 'Variable', 'Fraction', 'Mixed fraction', 'Simple fraction', 'Fraction or decimal', 'Expression', 'Equation']
+
+export const typeOfExpression = ['Integer', 'Real', 'Complex']
+
+export const decimalSeparator = ['Dot', 'Comma']
+
+export const thousandsSeparatorForDotDecimalSeparator = ['None', 'Comma or space', 'Comma', 'Space']
+
+export const thousandsSeparatorForCommaDecimalSeparator = ['None', 'Dot or space', 'Dot', 'Space']
+
+export const customSettingsIds = {
+    caseSensitive: 'case-sensitive-checkbox',
+    acceptIntervalNotation: 'accept-interval-notation-checkbox',
+    excludeLatexTextFromValidation: 'exclude-latex-text-from-validation-checkbox',
+    checkForEqualityAcrossSides: 'check-for-equality-across-sides-checkbox',
+    interpretAlphabetsAsVariables: 'interpret-alphabets-as-variables-checkbox',
+    interpretEAsEulerNumber: 'interpret-e-as-euler\'s-number-checkbox',
+    interpretIAsImaginary: 'interpret-i-as-imaginary-checkbox',
+    acceptExpressionsInAnyOrder: 'accept-expressions-in-any-order-checkbox',
+    excludeFromPossibleCorrectAnswers: 'exclude-from-possible-correct-answers-checkbox',
+    ignoreZerosAfterDecimal: 'ignore-zeros-after-decimal-checkbox',
+    ignoreUnitCoefficient: 'ignore-unit-coefficient-checkbox',
+    checkForParenthesisGrouping: 'check-for-parenthesis-groups-checkbox',
+    ignoreSpacesBeforeAndAfter: 'ignore-spaces-before-and-after-checkbox',
+    ignoreExtraSpaces: 'ignore-extra-spaces-checkbox',
+}

package/cypress/fixtures/theme/ilc.json

@@ -74,7 +74,7 @@
         "titleContainerBorder": "rgb(107, 139, 255)",
         "optionNumerationBg": "rgb(214, 224, 255)",
         "panelLabel": "rgb(0, 0, 124)",
-        "dragOptionActiveBorder": "rgb(107, 139, 255)",
+        "correctOptionBorder": "rgb(107, 139, 255)",
         "feedbackStar": "rgb(226, 121, 0)",
         "clickTapAnywhereAreaBg": "rgb(102, 102, 102)",
         "recordingIcon": "rgb(209, 51, 51)",
@@ -85,7 +85,26 @@
         "fileUploadProgressBarFill": "rgb(74, 147, 224)",
         "responseContainerPointer": "rgba(0, 0, 46, 0.4)",
         "activeHighlightBorder": "rgb(41, 0, 128)",
-        "hoverHighlightBorder": "rgb(66, 0, 204)"
+        "hoverHighlightBorder": "rgb(66, 0, 204)",
+        "selectToolbarOptionBg": "rgb(186, 201, 255)",
+        "defaultToolbarOptionBg": "rgb(245, 247, 254)",
+        "toolBarOptionTooltipBackground": "rgba(34, 34, 34, 0.9)",
+        "correctAnswerLabelBg": "rgb(199, 238, 210)",
+        "incorrectAnswerLabelBg": "rgb(255, 244, 241)",
+        "matrixHeadingCellBg": "rgb(214, 223, 255)",
+        "matrixSubheadingCellBg": "rgb(238, 241, 251)",
+        "matrixCellBorder": "rgb(82, 0, 255)",
+        "draggableOptionsContainerBg": "rgb(238, 241, 251)",
+        "draggableOptionsContainerBorder": "rgb(186, 201, 255)",
+        "draggableOptionBorder": "rgb(107, 139, 255)",
+        "matrixDropzoneCellBg": "rgb(245, 248, 255)",
+        "dropzoneCellIcon": "rgb(186, 201, 255)",
+        "noneCellIcon": "rgb(0, 0, 124)",
+        "unSelectedEvaluationMethodTitle": "rgb(82, 0, 255)",
+        "evaluationMethodContainerBorder": "rgb(186, 201, 255)",
+        "selectedEvaluationMethodContainerBg": "rgb(0, 0, 124)",
+        "customSettingsCheckboxLabel": "rgb(34, 34, 76)",
+        "separatorsUnselectedOption": "rgb(68, 68, 97)"
     },
     "fontSize": {
         "extraSmall": "10px",

package/cypress/pages/components/acceptedStudentInputComponent.js

@@ -0,0 +1,92 @@
+import utilities from "../../support/helpers/utilities";
+
+const acceptedStudentInputMenuButtons = ['Text', 'Number', 'Integer'];
+
+const selectors = {
+    acceptedStudentInputLabel: () => cy.get('.single-select-toggle-group-title'),
+    studentInputButton: () => cy.get('[class*="single-select-toggle-button"]'),
+    textStudentInputButton: () => cy.get('[class*="single-select-toggle-button"][value="1"]'),
+    numberStudentInputButton: () => cy.get('[class*="single-select-toggle-button"][value="2"]'),
+    integerStudentInputButton: () => cy.get('[class*="single-select-toggle-button"][value="3"]'),
+    acceptedStudentInputButtonGroup: () => cy.get('.single-select-toggle-group-double')
+}
+
+const steps = {
+    /**
+     * Select the accepted student input type for a specific answer input field.
+     * @param {number} answerInputFieldIndex - The index of the answer input field.
+     * @param {("Text" | "Number" | "Integer")} inputType - The type of accepted student input.
+     * @example - selectAcceptedStudentInputType(0, 'Text');
+     */
+    selectAcceptedStudentInputType: (answerInputFieldIndex, inputType) => {
+        utilities.getNthElement(acceptedStudentInputComponent.acceptedStudentInputButtonGroup(), answerInputFieldIndex)
+            .within(() => {
+                switch (inputType) {
+                    case 'Text':
+                        acceptedStudentInputComponent.textStudentInputButton()
+                            .click()
+                            .should('have.attr', 'aria-pressed', 'true');
+                        break;
+                    case 'Number':
+                        acceptedStudentInputComponent.numberStudentInputButton()
+                            .click()
+                            .should('have.attr', 'aria-pressed', 'true');
+                        break;
+                    case 'Integer':
+                        acceptedStudentInputComponent.integerStudentInputButton()
+                            .click()
+                            .should('have.attr', 'aria-pressed', 'true');
+                        break;
+                    default:
+                        throw new Error('Invalid input type');
+                }
+            });
+    },
+
+     /**
+     * Verify the accepted student input type button is active
+     * @param {number} answerInputFieldIndex - The index of the answer input field.
+     * @param {("Text" | "Number" | "Integer")} inputType - The type of accepted student input.
+     * @example - verifyAcceptedStudentTypeActiveButton(0, 'Text');
+     */
+    verifyAcceptedStudentTypeActiveButton: (answerInputFieldIndex, inputType) => {
+        utilities.getNthElement(acceptedStudentInputComponent.acceptedStudentInputButtonGroup(), answerInputFieldIndex)
+            .within(() => {
+                switch (inputType) {
+                    case 'Text':
+                        acceptedStudentInputComponent.textStudentInputButton()
+                            .should('have.attr', 'aria-pressed', 'true');
+                        break;
+                    case 'Number':
+                        acceptedStudentInputComponent.numberStudentInputButton()
+                            .should('have.attr', 'aria-pressed', 'true');
+                        break;
+                    case 'Integer':
+                        acceptedStudentInputComponent.integerStudentInputButton()
+                            .should('have.attr', 'aria-pressed', 'true');
+                        break;
+                    default:
+                        throw new Error('Invalid input type');
+                }
+            });
+    },
+
+    /**
+     * Verify the accepted student type menu buttons
+     * @param {number} answerInputFieldIndex - The index of the answer input field.
+     */
+    verifyAcceptedStudentTypeMenuButtons: (answerInputFieldIndex) => {
+        utilities.getNthElement(acceptedStudentInputComponent.acceptedStudentInputButtonGroup(), answerInputFieldIndex)
+            .within(() => {
+                acceptedStudentInputMenuButtons.forEach((studentInput, index) => {
+                    utilities.verifyInnerText(utilities.getNthElement(acceptedStudentInputComponent.studentInputButton(), index), studentInput);
+                });
+                utilities.verifyElementCount(acceptedStudentInputComponent.studentInputButton(), acceptedStudentInputMenuButtons.length);
+            });
+    }
+}
+
+export const acceptedStudentInputComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/additionalSettingsPanel.js

@@ -21,6 +21,7 @@ const selectors = {
 }
 
 const steps = {
+    //Enhancement: Remove this step, (this has incorrect spelling)
     expandAdditonalSettings: () => {
         additionalSettingsPanel.additionalSettingsPanel()
             .click()
@@ -33,7 +34,13 @@ const steps = {
             .click();
         additionalSettingsPanel.fontSizeListOptions(dropdownOptionIndex)
             .click();
-    }
+    },
+
+    expandAdditionalSettings: () => {
+        additionalSettingsPanel.additionalSettingsPanel()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
 }
 
 const tests = {

package/cypress/pages/components/allowMultipleInstancesOfSameDraggableOptionComponent.js

@@ -0,0 +1,54 @@
+import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    allowMultipleInstancesOfSameDraggableOptionCheckbox: () => cy.get('[data-ngie-testid="allow-multiple-instances-of-same-draggable-option-checkbox"] input'),
+    allowMultipleInstancesOfSameDraggableOptionCheckboxLabel: () => cy.get('[data-ngie-testid="allow-multiple-instances-of-same-draggable-option-checkbox"] .MuiFormControlLabel-label'),
+}
+
+const steps = {
+    checkAllowMultipleInstancesOfSameDraggableOptionCheckbox: () => {
+        allowMultipleInstancesOfSameDraggableOptionComponent.allowMultipleInstancesOfSameDraggableOptionCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckAllowMultipleInstancesOfSameDraggableOptionCheckbox: () => {
+        allowMultipleInstancesOfSameDraggableOptionComponent.allowMultipleInstancesOfSameDraggableOptionCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+}
+
+const tests = {
+    verifyAllowMultipleInstancesOfSameDraggableOptionCheckboxAndLabelUncheckedCSS: () => {
+        it('CSS of \'Allow multiple instances of same draggable option\' checkbox and label - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(allowMultipleInstancesOfSameDraggableOptionComponent.allowMultipleInstancesOfSameDraggableOptionCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(allowMultipleInstancesOfSameDraggableOptionComponent.allowMultipleInstancesOfSameDraggableOptionCheckboxLabel().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+    },
+
+    verifyAllowMultipleInstancesOfSameDraggableOptionCheckboxCheckedCSSAndA11y: () => {
+        it('CSS of \'Allow multiple instances of same draggable option\' checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(allowMultipleInstancesOfSameDraggableOptionComponent.allowMultipleInstancesOfSameDraggableOptionCheckbox().parent().find('svg g g').eq(0), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Allow multiple instances of same draggable option\' checkbox - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(allowMultipleInstancesOfSameDraggableOptionComponent.allowMultipleInstancesOfSameDraggableOptionCheckbox().parents('[data-ngie-testid="allow-multiple-instances-of-same-draggable-option-checkbox"]'));
+        });
+    }
+}
+
+export const allowMultipleInstancesOfSameDraggableOptionComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/autoScoredAdditionalSettings.js

@@ -2,7 +2,7 @@ import { autoScoredPreviewBase } from "./autoScoredPreviewBase";
 import { createQuestionBasePage } from "./createQuestionBasePage";
 
 const css = Cypress.env('css');
-
+//This file is deprecated all functions related to check answer are present in autoScoredStudentViewSettings.js
 const selectors = {
     allowStudentsToCheckAnswerLabel: () => cy.get('.allow-student-check-answer-checkbox-wrapper .MuiFormControlLabel-label'),
     allowStudentsToCheckAnswerCheckbox: () => cy.get('.ngie-checkbox [aria-label="Allow student to check answer"]'),

package/cypress/pages/components/autoScoredScoringPreviewTab.js

@@ -0,0 +1,271 @@
+import utilities from "../../support/helpers/utilities";
+import { commonComponents } from "./commonComponents";
+const css = Cypress.env('css');
+//Note: The steps and tests in this file are prone to change with upcoming q types. The below are final for mcq. we will move the components from these files after new q types are provided.
+const selectors = {
+    previewScoreText: () => cy.get('[class*="_ScoreWrapper"]'),
+    gradingViewRadioButton: () => cy.get('.preview-mode-wrapper input[aria-label="Grading View"]'),
+    studentViewRadioButton: () => cy.get('.preview-mode-wrapper input[aria-label="Student View"]'),
+    studentViewRadioButtonLabel: () => cy.get('label[aria-label="Student View"]'),
+    gradingViewRadioButtonLabel: () => cy.get('label[aria-label="Grading View"]'),
+    scoreLabelPreviewTab: () => cy.get('[class*="ScoreLabelWrapper"]'),
+    correctIcon: () => cy.get('.icon-correct'),
+    incorrectIcon: () => cy.get('.icon-incorrect'),
+    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"]'),
+    scoringTypeLabelPreviewTab: () => cy.get('.score-text-wrapper')
+}
+
+const steps = {
+    switchToGradingView: () => {
+        autoScoredScoringPreviewTab.gradingViewRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    switchToStudentView: () => {
+        autoScoredScoringPreviewTab.studentViewRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * @param {number} scoredPoints points scored by the user
+     * @param {number} totalPoints maximum points that can be achieved by the user
+     * @description this function verifies score displayed in the preview tab
+     */
+    verifyPreviewScore: (scoredPoints, totalPoints) => {
+        autoScoredScoringPreviewTab.previewScoreText()
+            .should('have.text', `${scoredPoints}/${totalPoints}`);
+    },
+
+    correctIncorrectLabelAndBorderExists: (questionType) => {
+        switch (questionType) {
+            case 'multiple selection':
+                return true;
+            case 'single selection':
+                return false;
+            default:
+                throw new Error('Invalid question type');
+        }
+    },
+
+    checkAnswer: () => {
+        autoScoredScoringPreviewTab.checkAnswerButton()
+            .click();
+    },
+
+    verifyCheckAnswerButtonEnabled: () => {
+        autoScoredScoringPreviewTab.checkAnswerButton()
+            .should('be.enabled');
+    },
+
+    verifyCheckAnswerButtonDisabled: () => {
+        autoScoredScoringPreviewTab.checkAnswerButton()
+            .should('be.disabled');
+    },
+
+    /**
+     * Verifies the visibility and content of the correct/incorrect answer label in the auto-scored scoring preview tab.
+     * @param {('Correct' | 'Incorrect')} labelText - The expected text content of the label.
+     * @description This function checks if the correct/incorrect answer label is visible, has the expected text content,
+     * and is associated with the corresponding icon based on the provided labelText.
+     */
+    verifyCorrectIncorrectAnswerLabel: (labelText) => {
+        autoScoredScoringPreviewTab.correctIncorrectAnswerLabel()
+            .should('be.visible')
+            .verifyInnerText(`${labelText} answer`)
+            .parents('[class*="CorrectIncorrectAnswerstyles__AnswerLabelWrapper"]')
+            .find('.answer-label-icon')
+            .should('be.visible')
+            .should('have.text', `${labelText}-Icon`)
+    },
+
+    verifyCorrectAttemptBorder: () => {
+        utilities.verifyCSS(autoScoredScoringPreviewTab.correctIncorrectAnswerBorder(), {
+            'border': `1px solid ${css.color.correctAnswer}`
+        });
+    },
+
+    verifyIncorrectAttemptBorder: () => {
+        utilities.verifyCSS(autoScoredScoringPreviewTab.correctIncorrectAnswerBorder(), {
+            'border': `1px solid ${css.color.incorrectAnswer}`
+        });
+    },
+
+    verifyCorrectIncorrectBorderNotVisible: () => {
+        autoScoredScoringPreviewTab.correctIncorrectAnswerBorder()
+            .should('have.css', 'border')
+            .and('match', /0px none/);
+    },
+
+    verifyCorrectIncorrectBorderNotExists: () => {
+        utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIncorrectAnswerBorder(), 'notExist');
+    },
+
+    verifyCorrectIncorrectAnswerLabelNotExist: () => {
+        utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIncorrectAnswerLabel(), 'notExist');
+    },
+
+    verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked: () => {
+        cy.log('After selecting student view radio button, the question preview should return to the previous state');
+        autoScoredScoringPreviewTab.steps.switchToStudentView();
+        utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'notExist');
+        utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.incorrectIcon(), 'notExist');
+        autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectAnswerLabelNotExist();
+        autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectBorderNotExists();
+    },
+
+    verifyCorrectIncorrectIconsNotExist: () => {
+        utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'notExist');
+        utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.incorrectIcon(), 'notExist');
+    },
+
+    verifyQuestionPreviewStateWhenSwitchingBackToStudentView: () => {
+        cy.log('After switching to student view, the question preview should return to the previous state');
+        autoScoredScoringPreviewTab.steps.switchToStudentView();
+        autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectIconsNotExist();
+        autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectBorderNotExists();
+        autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectAnswerLabelNotExist();
+    },
+
+    verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer: () => {
+        autoScoredScoringPreviewTab.previewScoreText()
+            .should('have.css', 'color', css.color.text)
+            .and('not.have.css', 'background-color', css.color.correctAnswer);
+    },
+
+    verifyPreviewTabPointsBackgroundForCorrectAnswer: () => {
+        utilities.verifyCSS(autoScoredScoringPreviewTab.previewScoreText(), {
+            'color': css.color.whiteText,
+            'background-color': css.color.correctAnswer
+        });
+    }
+}
+
+const tests = {
+    verifyPreviewModesAndScoreWhenPointsAndCorrectAnswersIsNotSet: () => {
+        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', () => {
+            utilities.verifyInnerText(autoScoredScoringPreviewTab.studentViewRadioButtonLabel(), 'Student view');
+            utilities.verifyInnerText(autoScoredScoringPreviewTab.gradingViewRadioButtonLabel(), 'Grading view');
+            autoScoredScoringPreviewTab.studentViewRadioButton()
+                .should('be.checked');
+            autoScoredScoringPreviewTab.gradingViewRadioButton()
+                .should('not.be.checked');
+            autoScoredScoringPreviewTab.steps.verifyPreviewScore(0, 0);
+            autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectIconsNotExist();
+        });
+
+        it('CSS of Preview mode contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(autoScoredScoringPreviewTab.studentViewRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(autoScoredScoringPreviewTab.gradingViewRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(autoScoredScoringPreviewTab.scoreLabelPreviewTab(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(autoScoredScoringPreviewTab.studentViewRadioButton().parent().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(autoScoredScoringPreviewTab.gradingViewRadioButton().parent().find('svg path'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+    },
+
+    verifyIncorrectAnswerLabelAndBorderCSSAndA11y: (questionType) => {
+        it('CSS of incorrect answer state', { tags: 'css' }, () => {
+            cy.log('Pre requisite: The user has attempted the question incorrectly')
+            autoScoredScoringPreviewTab.incorrectIcon()
+                .verifyPseudoClassBeforeProperty('color', css.color.incorrectAnswer);
+            if (steps.correctIncorrectLabelAndBorderExists(questionType)) {
+                utilities.verifyCSS(autoScoredScoringPreviewTab.correctIncorrectAnswerLabel(), {
+                    'color': css.color.incorrectAnswer,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.bold
+                });
+                autoScoredScoringPreviewTab.incorrectIcon()
+                    .verifyPseudoClassBeforeProperty('color', css.color.incorrectAnswer);
+                autoScoredScoringPreviewTab.steps.verifyIncorrectAttemptBorder();
+            } else {
+                autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectAnswerLabelNotExist();
+                autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectBorderNotExists();
+            }
+        });
+
+        it('Accessibility of incorrect answer state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.previewTabQuestionWrapper());
+        });
+    },
+
+    verifyPointsCorrectAnswerLabelAndBorderCSSAndA11y: (questionType) => {
+        it('CSS of Correct answer state', { tags: 'css' }, () => {
+            cy.log('Pre requisite: The user has attempted the question correctly')
+            utilities.verifyCSS(autoScoredScoringPreviewTab.previewScoreText(), {
+                'color': css.color.whiteText,
+                'background-color': css.color.correctAnswer
+            });
+            autoScoredScoringPreviewTab.correctIcon()
+                .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
+            if (steps.correctIncorrectLabelAndBorderExists(questionType)) {
+                utilities.verifyCSS(autoScoredScoringPreviewTab.correctIncorrectAnswerLabel(), {
+                    'color': css.color.correctAnswer,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.bold
+                });
+                autoScoredScoringPreviewTab.correctIcon()
+                    .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
+                autoScoredScoringPreviewTab.steps.verifyCorrectAttemptBorder();
+            } else {
+                autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectAnswerLabelNotExist();
+                autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectBorderNotExists();
+            }
+        });
+
+        it('Accessibility of correct answer state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.previewTabQuestionWrapper());
+        });
+    },
+
+    verifyGradingStudentViewRadioButtonAndScoringTypeInPreviewTab: (scoringType) => {
+        it(`${scoringType} label should be displayed with grading view and student view radio button should be displayed and student view radio button should be checked by default`, () => {
+            autoScoredScoringPreviewTab.gradingViewRadioButton()
+                .should('not.be.checked');
+            autoScoredScoringPreviewTab.studentViewRadioButton()
+                .should('be.checked');
+            autoScoredScoringPreviewTab.scoringTypeLabelPreviewTab()
+                .verifyInnerText(scoringType);
+        });
+    },
+
+    verifyDisabledCheckAnswerButtonWithCSSAndA11y: () => {
+        it('When the user reaches maximum check answer attempts, then the \'Check Answer\' button should become disabled', () => {
+            autoScoredScoringPreviewTab.checkAnswerButton()
+                .should('be.disabled');
+        });
+
+        it('CSS of disabled \'Check Answer\' button', { tags: 'css' }, () => {
+            autoScoredScoringPreviewTab.checkAnswerButton()
+                .verifyCSS(css.color.primaryBtnDisabled, css.fontSize.default, css.fontWeight.semibold);
+        });
+
+        it('Accessibility of disabled Check Answer button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(autoScoredScoringPreviewTab.checkAnswerButton());
+        });
+    }
+}
+
+export const autoScoredScoringPreviewTab = {
+    ...selectors,
+    steps,
+    tests,
+}

package/cypress/pages/components/autoScoredScoringSection.js

@@ -5,7 +5,7 @@ import { scoringSectionBase } from "./scoringSectionBase";
 import { commonComponents } from "./commonComponents";
 import { previewScoringAndShowCorrectAnswerComponent } from "./previewScoringAndShowCorrectAnswerComponent";
 const css = Cypress.env('css');
-
+//Enhancement: This file should be deprecated, new file: autoScoredScoringPreviewTab.js
 const steps = {
     correctIncorrectLabelAndBorderExists: (questionType) => {
         switch (questionType) {