itemengine-cypress-automation 1.0.89 → 1.0.91

package/cypress/pages/essayResponsePage.js

@@ -6,6 +6,7 @@ import { specialOrMathCharacters } from "../fixtures/specialAndMathCharacters";
 import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
 
+const allCategories = Object.values(equationEditorCategoriesAndSymbols);
 let originalText;
 let formattedText;
 
@@ -32,6 +33,10 @@ const selectors = {
     tableHeaderRow: () => cy.get('thead'),
     tableHeaderCell: () => cy.get('th'),
 
+    //wordCount
+    displayWordCountCheckbox: () => cy.get('[data-ngie-testid="display-word-count-checkbox"] input'),
+    wordCountWrapper: () => cy.get('[class*="indexstyle__WordCharCountWrapper"]'),
+
     ///Old
     //Customize Formatting Options
     customizeFormattingOptionsAccordion: () => cy.get('.customize-formatting-option-wrapper .ngie-accordion-summary'),
@@ -52,7 +57,7 @@ const selectors = {
     equationEditorSectionCategories: () => cy.get('[class*="DraggableItemsGrid"] .icon-button-custom-format'),
     equationEditorSectionCategoryLabel: () => cy.get('.equation-editor-label-wrapper'),
     equationEditorSection: () => cy.get('[class*="EquationEditorOptionsWrapper"]'),
-    equationEditorSectionTitle: () => cy.get('.equation-editor-text-title'),
+    equationEditorSectionTitle: () => cy.get('[class*="EssayResponseComponentstyles__SectionTitle"]'),
     equationEditorSectionHelperText: () => cy.get('.equation-editor-description-text'),
     equationEditorSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
     equationEditorSectionCategoriesEditIcon: () => cy.get('.edit-icon-button button'),
@@ -129,6 +134,20 @@ const steps = {
     ...additionalSettingsPanel.steps,
     ...essayResponseCommonComponents.steps,
 
+    checkDisplayWordCountCheckbox: () => {
+        essayResponsePage.displayWordCountCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * verify word count in preview tab
+     * @param {number} wordCount 
+     */
+    verifyWordCount: (wordCount) => {
+        utilities.verifyInnerText(essayResponsePage.wordCountWrapper(), `Words: ${wordCount}`)
+    },
+
     /**
      * Verify newly added custom category container is displayed
      * @param {string} customCategoryName Custom category name
@@ -696,6 +715,83 @@ const steps = {
             });
     },
 
+    verifyDefaultCategoriesDisplayedInEquationEditorSectionEditTab: () => {
+        essayResponsePage.equationEditorSectionCategories()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .invoke('text')
+                    .then((textContent) => {
+                        const expectedValue = allCategories[index].displayName;
+                        expect(textContent.toLowerCase()).to.equal(expectedValue.toLowerCase())
+                    });
+                cy.wrap($el)
+                    .parents('[id*="DraggableItem"]')
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionCategoriesDragIcon(), 'visible');
+                        utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionCategoriesEditIcon(), 'visible');
+                    });
+            });
+    },
+
+    /**
+     * @description Verify tooltips of categories in equation editor section edit tab
+     * @param {string[]} categoryNamesArray Array of names of categories
+     */
+    verifyTooltipsOfCategoryTilesInEquationEditorSectionEditTab: (categoryNamesArray) => {
+        categoryNamesArray.forEach((categoryTooltipName) => {
+            essayResponsePage.equationEditorSectionCategories()
+                .contains(categoryTooltipName, { matchCase: false })
+                .verifyTooltip(categoryTooltipName);
+        });
+    },
+
+    /**
+    * @description Verify selected category in equation editor section edit tab
+    * @param {string[]} categoryName Name of categories
+    */
+    verifySelectedCategoryInEquationEditorSectionEditTab: (categoryName) => {
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .parents('.icon-button-custom-format')
+            .should('have.class', 'Mui-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionTickIcon(), 'visible');
+            });
+    },
+
+    /**
+    * @description Verify deselected category in equation editor section edit tab
+    * @param {string[]} categoryName Name of category
+    */
+    verifyDeselectedCategoryInEquationEditorSectionEditTab: (categoryName) => {
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .parents('.icon-button-custom-format')
+            .should('not.have.class', 'Mui-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionTickIcon(), 'hidden');
+            });
+    },
+
+    deselectACategoryInEquationEditorSectionEditTab: (categoryName) => {
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .click();
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .parents('.icon-button-custom-format')
+            .should('not.have.class', 'Mui-selected');
+    },
+
+    selectACategoryInEquationEditorSectionEditTab: (categoryName) => {
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .click();
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .parents('.icon-button-custom-format')
+            .should('have.class', 'Mui-selected');
+    },
     ///Old
     expandCustomizeFormattingOptionsAccordion: () => {
         essayResponsePage.customizeFormattingOptionsAccordion()
@@ -720,6 +816,15 @@ const steps = {
         });
     },
 
+    deselectCustomizedFormattingOption: (formattingOptionArray) => {
+        formattingOptionArray.forEach((formattingOption) => {
+            essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
+                .click();
+            essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
+                .should('have.attr', 'data-aria-pressed', 'false');
+        });
+    },
+
     deselectPreviewTabToolbarOption: (toolbarOption) => {
         essayResponsePage.previewTabToolbarOption(toolbarOption)
             .click()

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -29,16 +29,32 @@ const selectors = {
     responseAccordionAddAlternateButton: () => cy.get('.add-alternate-btn'),
     responseAccordionAddAlternateButtonLabel: () => cy.get('.add-alternate-btn p'),
     responseAreaNumeration: () => cy.get('.response-input-adornment'),
-    
+
     answerInputFieldSpecifyCorrectAnswerSection: () => cy.get('.label-image-text-inline-text-field input'),
     answerInputFieldPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-input-field input'),
     correctAnswerSectionWrapper: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
     correctAnswersLabel: () => cy.get('.correct-answers-label'),
     responseStatusWrapper: () => cy.get('.cloze-with-text-answer-status-response-preview-wrapper:visible'),
     tickIconWrapper: () => cy.get('.tick-icon-wrapper [data-name*="Rectangle"]'),
+    responseAreaNumeration: () => cy.get('.response-input-adornment'),
     correctAnswerResponseNumeration: () => cy.get('.answer-numeration-number-box'),
     correctAnswerResponseWrapper: () => cy.get('[class*="ClozeWithTextResponsestyles__AnswerCell"]'),
     correctAnswerResponse: () => cy.get('[class*="AnswerWrapperForLabel"]'),
+
+    setLimitLabel: () => cy.get('[class*="SetLimitWrapper"] .text-label'),
+    minimumCharacterLimitLabel: () => cy.get('.label-image-min-max-container .additional-settings-label').eq(0),
+    maximumCharacterLimitLabel: () => cy.get('.label-image-min-max-container .additional-settings-label').eq(1),
+    minMaxLabelAndInputFieldWrapper: () => cy.get('.label-image-min-max-container'),
+    minimumCharacterLimitInputField: () => cy.get('.label-image-min-max-container input').eq(0),
+    maximumCharacterLimitInputField: () => cy.get('.label-image-min-max-container input').eq(1),
+    characterRadioButton: () => cy.get('input[aria-label="Character"]'),
+    characterLabel: () => cy.get('[aria-label="Character"].ngie-radio-label'),
+    noneRadioButton: () => cy.get('input[aria-label="None"]'),
+    noneLabel: () => cy.get('[aria-label="None"].ngie-radio-label'),
+    limitReachedWarningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
+    limitReachedWarningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
+    correctAnswerResponseWrapper: () => cy.get('.cloze-with-text-correct-response-wrapper .cloze-with-text-answer-status-response-preview-wrapper'),
+    correctAnswerResponse: () => cy.get('[class*="ResponseInputComponentstyles__ResponseInputWrapper"] input'),
     specialCharactersButtonPreviewTab: () => cy.get('.cloze-with-text-special-character-button'),
 
     //Special characters section
@@ -58,8 +74,19 @@ const selectors = {
 
     spellCheckLabel: () => cy.get('[data-ngie-testid="spell-check-checkbox"] .MuiFormControlLabel-label'),
     spellCheckCheckbox: () => cy.get('[data-ngie-testid="spell-check-checkbox"] input[type="checkbox"]'),
+
     //TODO: Need to remove it from here when https://redmine.zeuslearning.com/issues/558979 is resolved
     checkAnswerButton: () => cy.get('.check-answer-and-status-wrapper button').last(),
+
+    //Conditional checkboxes
+    caseSensitiveCheckboxLabel: () => cy.get('[data-ngie-testid="case-sensitive-checkbox"] [class*="label"]'),
+    caseSensitiveCheckbox: () => cy.get('[data-ngie-testid="case-sensitive-checkbox"] input'),
+    validateIfAnswerIsIncludedCheckboxLabel: () => cy.get('[data-ngie-testid="validate-if-answer-is-included-in-the-response-checkbox"] [class*="label"]'),
+    validateIfAnswerIsIncludedCheckbox: () => cy.get('[data-ngie-testid="validate-if-answer-is-included-in-the-response-checkbox"] input'),
+    ignoreExtraSpacesCheckboxLabel: () => cy.get('[data-ngie-testid="ignore-extra-spaces-checkbox"] [class*="label"]'),
+    ignoreExtraSpacesCheckbox: () => cy.get('[data-ngie-testid="ignore-extra-spaces-checkbox"] input'),
+    ignoreSingleLetterMistakeCheckboxLabel: () => cy.get('[data-ngie-testid="ignore-single-letter-mistake-checkbox"] [class*="label"]'),
+    ignoreSingleLetterMistakeCheckbox: () => cy.get('[data-ngie-testid="ignore-single-letter-mistake-checkbox"] input'),
 }
 
 const steps = {
@@ -78,7 +105,7 @@ const steps = {
     ...acceptedStudentInputComponent.steps,
     ...customizeSpecialCharacterComponent.steps,
     ...autoScoredStudentViewSettings.steps,
-    
+
     /**
      * Enter text in the answer input fields of the specify correct answer section.
      * @param {Object[]} responses - An array of objects containing the responseIndex and responseText.
@@ -113,6 +140,17 @@ const steps = {
         });
     },
 
+    //Used in setLimitSection.js only. 
+    /**
+     * @param {number} responseIndex index number of text container
+     * @param {string} responseText text to be added in text container
+     * @description function enters text in the answer input fields of the preview tab
+     */
+    addTextInAnswerInputFieldsPreviewTab: (responseIndex, responseText) => {
+        utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), responseIndex)
+            .type(responseText);
+    },
+
     /**
      * Verify text in the answer input fields of the preview tab.
      * @param {Object[]} responses - An array of objects containing the responseIndex and responseText.
@@ -385,6 +423,27 @@ const steps = {
             });
     },
 
+    verifyCharacterRadioButtonSelected: () => {
+        fillInTheGapsOverImageTextPage.characterRadioButton()
+            .should('be.checked');
+    },
+
+    verifyNoneRadioButtonNotSelected: () => {
+        fillInTheGapsOverImageTextPage.noneRadioButton()
+            .should('not.be.checked');
+    },
+
+    selectCharacterRadioButton: () => {
+        fillInTheGapsOverImageTextPage.characterRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    selectNoneRadioButton: () => {
+        fillInTheGapsOverImageTextPage.noneRadioButton()
+            .click()
+    },
+
     /**
      *@description Verify text in the answer input fields of the specify correct answer section.
      * @param {Object[]} responses - An array of objects containing the responseIndex and responseText.
@@ -448,7 +507,7 @@ const steps = {
                     });
             });
     },
-    
+
     verifySpellCheckCheckboxUnchecked: () => {
         fillInTheGapsOverImageTextPage.spellCheckCheckbox()
             .should('not.be.checked');
@@ -459,6 +518,134 @@ const steps = {
             .should('be.checked');
     },
 
+    /**
+     * @param {number} minLimit value of minimum input field
+     * @description this function verifies the value in minimum limit input field
+     */
+    verifyMinimumCharacterLimitInputField: (minLimit) => {
+        fillInTheGapsOverImageTextPage.minimumCharacterLimitInputField()
+            .should('have.value', minLimit);
+    },
+
+    /**
+     * @param {number} maxLimit value of maximum input field
+     * @description this function verifies the value in maximum limit input field
+     */
+    verifyMaximumCharacterLimitInputField: (maxLimit) => {
+        fillInTheGapsOverImageTextPage.maximumCharacterLimitInputField()
+            .should('have.value', maxLimit);
+    },
+
+    /**
+     * @param {number} maxLimit value to be entered in maximum limit input field
+     * @description this function enters the value in maximum limit input field
+     */
+    setMaximumLimit: (maxLimit) => {
+        fillInTheGapsOverImageTextPage.maximumCharacterLimitInputField()
+            .clear()
+            .type(maxLimit)
+            .blur();
+    },
+
+    /**
+     * @param {number} maxLimit value to be entered in maximum limit input field
+     * @description this function verifies the value in maximum limit input field
+     */
+    verifyMaximumLimit: (maxLimit) => {
+        fillInTheGapsOverImageTextPage.maximumCharacterLimitInputField()
+            .should('have.value', maxLimit);
+
+    },
+
+    /**
+     * @param {number} minLimit value to be entered in minimum limit input field
+     * @description this function enters and verifies the value in minimum limit input field
+     */
+    setMinimumLimit: (minLimit) => {
+        fillInTheGapsOverImageTextPage.minimumCharacterLimitInputField()
+            .clear()
+            .type(minLimit)
+            .blur();
+    },
+
+    /**
+     * @param {number} minLimit value to be entered in minimum limit input field
+     * @description this function verifies the value in minimum limit input field
+     */
+    verifyMinimumLimit: (minLimit) => {
+        fillInTheGapsOverImageTextPage.minimumCharacterLimitInputField()
+            .should('have.value', minLimit)
+    },
+
+    clearAndFocusOutOfMaximumCharacterLimitInputField: () => {
+        fillInTheGapsOverImageTextPage.maximumCharacterLimitInputField()
+            .clear()
+            .blur();
+    },
+
+    clearAndFocusOutOfMinimumCharacterLimitInputField: () => {
+        fillInTheGapsOverImageTextPage.minimumCharacterLimitInputField()
+            .clear()
+            .blur();
+    },
+
+    verifyMaximumLimitErrorMessage: () => {
+        utilities.verifyInnerText(utilities.getNthElement(commonComponents.errorMessage(), 1), 'Error: Maximum limit must be greater than or equal to Minimum limit.');
+        utilities.verifyElementVisibilityState(utilities.getNthElement(commonComponents.errorMessage(), 1), 'visible');
+    },
+
+    verifyMinimumLimitErrorMessage: () => {
+        utilities.verifyInnerText(utilities.getNthElement(commonComponents.errorMessage(), 0), 'Error: Minimum limit must be less than or equal to Maximum limit.');
+        utilities.verifyElementVisibilityState(utilities.getNthElement(commonComponents.errorMessage(), 0), 'visible');
+    },
+
+    /**
+     * @param {number} responseIndex index of response container
+     * @param {number} maxlen value of maxlength attribute
+     * @description function verifies maxlength attribute of response container in preview tab
+     */
+    verifyMaximumCharacterLimitInPreviewTab: (responseIndex, maxlen) => {
+        utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), responseIndex)
+            .should('have.attr', 'maxlength', maxlen);
+    },
+
+    /**
+     * @param {number} responseIndex index of input field in specify correct answer
+     * @param {number} maxlen value of maxlength attribute
+     * @description function verifies maxlength attribute of input field in specify correct answer
+     */
+    verifyMaximumCharacterLimit: (responseIndex, maxlen) => {
+        utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
+            .should('have.attr', 'maxlength', maxlen);
+    },
+
+    /**
+     * @param {number} responseIndex index of response container in preview tab
+     * @description function verifies maxlength attribute of input field in preview tab
+     */
+    verifyMaximumCharacterLimitNotExistInPreviewTab: (responseIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), responseIndex)
+            .should('not.have.attr', 'maxlength');
+    },
+
+    verifyLimitReachedWarningMessageNotExist: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.limitReachedWarningMessage(), 'notExist');
+    },
+
+    /**
+     * @description this function verifies warning text for limit reached
+     * @param {string} warningText warning message displayed
+     */
+    verifyLimitReachedWarningMessageExist: (warningText) => {
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.limitReachedWarningMessage(), 'visible');
+        utilities.verifyInnerText(fillInTheGapsOverImageTextPage.limitReachedWarningMessage(), warningText);
+    },
+
+    clearResponseField: (responseIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), responseIndex)
+            .clear();
+    },
+
     /**
      * Verify that the spell check for a response field in the Preview Tab is disabled.
      * @param {number} responseFieldIndex - The index of the response field to verify.
@@ -497,6 +684,79 @@ const steps = {
             .click();
     },
 
+    verifyDefaultUncheckedStateOfConditionalCheckboxes: () => {
+        fillInTheGapsOverImageTextPage.caseSensitiveCheckbox()
+            .should('not.be.checked');
+        fillInTheGapsOverImageTextPage.validateIfAnswerIsIncludedCheckbox()
+            .should('not.be.checked');
+        fillInTheGapsOverImageTextPage.ignoreExtraSpacesCheckbox()
+            .should('not.be.checked');
+        fillInTheGapsOverImageTextPage.ignoreSingleLetterMistakeCheckbox()
+            .should('not.be.checked');
+    },
+
+    /**
+     * Check the conditional checkbox in edit tab
+     * @param {string} conditionalCheckboxName Name of the conditional checkbox to be checked
+     */
+    checkConditionalCheckbox: (conditionalCheckboxName) => {
+        switch (conditionalCheckboxName) {
+            case 'Case sensitive':
+                fillInTheGapsOverImageTextPage.caseSensitiveCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Validate if answer is included in the response':
+                fillInTheGapsOverImageTextPage.validateIfAnswerIsIncludedCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Ignore extra spaces':
+                fillInTheGapsOverImageTextPage.ignoreExtraSpacesCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Ignore single letter mistake':
+                fillInTheGapsOverImageTextPage.ignoreSingleLetterMistakeCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Uncheck the conditional checkbox in edit tab
+     * @param {string} conditionalCheckboxName Name of the conditional checkbox to be unchecked
+     */
+    uncheckConditionalCheckbox: (conditionalCheckboxName) => {
+        switch (conditionalCheckboxName) {
+            case 'Case sensitive':
+                fillInTheGapsOverImageTextPage.caseSensitiveCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Validate if answer is included in the response':
+                fillInTheGapsOverImageTextPage.validateIfAnswerIsIncludedCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Ignore extra spaces':
+                fillInTheGapsOverImageTextPage.ignoreExtraSpacesCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Ignore single letter mistake':
+                fillInTheGapsOverImageTextPage.ignoreSingleLetterMistakeCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+    
     /**
     * Verify answer input field placeholder text
     * @param {number} answerFieldIndex index of answer input field
@@ -509,11 +769,11 @@ const steps = {
             });
     },
 
-     /**
-     * Clear answer input field
-     * @param {number} answerFieldIndex index of answer input field
-     */
-     clearAnswerInputField: (answerFieldIndex) => {
+    /**
+    * Clear answer input field
+    * @param {number} answerFieldIndex index of answer input field
+    */
+    clearAnswerInputField: (answerFieldIndex) => {
         utilities.getNthElement(fillInTheGapsOverImageTextPage.responseAccordionAnswerInputFieldWrapper(), answerFieldIndex)
             .within(() => {
                 fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection()
@@ -528,6 +788,8 @@ const tests = {
     ...autoScoredSpecifyCorrectAnswerSection.tests,
     ...scoringSectionBaseEditTab.tests,
     ...autoScoredScoringSectionMultiResponseType.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
     ...autoScoredStudentViewSettings.tests,
 
     /**

package/cypress/pages/readingRulerPage.js

@@ -17,11 +17,13 @@ const selectors = {
     opacityLabel: () => cy.get('#input-slider'),
     opacityInputField: () => cy.get('.line-reader-opacity input'),
     opacitySlider: () => cy.get('.MuiSlider-root'),
-    colorLabel: () => cy.get('[class*="LineReaderstyles__PropertyLabel"]').eq(1),
-    colorBlock: () => cy.get('.MuiFormGroup-root .MuiRadio-root'),
-    colorBlockLabel: () => cy.get('.MuiFormControl-root .MuiFormControlLabel-root .MuiTypography-root'),
-    defaultNumberOfLinesLabel: () => cy.get('[class*="LineReaderstyles__PropertyLabel"]').eq(2),
+    colorLabel: () => cy.get('[class*="LineReaderstyles__PropertyLabel"]').eq(2),
+    colorBlock: () => cy.get('.MuiFormControlLabel-labelPlacementBottom .MuiRadio-root'),
+    colorBlockLabel: () => cy.get('[aria-label="color"] .MuiFormControlLabel-label'),
+    defaultNumberOfLinesLabel: () => cy.get('[class*="LineReaderstyles__PropertyLabel"]').eq(3),
     defaultNumberOfLinesInputField: () => cy.get('input[aria-label="Default number of lines"]'),
+    rulerStyleButton: () => cy.get('[class*="LineReaderstyles__RulerStyleButton"]'),
+    rulerStyleButtonLabel: () => cy.get('[class*="LineReaderstyles__ButtonLabel"]'),
     //Preview Tab
     readingRulerButton: () => cy.get('.LineReaderButton'),
     readingRuler: () => cy.get('.resizable'),
@@ -49,6 +51,42 @@ const steps = {
             .should('be.checked');
     },
 
+    /**
+     * @param {("Line focus"|"Overlay mask"|"Drag handle")} styleName name of ruler style
+     * @description function selects ruler style
+     */
+    selectRulerStyle: (styleName) => {
+        let style;
+        switch (styleName) {
+            case 'Line focus':
+                style = '.line-focus';
+                break;
+            case 'Overlay mask':
+                style = '.overlay-mask';
+                break;
+            case 'Darg handle':
+                style = '.drag-handle';
+                break;
+            default:
+                throw new Error(`Unknown ruler style: ${styleName}`);
+        }
+        
+        readingRulerPage.rulerStyleButton()
+            .find(style)
+            .click()
+            .find('.MuiIconButton-label svg')
+            .should('exist');
+    },
+
+    /**
+     * @param {number} index index of ruler style
+     * @param {("Line focus"|"Overlay mask"|"Drag handle")} styleName name of ruler style
+     * @description function verifies ruler style button label 
+     */
+    verifyRulerStyleButtonLabel: (index, styleName) => {
+        utilities.verifyInnerText(utilities.getNthElement(readingRulerPage.rulerStyleButtonLabel(), index), styleName);
+    },
+
     verifyVisibleOnLandingCheckboxIsUnchecked: () => {
         readingRulerPage.visibleOnLandingCheckbox()
             .should('not.be.checked');
@@ -230,8 +268,24 @@ const steps = {
      * @description this function verifies color of the ruler displayed in the preview tab
      */
     verifyReadingRulerColorInPreviewTab: (colorValue) => {
+        const fillColor = () => {
+            switch (colorValue) {
+                case 0:
+                    return '#707070';
+                case 1:
+                    return '#1A1A1A';
+                case 2:
+                    return '#008699';
+                case 3:
+                    return '#009f6A';
+                case 4:
+                    return '#991D00';
+                default:
+                    return 'incorrect colorIndex';
+            }
+        };
         readingRulerPage.rulerColor()
-            .should('have.attr', 'color', colorValue)
+            .should('have.attr', 'color', fillColor());
     },
 
     /**
@@ -245,6 +299,11 @@ const steps = {
             .should('have.attr', 'size', sizeValue)
     },
 
+    verifyReadingRulerExistInPreviewTab: () => {
+        readingRulerPage.readingRuler()
+            .should('be.visible');
+    },
+
     //additional settings
     addTextToTeacherGuidelinesInputField: () => {
         readingRulerPage.additionalSettingsTeacherGuidelinesInputField()