itemengine-cypress-automation 1.0.2

package/cypress/pages/components/autoScoredScoringSectionMultipleResponsesType.js

@@ -0,0 +1,268 @@
+import { commonComponents } from "./commonComponents";
+import { scoringSectionBase } from "./scoringSectionBase";
+const css = Cypress.env('css');
+
+const selectors = {
+    allOrNothingCheckboxLabel: () => cy.get('label[for*="defaultScoring"]'),
+    allOrNothingCheckbox: () => cy.get('input[type*="radio"][aria-label="All or Nothing"]'),
+    partialDifferentWeightsCheckboxLabel: () => cy.get('label[for*="partialScoring"]'),
+    partialDifferentWeightsCheckbox: () => cy.get('input[type*="radio"][aria-label="Partial - different weights"]'),
+    partialEqualWeightsCheckbox: () => cy.get('input[type="radio"][aria-label="Partial - equal weights"]'),
+    partialEqualWeightsCheckboxLabel: () => cy.get('label[for*="partialEqualScoring"]'),
+    pointsPerResponseLabel: () => cy.get('[class*="partial-points-per-response-label"]'),
+    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'),
+    rounddownScoreCheckbox: () => cy.get('[data-ngie-testid="round-down-score-checkbox"] input'),
+}
+
+const steps = {
+    //V3 - This function should be updated in all files
+    selectAllOrNothingCheckbox: () => {
+        autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    selectPartialEqualWeightsCheckbox: () => {
+        autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    selectPartialDifferentWeightsCheckbox: () => {
+        autoScoredScoringSectionMultipleResponsesType.partialDifferentWeightsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    verifyDefaultPenaltyPointsInputFieldAndLabel: () => {
+        autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel()
+            .verifyInnerText('Penalty points')
+            .should('be.visible');
+        autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
+            .should('have.value', '')
+            .and('be.visible');
+    },
+
+    //V3 - This function should be updated in all files
+    verifyDefaultRoundDownScoreCheckboxCheckedAndLabel: () => {
+        autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel()
+            .verifyInnerText('Round down score')
+            .and('be.visible');
+        autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckbox()
+            .should('be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    allotPenaltyPoints: (points) => {
+        autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
+            .clear()
+            .type(points)
+            .should('have.value', points);
+    },
+
+    //V3 - This function should be updated in all files
+    clearPenaltyPoints: () => {
+        autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
+            .clear()
+            .should('have.value', '');
+    },
+
+    //V3 - This function should be updated in all files
+    uncheckRoundDownScoreCheckbox: () => {
+        autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    addPartialDifferentWeightsPoints: (responsePointsArray) => {
+        responsePointsArray.forEach((points, count) => {
+            scoringSectionBase.pointsInputField()
+                .eq(count)
+                .clear()
+                .type(points, { delay: 500 })
+                .blur()
+                .should('have.value', points);
+        });
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+    * @param {number} points points displayed in partial equal weights points per response
+    * @description Verify points displayed in partial equal weights points per response
+    */
+    verifyPartialEqualWeightsPointsPerResponseScore: (points) => {
+        autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsPointsPerResponseScore()
+            .each(($element) => {
+                cy.wrap($element)
+                    .verifyInnerText(`${points}`);
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    verifyPointsPerResponseLabel: () => {
+        autoScoredScoringSectionMultipleResponsesType.pointsPerResponseLabel()
+            .verifyInnerText('Points per response')
+            .should('be.visible');
+    },
+
+    //V3 - This function should be updated in all files
+    verifyPartialDifferentWeightsPointsInputFieldIsEmpty: () => {
+        scoringSectionBase.pointsInputField()
+            .each(($element) => {
+                cy.wrap($element)
+                    .should('have.value', '')
+                    .and('exist');
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    verifyPartialDifferentWeightsPointsInputFieldIsDisabled: () => {
+        scoringSectionBase.pointsInputField()
+            .each(($element) => {
+                cy.wrap($element)
+                    .should('be.disabled');
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    verifyPartialDifferentWeightsPointsInputFieldIsEnabled: (index) => {
+        scoringSectionBase.pointsInputField()
+            .eq(index)
+            .should('not.be.disabled');
+    },
+
+    //V3 - This function should be updated in all files
+    verifyCheckedStateOfRoundDownScoreCheckbox: () => {
+        autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckbox()
+            .should('be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    verifyPartialDifferentWeightsPointsInputFieldValue: (pointsFieldArray) => {
+        pointsFieldArray.forEach((points, count) => {
+            scoringSectionBase.pointsInputField()
+                .eq(count)
+                .should('have.value', points);
+        });
+    },
+}
+
+const tests = {
+    verifyAutoScoredScoringTypeSectionWithCSSAnda11y: () => {
+        it('\'All or nothing\', \'Partial - equal weights\' and \'Partial - different weights\' labels and radio buttons should be displayed and by default \'All or nothing\' radio button should be selected', () => {
+            autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckboxLabel()
+                .verifyInnerText('All or nothing')
+                .and('be.visible');
+            autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckbox()
+                .should('be.checked');
+            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckboxLabel()
+                .verifyInnerText('Partial - equal weights')
+                .and('be.visible');
+            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckbox()
+                .should('not.be.checked');
+            autoScoredScoringSectionMultipleResponsesType.partialDifferentWeightsCheckboxLabel()
+                .verifyInnerText('Partial - different weights')
+                .and('be.visible');
+            autoScoredScoringSectionMultipleResponsesType.partialDifferentWeightsCheckbox()
+                .should('not.be.checked');
+        });
+
+        it('CSS of Scoring section', { tags: 'css' }, () => {
+            scoringSectionBase.scoringLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);
+            scoringSectionBase.scoringTypeLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            scoringSectionBase.scoringTypeDropdown()
+                .find('.dropdown-label-text')
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+            autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckboxLabel()
+                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckboxLabel()
+                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+            autoScoredScoringSectionMultipleResponsesType.partialDifferentWeightsCheckboxLabel()
+                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+        });
+
+        it('Accessibility of Scoring Section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(scoringSectionBase.scoringTypeDropdown());
+            cy.checkAccessibility(autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckbox().parents('.ngie-radio-group-wrapper'));
+        });
+    },
+
+    //V3- need to update this for all files
+    verifyPenaltyPointsInputField: () => {
+        it('User should be able to enter points in \'Penalty Points\' input field', () => {
+            autoScoredScoringSectionMultipleResponsesType.steps.allotPenaltyPoints(2);
+        });
+
+        it('CSS of \'Penalty Points\' label and input field', { tags: 'css' }, () => {
+            autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Accessibility of \'Penalty Points\' label and input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel().parents('.points-container'));
+        });
+    },
+
+    //V3- need to update this for all files
+    verifyPenaltyPointsErroredState: (allocatedPoints, penaltyPoints) => {
+        it('When the user focuses in and out of the empty \'Penalty points\' input field, any validation text should not be displayed', () => {
+            autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
+                .click()
+                .blur();
+            commonComponents.errorMessage()
+                .should('not.exist');
+        });
+
+        it(`If the user enters points more than the allocated points in \'Penalty points\' input field, an error message \'Error: Penalty points cannot be greater than allocated points: ${allocatedPoints}\' should be displayed`, () => {
+            autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
+                .clear()
+                .type(penaltyPoints)
+                .should('have.value', penaltyPoints)
+                .blur();
+            commonComponents.errorMessage()
+                .verifyInnerText(`Error: Penalty points cannot be greater than allocated points:${allocatedPoints}`);
+        });
+
+        it('The error message should disappear once the user removes the entered points from the \'Penalty points\' input field', () => {
+            autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
+                .clear()
+                .blur();
+            commonComponents.errorMessage()
+                .should('not.exist');
+        });
+    },
+
+    //V3- need to update this for all files
+    verifyCSSandA11yOfRoundDownScoreCheckboxInCheckedState: () => {
+        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);
+        });
+
+        it('Accessibility of \'Round down score\' checkbox  - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel());
+        });
+    },
+}
+
+
+export const autoScoredScoringSectionMultipleResponsesType = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/autoScoredSetCorrectAnswerSection.js

@@ -0,0 +1,291 @@
+import { dialogBoxBase } from "../dialogBoxBase";
+import { scoringSectionBase } from "./scoringSectionBase";
+import { commonComponents } from "./commonComponents";
+const css = Cypress.env('css');
+
+const selectors = {
+    setCorrectAnswerLabel: () => cy.get('.set-correct-answer-label'),
+    setCorrectAnswerHelpText: () => cy.get('.edit-set-correct-answer-help-text'),
+    alternateAnswerButton: () => cy.get('.edit-question-auto-scored-set-correct-answer-wrapper .ngie-button'),
+    alternateAnswerTab: (tabIndex) => cy.get('[data-ngie-testid*="alternate-"][data-ngie-testid*="tab"]').eq(tabIndex - 1),
+    deleteAlternateTabButton: () => cy.get('.ngie-tablist-tab-button .styled-close-button'),
+    correctTab: () => cy.get('[data-ngie-testid="correct-tab"]'),
+    setCorrectAnswerErrorIcon: () => cy.get('[aria-label="Error In"]'),
+}
+
+const steps = {
+    clickOnAddAlternateAnswerButton: () => {
+        autoScoredSetCorrectAnswerSection.alternateAnswerButton()
+            .click();
+    },
+
+    addAlternateTab: (index) => {
+        autoScoredSetCorrectAnswerSection.steps.clickOnAddAlternateAnswerButton()
+        autoScoredSetCorrectAnswerSection.alternateAnswerTab(index)
+            .verifyInnerText(`Alternate ${index}`);
+    },
+
+    verifySetCorrectAnswerErrorIconIsNotDisplayed: () => {
+        autoScoredSetCorrectAnswerSection.setCorrectAnswerErrorIcon()
+            .should('not.exist');
+    },
+
+    verifySetCorrectAnswerErrorIconIsDisplayed: () => {
+        autoScoredSetCorrectAnswerSection.setCorrectAnswerErrorIcon()
+            .should('have.text', 'Error-Icon');
+    },
+
+    navigateToAlternateTab: (tabIndex) => {
+        autoScoredSetCorrectAnswerSection.alternateAnswerTab(tabIndex)
+            .click();
+    },
+
+    //V3- Need to update the function in all files
+    navigateToCorrectTab: () => {
+        autoScoredSetCorrectAnswerSection.correctTab()
+            .click();
+    },
+
+    deleteAlternateTab: () => {
+        autoScoredSetCorrectAnswerSection.deleteAlternateTabButton()
+            .click();
+    },
+
+    verifyActiveStateOfCorrectTab: () => {
+        autoScoredSetCorrectAnswerSection.correctTab()
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    verifyActiveStateOfAlternateTab: (tabIndex) => {
+        autoScoredSetCorrectAnswerSection.alternateAnswerTab(tabIndex)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    switchToCorrectTab: () => {
+        autoScoredSetCorrectAnswerSection.correctTab()
+            .click();
+    },
+
+    //V3- Need to update the function in all files
+    verifySetCorrectAnswerSectionErrorMessage: () => {
+        commonComponents.errorMessage()
+            .last()
+            .verifyInnerText('Error: Please set a correct answer.');
+    }
+}
+
+const tests = {
+    verifyAutoScoredSetCorrectAnswerHeaderSectionContents: (questionType) => {
+        it('\'Set Correct Answer\' label and help text should be displayed in \'Set Correct Answer\' section', () => {
+            autoScoredSetCorrectAnswerSection.setCorrectAnswerLabel()
+                .verifyInnerText('Set correct answer');
+
+            let helpText;
+            switch (questionType) {
+                case 'multiple selection':
+                    helpText = 'You can set the correct answer by selecting the correct answer option(s).';
+                    break;
+                case 'single selection':
+                    helpText = 'You can set the correct answer by selecting the correct answer option.';
+                    break;
+                case 'fill in the gaps - text':
+                    helpText = 'You can set the correct answer by entering the correct answer(s) in the response area(s).';
+                    break;
+                case 'short text response':
+                    helpText = 'You can set the correct answer by entering the correct answer in the input field.';
+                    break;
+                case 'fill in the gaps - dropdown':
+                    helpText = 'You can set the correct answer by selecting the correct answer(s) in the response area(s).';
+                    break;
+                case 'fill in the gaps - drag and drop':
+                    helpText = 'You can set the correct answer by dragging the correct answer(s) in the response area(s).';
+                    break;
+                case 'single selection grid':
+                    helpText = 'You can set the correct answer(s) by selecting the correct answer option(s).';
+                    break;
+                case 'multiple selection grid':
+                    helpText = 'You can set the correct answer(s) by selecting the correct answer option(s).';
+                    break;
+                case 'drag and drop into categories':
+                    helpText = 'You can set the correct answer by dragging the correct answer(s) in the response area(s).';
+                    break;
+                case 'list matching':
+                    helpText = 'You can set the correct answer by dragging the correct answer(s) in the response area(s).'
+                    break;
+                case 'list ordering':
+                    helpText = 'You can set the correct answer by ordering the correct answer(s) in the response area(s).';
+                    break;
+                case 'list sorting':
+                    helpText = 'You can set the correct answer by sorting the correct answer(s) in the response area(s).';
+                    break;
+                case 'highlight':
+                    helpText = 'You can set the correct answer by highlighting the correct answer(s) in the response area(s).';
+                    break;
+                case 'highlight image':
+                    helpText = 'You can set the correct answer by selecting the correct answer(s) in the response area(s).';
+                    break;
+                case 'fill in the gaps over image - text':
+                    helpText = 'You can set the correct answer by entering the correct answer(s) in the response area(s).';
+                    break;
+                case 'fill in the gaps over image - dropdown':
+                    helpText = 'You can set the correct answer by selecting the correct answer(s) in the response area(s).';
+                    break;
+                default:
+                    throw new Error('Invalid question type');
+            }
+            autoScoredSetCorrectAnswerSection.setCorrectAnswerHelpText().verifyInnerText(helpText);
+        });
+
+        it('CSS of \'Set correct answer\' header section', { tags: 'css' }, () => {
+            cy.log('CSS of set correct answer label')
+            autoScoredSetCorrectAnswerSection.setCorrectAnswerLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);
+            cy.log('CSS of set 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')
+            autoScoredSetCorrectAnswerSection.correctTab()
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.bold);
+        });
+
+        it('\'Correct\' tab should be present and selected', () => {
+            autoScoredSetCorrectAnswerSection.correctTab()
+                .should('have.attr', 'aria-selected', 'true');
+        });
+    },
+
+    verifyAutoScoredAlternateAnswer: (questionType = null) => {
+        it('\'Add Alternate Answer\' button should be present', () => {
+            autoScoredSetCorrectAnswerSection.alternateAnswerButton()
+                .verifyInnerText('Add alternate answer');
+        });
+
+        it('CSS of \'Add Alternate Answer\' button', { tags: 'css' }, () => {
+            autoScoredSetCorrectAnswerSection.alternateAnswerButton()
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.medium);
+        });
+
+        it('If user has not added points and/or selected correct answer in the Correct tab, the user should get a warning popup', () => {
+            cy.log('click on alternate button to display warning popup')
+            autoScoredSetCorrectAnswerSection.alternateAnswerButton()
+                .click();
+            dialogBoxBase.dialogBox()
+                .should('be.visible');
+            dialogBoxBase.dialogBoxTitle()
+                .verifyInnerText('Warning!')
+            dialogBoxBase.dialogBoxContent()
+                .verifyInnerText('Please fill the required fields.');
+            dialogBoxBase.buttonClose()
+                .should('be.visible');
+        });
+
+        it('CSS of warning popup', { tags: 'css' }, () => {
+            dialogBoxBase.dialogBoxTitle()
+                .verifyCSS(css.color.liText, css.fontSize.heading, css.fontWeight.semibold);
+            dialogBoxBase.dialogBoxContent()
+                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.regular);
+            dialogBoxBase.buttonClose()
+                .find('svg')
+                .should('have.css', 'fill', css.color.closeIcon);
+        });
+
+        it('Accessibility of warning popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+
+        it('Warning popup should close on clicking the Close icon button', () => {
+            dialogBoxBase.buttonClose()
+                .click();
+            dialogBoxBase.dialogBox()
+                .should('not.exist');
+        });
+
+        it('\'Error: Please set a correct answer.\' and \'Error: Please enter points.\' validation error messages should be displayed', () => {
+            autoScoredSetCorrectAnswerSection.setCorrectAnswerErrorIcon()
+                .should('be.visible')
+                .and('have.text', 'Error-Icon');
+            scoringSectionBase.pleaseEnterPointsErrorMessage()
+                .should('be.visible')
+                .verifyInnerText('Error: Please enter points.');
+            if (questionType != 'list ordering') {
+                commonComponents.errorMessage()
+                    .eq(1)
+                    .should('be.visible')
+                    .verifyInnerText('Error: Please set a correct answer.');
+            }
+        });
+    },
+
+    verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty: (tabName) => {
+        it(`When the user focuses in and out of the empty points input field, \'Error: Please enter points.\' validation text should be displayed below the points input field and error icon should be displayed on the \'${tabName}\'`, () => {
+            scoringSectionBase.pointsInputField()
+                .focus();
+            scoringSectionBase.pointsInputField()
+                .blur();
+            scoringSectionBase.pleaseEnterPointsErrorMessage()
+                .should('be.visible')
+                .verifyInnerText('Error: Please enter points.');
+            if (tabName == 'Correct tab') {
+                autoScoredSetCorrectAnswerSection.correctTab()
+                    .within(() => {
+                        autoScoredSetCorrectAnswerSection.setCorrectAnswerErrorIcon()
+                            .should('be.visible');
+                    });
+            } else {
+                autoScoredSetCorrectAnswerSection.alternateAnswerTab(1)
+                    .within(() => {
+                        autoScoredSetCorrectAnswerSection.setCorrectAnswerErrorIcon()
+                            .should('be.visible');
+                    });
+            };
+        });
+
+        it('When the user enters point in Points input field then the \'Error: Please enter points.\' validation text and error icon displayed on the \'Correct\' tab the should disappear', () => {
+            scoringSectionBase.pointsInputField()
+                .type(20)
+                .should('have.value', 20);
+            scoringSectionBase.pleaseEnterPointsErrorMessage()
+                .should('not.exist');
+            autoScoredSetCorrectAnswerSection.setCorrectAnswerErrorIcon()
+                .should('not.exist');
+        });
+    },
+
+    verifyCSSAndA11yOfAutoScoredSetCorrectAnswerErrorMessage: () => {
+        it('CSS of \'Correct answer section\' error messages', { tags: 'css' }, () => {
+            commonComponents.errorMessage()
+                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+            autoScoredSetCorrectAnswerSection.setCorrectAnswerErrorIcon()
+                .find('path')
+                .should('have.css', 'fill', css.color.errorText);
+        });
+
+        it('Accessibility of \'Correct answer section\' error messages', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.errorMessage());
+            cy.checkAccessibility(autoScoredSetCorrectAnswerSection.setCorrectAnswerErrorIcon());
+        });
+    },
+
+    verifyWarningPopupAndTabNavigationWhenNoPointsAddedInAlternateTab: () => {
+        it('When user clicks on Correct tab when all the mandatory fields are not filled in Alternate tab a warning popup should be displayed and on closing the popup user should be on the Alternate 2 tab.', () => {
+            autoScoredSetCorrectAnswerSection.correctTab()
+                .click();
+            dialogBoxBase.steps.allFieldsRequiredWarningPopupContents();
+            dialogBoxBase.steps.closeWarningPopup();
+            autoScoredSetCorrectAnswerSection.alternateAnswerTab(2)
+                .should('have.attr', 'aria-selected', 'true');
+        });
+    },
+
+    verifyA11yOfAlternateAnswerTab: () => {
+        it('Accessibility of \'Alternate\' answer tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(autoScoredSetCorrectAnswerSection.correctTab().parents('[class*="styles__AnswerTabWrapper"]'));
+        });
+    }
+}
+
+export const autoScoredSetCorrectAnswerSection = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/ckEditorToolbar.js

@@ -0,0 +1,64 @@
+import constants from "../../fixtures/constants";
+
+const selectors = {
+    imageIcon: () => cy.get('a[title="Insert Image"]:visible'),
+    boldIcon: () => cy.get('.cke_button__bold:visible'),
+    equationEditorIcon: () => cy.get('.cke_button__nextgeneqneditor:visible'),
+    linkIcon: () => cy.get('.cke_button__link:visible'),
+    ckeDialogbox: () => cy.get('.cke_dialog_body:visible'),
+    //Image dialog box
+    imageUrlInputField: () => cy.get('input[type="text"].cke_dialog_ui_input_text').eq(0),
+    alternativeTextInputField: () => cy.get('input[type="text"].cke_dialog_ui_input_text').eq(1),
+    ckeOkButton: () => cy.get('a[title="OK"]:visible'),
+    //Link dialog box
+    linkDialogboxDisplayTextInputField: () => cy.get('input[class*="cke_dialog_ui_input_text"]:visible').eq(0),
+    linkDialogboxURLInputField: () => cy.get('input[class*="cke_dialog_ui_input_text"]:visible').eq(1),
+}
+
+const steps = {
+    selectBoldOptionFromCKEditorToolbar: () => {
+        ckEditorToolbar.boldIcon()
+            .click();
+    },
+
+    selectImageOptionFromCKEditorToolbar: () => {
+        ckEditorToolbar.imageIcon()
+            .click();
+    },
+
+    selectEquationEditorOptionFromCKEditorToolbar: () => {
+        ckEditorToolbar.equationEditorIcon()
+            .click();
+    },
+
+    selectLinkOptionFromCKEditorToolbar: () => {
+        ckEditorToolbar.linkIcon()
+            .click();
+    },
+
+    addImageToInputField: () => {
+        ckEditorToolbar.imageUrlInputField()
+            .type(constants.foxImageLink);
+        ckEditorToolbar.alternativeTextInputField()
+            .type(constants.foxImageAltText);
+        ckEditorToolbar.ckeOkButton()
+            .click();
+    },
+
+    addLinkToInputField: () => {
+        ckEditorToolbar.ckeDialogbox()
+            .within(() => {
+                ckEditorToolbar.linkDialogboxDisplayTextInputField()
+                    .type('lorem')
+                    .should('have.value', 'lorem');
+                ckEditorToolbar.linkDialogboxURLInputField()
+                    .type(`${Cypress.config().baseUrl}`);
+                ckEditorToolbar.ckeOkButton()
+                    .click();
+            });
+    },
+}
+export const ckEditorToolbar = {
+    ...selectors,
+    steps
+}