itemengine-cypress-automation 1.0.143-migrationScripts-d059d60.0 → 1.0.144-21MatchRepoUpdate-0ab2c79.0

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -0,0 +1,390 @@
+import constants from "../../fixtures/constants";
+import utilities from "../../support/helpers/utilities";
+import { autoScoredScoringPreviewTab } from "./autoScoredScoringPreviewTab";
+const css = Cypress.env('css');
+
+const selectors = {
+    editCellPropertyButton: () => cy.get('button[aria-label="More Action"]'),
+    editCellPropertyList: () => cy.get('.ngie-action-cell-container [role="menu"]'),
+    editCellPropertyListOption: () => cy.get('[class*="MuiMenuItem"][role="menuitem"]'),
+    editCellPropertyTableWrapper: () => cy.get('.single-select-grid-option-selection-component .selection-grid-wrapper').eq(0),
+    editCellPropertyRow: () => gridQuestionCommonComponent.editCellPropertyTableWrapper().find('[class*="wrapper-row"]'),
+    cellPropertyInputField: () => cy.get('[title="Enter text here..."]'),
+    optionCellPropertyInputField: () => cy.get('[title="Option text or image..."]'),
+    tableRowSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="wrapper-row"]'),
+    tableRowPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="wrapper-row"]'),
+    optionsButton: () => cy.get('[class*="PreviewSelectionButton"]'),
+    gridPreviewTab: () => cy.get('.single-selection-grid-wrapper:visible'),
+    tableCell: () => cy.get('[class*="CellContainer"]'),
+    correctAnswerGrid: () => cy.get('.selection-grid-wrapper').last(),
+    tableRow: () => cy.get('[class*="wrapper-row"]'),
+    correctAnswersLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="CorrectAnswerHeader"]')
+}
+
+const steps = {
+    /**
+     * Modifies the property of a table cell at the specified row and column.
+     * @param {Object} position - The position of the table cell to modify.
+     * @param {number} position.row - The row index (zero-based) of the table cell.
+     * @param {number} position.column - The column index (zero-based) of the table cell.
+     * @param {('Heading', 'Subheading', 'Text', 'None')} listOption - The option to select from the list (e.g., 'Heading', 'Subheading', 'Text', 'None').
+     * @throws {Error} Thrown if the listOption is invalid.
+     */
+    modifyTableCellProperty: ({ row, column }, listOption) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyButton(), column)
+                .scrollIntoView()
+                .click();
+        });
+        utilities.verifyElementVisibilityState(gridQuestionCommonComponent.editCellPropertyList(), 'visible');
+        switch (listOption) {
+            case 'Heading':
+                gridQuestionCommonComponent.editCellPropertyListOption()
+                    .contains('Heading', { matchCase: false })
+                    .click();
+                break;
+            case 'Subheading':
+                gridQuestionCommonComponent.editCellPropertyListOption()
+                    .contains('Subheading', { matchCase: false })
+                    .click();
+                break;
+            case 'Text':
+                gridQuestionCommonComponent.editCellPropertyListOption()
+                    .contains('Text', { matchCase: false })
+                    .click();
+                break;
+            case 'None':
+                gridQuestionCommonComponent.editCellPropertyListOption()
+                    .contains('None', { matchCase: false })
+                    .click();
+                break;
+            default:
+                throw new Error('Invalid list option');
+        }
+    },
+
+    /**
+     * Enters text into the input field of a table cell property.
+     * @param {Object} position - The position of the table cell property.
+     * @param {number} position.row - The row index (zero-based) of the table cell property.
+     * @param {number} position.column - The column index (zero-based) of the table cell property.
+     * @param {string} text - The text to enter into the input field.
+     */
+    enterTextInCellPropertyInputField: ({ row, column }, text) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column).within(() => {
+                gridQuestionCommonComponent.cellPropertyInputField()
+                    .type(text)
+                    .blur();
+            });
+        });
+    },
+
+    /**
+     * Enters text into the input field of an option cell.
+     * @param {Object} position - The position of the option cell.
+     * @param {number} position.row - The row index (zero-based) of the option cell.
+     * @param {number} position.column - The column index (zero-based) of the option cell.
+     * @param {string} text - The text to enter into the input field.
+     */
+    enterTextInOptionCellInputField: ({ row, column }, text) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column).within(() => {
+                gridQuestionCommonComponent.optionCellPropertyInputField()
+                    .type(text)
+                    .blur();
+            })
+        });
+    },
+
+    setRowsAndColumnsForBasicQuestion: () => {
+        gridQuestionCommonComponent.steps.modifyTableCellProperty({ row: 1, column: 0 }, 'Heading');
+        gridQuestionCommonComponent.steps.modifyTableCellProperty({ row: 2, column: 0 }, 'Subheading');
+        gridQuestionCommonComponent.steps.enterTextInCellPropertyInputField({ row: 1, column: 0 }, 'Elephants are the only mammals that can\'t jump');
+        gridQuestionCommonComponent.steps.enterTextInCellPropertyInputField({ row: 2, column: 0 }, 'Bats are blind and navigate by using echolocation');
+    },
+
+    //Note: Need to work on this after https://redmine.zeuslearning.com/issues/565255 gets resolved
+    /**
+     * @param {number} cellIndex - Index of the table cell.
+     * @param {("Heading" | "Subheading" | "Text" | "None")} cellProperty - Type of property to verify.
+     * @description Verifies the appearance and content of a specific property in a table cell on the preview tab.
+     */
+    verifyTableCellPropertyPreviewTab: (cellIndex, cellProperty) => {
+        switch (cellProperty) {
+            case 'Heading':
+                utilities.getNthElement(gridQuestionCommonComponent.cellContainerPreviewTab(), cellIndex)
+                    .should('have.class', 'heading');
+                break;
+            case 'Subheading':
+                utilities.getNthElement(gridQuestionCommonComponent.cellContainerPreviewTab(), cellIndex)
+                    .should('have.class', 'subheading');
+                break;
+            case 'Text':
+                utilities.getNthElement(gridQuestionCommonComponent.cellContainerPreviewTab(), cellIndex)
+                    .should('have.class', 'text');
+                break;
+            case 'Dropzone':
+                utilities.getNthElement(gridQuestionCommonComponent.cellContainerPreviewTab(), cellIndex)
+                    .should('have.class', 'dropzone-cell');
+                break;
+            case 'None':
+                utilities.getNthElement(gridQuestionCommonComponent.cellContainerPreviewTab(), cellIndex)
+                    .should('have.class', 'text')
+                    .and('have.text', '');
+                break;
+            default:
+                throw new Error('Invalid list option');
+        };
+    },
+
+    /**
+     * Focuses on the input field of a table cell property for editing.
+     * @param {Object} position - The position of the table cell property.
+     * @param {number} position.row - The row index (zero-based) of the table cell property.
+     * @param {number} position.column - The column index (zero-based) of the table cell property.
+     */
+    focusInEditTableCellInputField: ({ row, column }) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column).within(() => {
+                gridQuestionCommonComponent.cellPropertyInputField()
+                    .click();
+            });
+        });
+    },
+
+    /**
+     * Focuses on the input field of an option cell for editing.
+     * @param {Object} position - The position of the option cell.
+     * @param {number} position.row - The row index (zero-based) of the option cell.
+     * @param {number} position.column - The column index (zero-based) of the option cell.
+     */
+    focusInEditTableOptionCellInputField: ({ row, column }) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column).within(() => {
+                gridQuestionCommonComponent.optionCellPropertyInputField()
+                    .click();
+            });
+        });
+    },
+
+    /**
+     * Verifies that a table cell in the preview tab contains an image with specific attributes.
+     * @param {Object} position - The position of the table cell.
+     * @param {number} position.row - The row index (zero-based) of the table cell.
+     * @param {number} position.column - The column index (zero-based) of the table cell.
+     */
+    verifyTableCellWithImageInPreviewTab: ({ row, column }) => {
+        gridQuestionCommonComponent.gridPreviewTab()
+            .within(() => {
+                utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row).within(() => {
+                    utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                        .find('img')
+                        .should('have.attr', 'src', constants.foxImageLink)
+                        .and('have.attr', 'alt', constants.foxImageAltText);
+                })
+            });
+    },
+
+    /**
+     * Verifies that a table cell in the preview tab contains bold text.
+     * @param {Object} position - The position of the table cell.
+     * @param {number} position.row - The row index (zero-based) of the table cell.
+     * @param {number} position.column - The column index (zero-based) of the table cell.
+     */
+    verifyTableCellWithBoldTextInPreviewTab: ({ row, column }) => {
+        gridQuestionCommonComponent.gridPreviewTab()
+            .within(() => {
+                utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row).within(() => {
+                    utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                        .find('strong')
+                        .should('have.text', 'This is a bold option');
+                });
+            });
+    },
+
+    /**
+     * Verifies that a table cell in the preview tab contains text representing an equation.
+     * @param {Object} position - The position of the table cell.
+     * @param {number} position.row - The row index (zero-based) of the table cell.
+     * @param {number} position.column - The column index (zero-based) of the table cell.
+     */
+    verifyTableCellWithEquationTextInPreviewTab: ({ row, column }) => {
+        gridQuestionCommonComponent.gridPreviewTab()
+            .within(() => {
+                utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row).within(() => {
+                    utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                        .find('[role="math"]')
+                        .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+                        .contains(constants.CKEditorInputFieldEnteredEquationText);
+                });
+            });
+    },
+
+    /**
+     * Sets an answer in the Specify Correct Answer section.
+     * @param {Object} position - The position of the option button.
+     * @param {number} position.row - The row index (zero-based) of the Specify Correct Answer section.
+     * @param {number} position.column - The column index (zero-based) of the option button.
+     */
+    setAnswerInSpecifyCorrectAnswerSection: ({ row, column }) => {
+        utilities.getNthElement(gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection(), row)
+            .within(() => {
+                utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column)
+                    .click()
+                    .should('have.class', 'selected');
+            });
+    },
+
+    /**
+     * Sets answers for all question stems in the Specify Correct Answer section.
+     * @param {Object[]} rowsAndColumns - An array of objects containing row and column indices.
+     * @param {number} rowsAndColumns[].row - The row index (zero-based) of the Specify Correct Answer section.
+     * @param {number} rowsAndColumns[].column - The column index (zero-based) of the option button.
+     */
+    setAnswersForAllQuestionStemsInSpecifyCorrectAnswerSection: (rowsAndColumns) => {
+        rowsAndColumns.forEach(({ row, column }) => {
+            steps.setAnswerInSpecifyCorrectAnswerSection({ row, column });
+        });
+    },
+
+    /**
+     * Selects options in the preview tab.
+     * @param {Object} position - The position of the option button.
+     * @param {number} position.row - The row index (zero-based) in the preview tab.
+     * @param {number} position.column - The column index (zero-based) of the option button in the preview tab.
+     */
+    selectOptionsInPreviewTab: ({ row, column }) => {
+        gridQuestionCommonComponent.gridPreviewTab().within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
+                .within(() => {
+                    utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column)
+                        .click()
+                        .should('have.class', 'selected');
+                });
+        });
+    },
+
+    /**
+     * Selects options for all question stems in the preview tab.
+     * @param {Object[]} rowsAndColumns - An array of objects containing row and column indices.
+     * @param {number} rowsAndColumns[].row - The row index (zero-based) in the preview tab.
+     * @param {number} rowsAndColumns[].column - The column index (zero-based) of the option button in the preview tab.
+     */
+    selectOptionsForAllQuestionStemsInPreviewTab: (rowsAndColumns) => {
+        rowsAndColumns.forEach(({ row, column }) => {
+            steps.selectOptionsInPreviewTab({ row, column });
+        });
+    },
+
+    /**
+     * Verifies the disabled state of an option button in the preview tab.
+     * @param {Object} position - The position of the option button.
+     * @param {number} position.row - The row index (zero-based) in the preview tab.
+     * @param {number} position.column - The column index (zero-based) of the option button in the preview tab.
+     */
+    verifyOptionDisabledState: ({ row, column }) => {
+        gridQuestionCommonComponent.gridPreviewTab().within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
+                .within(() => {
+                    utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column)
+                        .should('have.attr', 'tabindex', '-1');
+                });
+        });
+    },
+
+    /**
+     * Verifies the background color and icon visibility of an incorrect option button in the preview tab.
+     * @param {Object} position - The position of the option button.
+     * @param {number} position.row - The row index (zero-based) in the preview tab.
+     * @param {number} position.column - The column index (zero-based) of the option button in the preview tab.
+     */
+    verifyIncorrectOptionBackgroundAndIcon: ({ row, column }) => {
+        gridQuestionCommonComponent.gridPreviewTab().within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
+                .within(() => {
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column), {
+                        'background-color': css.color.incorrectAnswerLabelBg,
+                        'border': `1px solid ${css.color.incorrectAnswer}`
+                    });
+                    utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column).within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.incorrectIcon(), 'visible');
+                    });
+                });
+        });
+    },
+
+    /**
+     * Verifies the background color and icon visibility of an correct option button in the preview tab.
+     * @param {Object} position - The position of the option button.
+     * @param {number} position.row - The row index (zero-based) in the preview tab.
+     * @param {number} position.column - The column index (zero-based) of the option button in the preview tab.
+     */
+    verifyCorrectOptionBackgroundAndIcon: ({ row, column }) => {
+        gridQuestionCommonComponent.gridPreviewTab().within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
+                .within(() => {
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column), {
+                        'background-color': css.color.correctAnswerLabelBg,
+                        'border': `1px solid ${css.color.correctAnswer}`
+                    });
+                    utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column).within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'visible');
+                    });
+                });
+        });
+    },
+
+    /**
+     * Verifies correct answer responses for multiple rows and columns.
+     * @param {Array<{row: number, column: number}>} rowsAndColumns - An array of objects containing row and column indices.
+     * @returns {void}
+     */
+    verifyCorrectAnswerResponses: (rowsAndColumns) => {
+        rowsAndColumns.forEach(({ row, column }) => {
+            gridQuestionCommonComponent.correctAnswerGrid()
+                .within(() => {
+                    utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
+                        .within(() => {
+                            utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column), {
+                                'background-color': css.color.correctAnswerLabelBg,
+                                'border': `1px solid ${css.color.correctAnswer}`
+                            });
+                            utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column).within(() => {
+                                utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'visible');
+                            });
+                        });
+                })
+        });
+    },
+
+    verifyCorrectAnswerSectionNotExists: () => {
+        utilities.verifyElementVisibilityState(gridQuestionCommonComponent.correctAnswersLabel(), 'notExist');
+    },
+    
+    /**
+     * Verifies that the correct and incorrect icons do not exist and the background color of the option button is transparent in the preview tab.
+     * @param {Object} position - The position of the option button.
+     * @param {number} position.row - The row index (zero-based) in the preview tab.
+     * @param {number} position.column - The column index (zero-based) of the option button in the preview tab.
+     */
+    verifyCorrectIncorrectIconNotExists: ({ row, column }) => {
+        gridQuestionCommonComponent.gridPreviewTab().within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
+                .within(() => {
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column), {
+                        'background-color': css.color.transparent,
+                    });
+                    utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column).within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'hidden');
+                        utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.incorrectIcon(), 'notExist');
+                    });
+                });
+        });
+    }
+}
+
+export const gridQuestionCommonComponent = {
+    ...selectors,
+    steps,
+}

package/cypress/pages/components/imageCanvasComponent.js

@@ -571,7 +571,31 @@ const steps = {
                 .eq(index)
                 .trigger('mouseout', { force: true });
         });
-    }
+    },
+
+    /**
+     * @param {string} fileFormat format of the uploaded file in the highlight region
+     * @description this function verifies the attribute of the image has the expected file format
+     */
+    verifyUploadedImageFormatInBackgroundImageSection: (fileFormat) => {
+        imageCanvasComponent.canvasImage()
+            .should(($element) => {
+                const hrefAttributeValue = $element.attr('src');
+                expect(hrefAttributeValue).to.include(fileFormat);
+            });
+    },
+
+    /**
+     * @param {string} fileFormat format of the uploaded file in the highlight region
+     * @description this function verifies the attribute of the image has the expected file format
+     */
+    verifyUploadedImageFormatInPreviewTab: (fileFormat) => {
+        imageCanvasComponent.canvasImageInPreviewTab()
+            .should(($element) => {
+                const hrefAttributeValue = $element.attr('src');
+                expect(hrefAttributeValue).to.include(fileFormat);
+            });
+    },
 }
 
 const tests = {

package/cypress/pages/components/index.js

@@ -53,5 +53,9 @@ export * from './imageActionsComponent';
 export * from './createCustomCategoryFlyout';
 export * from './customizeMathCharacterComponent';
 export * from './fillInTheGapsDragAndDropCommonComponents';
-export * from './additionalSettingsAccessibilitySectionComponent';
 export * from './responseAreaSettingsPopupComponent';
+export * from './gridQuestionCommonComponent';
+export * from './gradingViewEnumerationComponent';
+export * from './ariaLabelSectionComponent';
+export * from './placeholderTextSectionComponent';
+export * from './additionalSettingsAccessibilitySectionComponent';

package/cypress/pages/components/placeholderTextSectionComponent.js

@@ -0,0 +1,110 @@
+import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    placeholderTextSectionLabel: () => cy.get('[class*="PlaceholderTextWrapper"]'),
+    placeholderTextInputFieldLabel: () => cy.get('.customized-placeholder-wrapper .text-label'),
+    placeholderTextInputField: () => cy.get('.customized-placeholder-wrapper input[aria-label="Placeholder Text"]'),
+    individualPlaceholderTextInputField: () => cy.get('input[aria-label*="Enter placeholder text"]'),
+    customizePlaceholderTextCheckbox: () => cy.get('[data-ngie-testid*="customize-placeholder-text-for-individual"][data-ngie-testid*="checkbox"] input'),
+    customizePlaceholderTextCheckboxLabel: () => cy.get('[data-ngie-testid*="customize-placeholder-text-for-individual"][data-ngie-testid*="checkbox"] .MuiFormControlLabel-label'),
+    inputFieldNumeration: () => cy.get('.MuiInputAdornment-root'),
+}
+
+const steps = {
+    verifyPlaceholderTextInputFieldValue: (value) => {
+        utilities.verifyInputFieldValue(placeholderTextSectionComponent.placeholderTextInputField(), value);
+    },
+
+    verifyCustomizePlaceholderTextCheckboxUnchecked: () => {
+        placeholderTextSectionComponent.customizePlaceholderTextCheckbox()
+            .should('not.be.checked');
+    },
+
+    
+    addInputToPlaceholderTextInputField: (value) => {
+        placeholderTextSectionComponent.placeholderTextInputField()
+            .type(value)
+            .should('have.value', value)
+    },
+
+    clearPlaceholderTextInputField: () => {
+        placeholderTextSectionComponent.placeholderTextInputField()
+            .clear()
+            .blur();
+    },
+
+    addInputToIndividualPlaceholderTextInputField: (inputFieldIndex, value) => {
+        placeholderTextSectionComponent.individualPlaceholderTextInputField()
+            .eq(inputFieldIndex)
+            .type(value)
+            .should('have.value', value)
+    },
+
+    clearIndividualPlaceholderTextInputField: (inputFieldIndex) => {
+        placeholderTextSectionComponent.individualPlaceholderTextInputField()
+            .eq(inputFieldIndex)
+            .clear();
+    },
+
+    checkCustomizePlaceholderTextCheckbox: () => {
+        placeholderTextSectionComponent.customizePlaceholderTextCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    
+    verifyIndividualPlaceholderTextInputFields: (inputFieldIndex) => {
+        placeholderTextSectionComponent.individualPlaceholderTextInputField()
+            .eq(inputFieldIndex)
+            .parents('.input-editable')
+            .within(() => {
+                utilities.verifyInnerText(placeholderTextSectionComponent.inputFieldNumeration(), `${inputFieldIndex + 1}`)
+                utilities.verifyInputFieldValue(placeholderTextSectionComponent.individualPlaceholderTextInputField(), '');
+            });
+    },
+}
+
+const tests = {
+    verifyPlaceholderTextSectionContents: (typeOfInput) => {
+        it('"Placeholder text" section label, "Placeholder text" label and input field should be displayed. By default, the input field should be empty', () => {
+            utilities.verifyInnerText(placeholderTextSectionComponent.placeholderTextSectionLabel(), 'Placeholder text');
+            utilities.verifyInnerText(placeholderTextSectionComponent.placeholderTextInputFieldLabel(), 'Placeholder text');
+            placeholderTextSectionComponent.steps.verifyPlaceholderTextInputFieldValue('');
+        });
+
+        it(`"Customize placeholder text for individual ${typeOfInput} label and checkbox should be displayed. By default, the checkbox should be unchecked`, () => {
+            utilities.verifyInnerText(placeholderTextSectionComponent.customizePlaceholderTextCheckboxLabel(), `Customize placeholder text for individual ${typeOfInput}`);
+            placeholderTextSectionComponent.steps.verifyCustomizePlaceholderTextCheckboxUnchecked();
+        });
+
+        it('CSS of placeholder text section', { tags: 'css' }, () => {
+            utilities.verifyCSS(placeholderTextSectionComponent.placeholderTextSectionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(placeholderTextSectionComponent.placeholderTextInputFieldLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(placeholderTextSectionComponent.placeholderTextInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(placeholderTextSectionComponent.customizePlaceholderTextCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    },
+}
+
+export const placeholderTextSectionComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/responseAreaSettingsPopupComponent.js

@@ -1,8 +1,8 @@
 const selectors = {
     responseAreaSettingsWidthLabel: () => cy.get('[class*="InputNumberFieldstyle__NumberFieldWrapper"] .input-label-fields').eq(0),
-    responseAreaSettingsWidthInputField: () => cy.get('[class*="InputNumberFieldstyle__NumberFieldWrapper"] input').eq(0),
+    responseAreaSettingsWidthInputField: () => cy.get('input[id="Width (px)"]'),
     responseAreaSettingsHeightLabel: () => cy.get('[class*="InputNumberFieldstyle__NumberFieldWrapper"] .input-label-fields').eq(1),
-    responseAreaSettingsHeightInputField: () => cy.get('[class*="InputNumberFieldstyle__NumberFieldWrapper"] input').eq(1),
+    responseAreaSettingsHeightInputField: () => cy.get('input[id="Height (px)"]'),
     responseAreaSettingsCancelButton: () => cy.get('[class*="ResponseSettingsPopupstyles__PopupActionButtons"] button').eq(0),
     responseAreaSettingsOkButton: () => cy.get('[class*="ResponseSettingsPopupstyles__PopupActionButtons"] button').eq(1),
 }

package/cypress/pages/contentBlocksPage.js

@@ -36,6 +36,14 @@ const selectors = {
     groupDividerStyleOptionButton: (index) => cy.get('.group-divider-style button').eq(index),
     tabsPrefixLabel: () => cy.get('[class*="ContentBlocksstyles__TabPrefixWrapper"] .inline-text-property-label'),
     tabsPrefixInputField: () => cy.get('[class*="ContentBlocksstyles__TabPrefixWrapper"] input'),
+    assessmentMetricsLabel: () => cy.get('[class*="ContentBlocksstyles__AssessementMatricsWrapper"] [class*="ContentBlocksstyles__LabelContent"]'),
+    lexileLabel: () => cy.get('[class*="ContentBlocksstyles__AssessementMatricsWrapper"] .inline-text-property-label'),
+    lexileInputField: () => cy.get('[class*="ContentBlocksstyles__AssessementMatricsWrapper"] .input-label input'),
+    detailsLabel: () => cy.get('[class*="ContentBlocksstyles__DetailsWrapper"] [class*="ContentBlocksstyles__LabelContent"]'),
+    acknowledgementsAndReferencesLabel: () => cy.get('[class*="ContentBlocksstyles__DetailsWrapper"] .additional-settings-label').eq(0),
+    acknowledgementsAndReferencesInputField: () => cy.get('[class*="ContentBlocksstyles__DetailsWrapper"] [role="textbox"]').eq(0),
+    teacherScoringGuidelinesLabel: () => cy.get('[class*="ContentBlocksstyles__DetailsWrapper"] .additional-settings-label').eq(1),
+    teacherScoringGuidelinesInputField: () => cy.get('[class*="ContentBlocksstyles__DetailsWrapper"] [role="textbox"]').eq(1),
     //Preview tab
     titlePreviewTab: () => cy.get('.content-blocks-heading'),
     subTitleLabelPreviewTab: () => cy.get('[class*="ContentBlocksPreviewstyles__SubTitleText"]').eq(0),
@@ -232,7 +240,7 @@ const steps = {
      * @description Deletes a page at the specified index.
      * @param {number} index - The index of the page to delete.
      */
-    deletePage: (index) => {
+    deleteContentBlock: (index) => {
         contentBlocksPage.deleteButton()
             .eq(index)
             .click();
@@ -445,6 +453,44 @@ const steps = {
             .click();
     },
 
+    /**
+     * @description Enters text into the Lexile input field and verifies the entered text.
+     * @param {string} text - The text to enter into the Lexile input field.
+     */
+    enterTextInLexileInputField: (text) => {
+        contentBlocksPage.lexileInputField()
+            .clear()
+            .type(text)
+            .should('have.text', text);
+    },
+
+    /**
+     * @description Enters text into the Acknowledgements and References input field and verifies the entered text.
+     * @param {string} text - The text to enter into the Acknowledgements and References input field.
+     */
+    enterTextInAcknowledgementsAndReferencesInputField: (text) => {
+        contentBlocksPage.acknowledgementsAndReferencesInputField()
+            .clear()
+            .type(text)
+            .should('have.text', text)
+    },
+
+    /**
+     * @description Enters text into the Teacher scoring guidelines input field and verifies the entered text.
+     * @param {string} text - The text to enter into the Teacher scoring guidelines input field.
+     */
+    enterTextInTeacherScoringGuidelinesInputField: (text) => {
+        contentBlocksPage.teacherScoringGuidelinesInputField()
+            .clear()
+            .type(text)
+            .should('have.text', text)
+    },
+
+    /**
+     * @description Verifies the content of the body sub-title.
+     * @param {number} index - The index of the body sub-title to verify.
+     * @param {string} numeration - The numeration of the body sub-title.
+     */
     verifyBodySubTitleContent: (index, numeration) => {
         contentBlocksPage.bodySubTitleWrapper()
             .eq(index)
@@ -460,6 +506,11 @@ const steps = {
             });
     },
 
+    /**
+     * @description Verifies the content of the text block.
+     * @param {number} index - The index of the text block to verify.
+     * @param {string} numeration - The numeration of the text block.
+     */
     verifyTextBlockContent: (index, numeration) => {
         contentBlocksPage.textBlockWrapper()
             .eq(index)
@@ -475,6 +526,10 @@ const steps = {
             });
     },
 
+    /**
+     * @description Verifies the content of the group divider.
+     * @param {number} index - The index of the group divider to verify.
+     */
     verifyGroupDividerContent: (index) => {
         contentBlocksPage.groupDividerWrapper()
             .eq(index)
@@ -487,6 +542,10 @@ const steps = {
             });
     },
 
+    /**
+     * @description Verifies that a selector does not have a placeholder attribute.
+     * @param {Function} selector - The selector function to verify.
+     */
     verifyPlaceholderTextNotExist: (selector) => {
         selector()
             .should('not.have.attr', 'placeholder');