itemengine-cypress-automation 1.0.128 → 1.0.130

package/cypress/pages/components/questionInputFieldComponent.js

@@ -64,7 +64,7 @@ const steps = {
 
     focusInQuestionInputField: () => {
         questionInputFieldComponent.questionInputField()
-            .click();
+            .click({ position: 'right' });
     },
 
     addResponseArea: () => {

package/cypress/pages/components/questionInstructionsComponent.js

@@ -45,8 +45,9 @@ const steps = {
     addTextInQuestionInstructionsInputField: (text) => {
         questionInstructionsComponent.questionInstructionsInputField()
             .type(text)
-            .should('have.text', text)
             .blur();
+        questionInstructionsComponent.questionInstructionsInputField()
+            .should('have.text', text);
     },
 
     /**

package/cypress/pages/contentBlocksPage.js

@@ -0,0 +1,515 @@
+import utilities from "../support/helpers/utilities";
+import { createQuestionBasePage, commonComponents } from "./components";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...commonComponents,
+    headerLabel: () => cy.get('[class*="ContentBlocksstyles__LabelContent"]'),
+    titleLabel: () => cy.get('.inline-text-property-label').eq(0),
+    titleInputField: () => cy.get('.input-field input').eq(0),
+    headerSubTitleLabel: () => cy.get('.subtitle-label'),
+    headerSubTitleInputField: () => cy.get('.input-field input').eq(1),
+    groupDividerWrapper: () => cy.get('.body-group-divider'),
+    textBlockWrapper: () => cy.get('.body-text-block'),
+    textBlockLabel: () => cy.get('.body-section-header'),
+    textBlockInputField: () => cy.get('[title="Enter text block"]'),
+    bodyLabel: () => cy.get('.options-label'),
+    bodyWrapper: () => cy.get('.edit-mcq-options-wrapper'),
+    bodySubTitleLabel: () => cy.get('.body-section-header'),
+    bodySubTitleWrapper: () => cy.get('.body-subtitle'),
+    bodySubTitleInputField: () => cy.get('.body-section-header').last().parent().find('input'),
+    inputFieldWrapper: () => cy.get('.option-component'),
+    addGroupDividerButton: () => cy.get('.actions-button-wrapper button').eq(0),
+    addSubTitleButton: () => cy.get('.actions-button-wrapper button').eq(1),
+    addTextBlockButton: () => cy.get('.actions-button-wrapper button').eq(2),
+    groupDividerLabel: () => cy.get('.group-divider').parents('[class*="SingleOptionstyle__EditorBlockWrapper"]').find('.body-section-header'),
+    groupDivider: () => cy.get('.group-divider'),
+    dragHandleButton: () => cy.get('.dragicon-button'),
+    deleteButton: () => cy.get('[class*="SingleOptionstyle__IconButtonWrapper"] button'),
+    blockNumeration: () => cy.get('[class*="SingleOptionstyle__AdornmentDiv"]'),
+    styleAndLayoutCustomizationLabel: () => cy.get('[class*="ContentBlocksstyles__StyleLayoutWrapper"] .title-casing'),
+    styleAndLayoutCustomizationInfoIcon: () => cy.get('.info-icon-wrapper'),
+    groupNavigationLabel: () => cy.get('[class*="ContentBlocksstyles__GroupNavigationWrapper"] [class*="ContentBlocksstyles__WrapperSubHeader"]'),
+    groupNavigationOptionButton: (index) => cy.get('.group-navigation button').eq(index),
+    groupDividerStyleWrapper: () => cy.get('[class*="ContentBlocksstyles__GroupDividerWrapper"]'),
+    groupDividerStyleLabel: () => cy.get('[class*="ContentBlocksstyles__GroupDividerWrapper"] [class*="ContentBlocksstyles__WrapperSubHeader"]'),
+    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'),
+    //Preview tab
+    titlePreviewTab: () => cy.get('.content-blocks-heading'),
+    subTitleLabelPreviewTab: () => cy.get('[class*="ContentBlocksPreviewstyles__SubTitleText"]').eq(0),
+    contentWrapperPreviewTab: () => cy.get('.content-wrapper'),
+    bodySubTitlePreviewTab: () => cy.get('.content-wrapper [class*="ContentBlocksPreviewstyles__SubTitleText"]'),
+    textBlockPreviewTab: () => cy.get('.question-text-wrapper'),
+    groupDividerPreviewTab: () => cy.get('.content-wrapper .group-divider'),
+    previousPageButton: () => cy.get('.pagination-button[data-at="previous"]'),
+    nextPageButton: () => cy.get('.pagination-button[data-at="next"]'),
+    noPreviewText: () => cy.get('[class*="PassagePreviewstyles__NoPreview"]'),
+    paginationText: () => cy.get('.pagination-text'),
+    previewWrapper: () => cy.get('[class*="TabsComponentstyles__PreviewWrapper"]'),
+    sliderButtonPreviewTab: () => cy.get('.slider-indicators button'),
+    slidersWrapper: () => cy.get('.slider-indicators'),
+    tabListBoxWrapper: () => cy.get('[class*="ContentBlocksPreviewstyles__ContentBlocksPreviewWrapper"] [class*="TabListButtonWrapper"]'),
+    tabListButton: () => cy.get('[class*="ContentBlocksPreviewstyles__ContentBlocksPreviewWrapper"] [class*="TabListButtonWrapper"] button'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+
+    addGroupDivider: () => {
+        contentBlocksPage.addGroupDividerButton()
+            .click();
+    },
+
+    addTextBlock: () => {
+        contentBlocksPage.addTextBlockButton()
+            .click();
+    },
+
+    addSubTitle: () => {
+        contentBlocksPage.addSubTitleButton()
+            .click();
+    },
+
+    /**
+    * @description Enters text into the input field and verifies if the entered text matches the expected value.
+    * @param {string} text The text to be entered into the input field.
+    */
+    enterTextInTitleInputField: (text) => {
+        contentBlocksPage.titleInputField()
+            .type(text)
+            .should('have.value', text);
+    },
+
+    /**
+     * @description Verifies the text displayed in the title section of the preview tab.
+     * @param {string} text - The expected text for the title.
+     */
+    verifyTitleTextPreviewTab: (text) => {
+        utilities.verifyInnerText(contentBlocksPage.titlePreviewTab(), text);
+        utilities.verifyElementVisibilityState(contentBlocksPage.titlePreviewTab(), 'visible');
+    },
+
+    /**
+     * @description Verifies the text displayed in the subtitle section of the preview tab.
+     * @param {string} text - The expected text for the subtitle.
+     */
+    verifySubTitleTextPreviewTab: (text) => {
+        utilities.verifyInnerText(contentBlocksPage.subTitleLabelPreviewTab(), text);
+        utilities.verifyElementVisibilityState(contentBlocksPage.subTitleLabelPreviewTab(), 'visible');
+    },
+
+    /**
+     * @description Verifies the text displayed in a text block of the preview tab.
+     * @param {number} index - The index of the text block.
+     * @param {string} text - The expected text for the text block.
+     */
+    verifyTextBlockTextPreviewTab: (index, text) => {
+        utilities.verifyInnerText(utilities.getNthElement(contentBlocksPage.textBlockPreviewTab(), index), text);
+        utilities.verifyElementVisibilityState(contentBlocksPage.textBlockPreviewTab(), 'visible');
+    },
+
+    /**
+     * @description Verifies the text displayed in a body subtitle of the preview tab.
+     * @param {number} index - The index of the body subtitle.
+     * @param {string} text - The expected text for the body subtitle.
+     */
+    verifyBodySubTitleTextPreviewTab: (index, text) => {
+        utilities.verifyInnerText(utilities.getNthElement(contentBlocksPage.bodySubTitlePreviewTab(), index), text);
+        utilities.verifyElementVisibilityState(contentBlocksPage.bodySubTitlePreviewTab(), 'visible');
+    },
+
+    /**
+     * @description Verifies the visibility state of a group divider in the preview tab.
+     * @param {number} index - The index of the group divider.
+     */
+    verifyGroupDividerPreviewTab: (index) => {
+        utilities.verifyElementVisibilityState(utilities.getNthElement(contentBlocksPage.groupDividerPreviewTab(), index), 'visible');
+    },
+
+    /**
+     * @description Verifies the style of a group divider in the preview tab.
+     * @param {number} index - The index of the group divider.
+     * @param {string} style - The expected style of the group divider.
+     */
+    verifyGroupDividerStylePreviewTab: (index, style) => {
+        utilities.getNthElement(contentBlocksPage.groupDividerPreviewTab(), index)
+            .should('have.css', 'border-top', `1px ${style} ${css.color.titleContainerBorder}`);
+    },
+
+    /**
+    * @description Enters text into the input field and verifies if the entered text matches the expected value.
+    * @param {string} text The text to be entered into the input field.
+    */
+    enterTextInSubTitleInputField: (text) => {
+        contentBlocksPage.headerSubTitleInputField()
+            .type(text)
+            .should('have.value', text);
+    },
+
+    /**
+    * @description Enters text into the input field and verifies if the entered text matches the expected value.
+    * @param {number} index index of input field
+    * @param {string} text The text to be entered into the input field.
+    */
+    enterTextInBodySubTitleInputField: (index, text) => {
+        contentBlocksPage.bodySubTitleWrapper()
+            .find('input')
+            .eq(index)
+            .type(text)
+            .blur()
+            .should('have.value', text);
+    },
+
+    /**
+    * @description Enters text into the input field and verifies if the entered text matches the expected value.
+    * @param {number} index index of input field
+    * @param {string} text The text to be entered into the input field.
+    */
+    enterTextInTextBlockInputField: (index, text) => {
+        contentBlocksPage.textBlockInputField()
+            .eq(index)
+            .type('{backspace}')
+            .type(text)
+            .blur()
+            .should('have.text', text);
+    },
+
+    clearAndFocusOutOfTextBlockInputField: () => {
+        contentBlocksPage.textBlockInputField()
+            .clear()
+            .type('{backspace}')
+            .blur();
+    },
+
+    verifyTitleInputFieldPlaceholderText: () => {
+        contentBlocksPage.titleInputField()
+            .should('have.attr', 'placeholder', 'Enter title');
+    },
+
+    verifySubTitleInputFieldPlaceholderText: () => {
+        contentBlocksPage.headerSubTitleInputField()
+            .should('have.attr', 'placeholder', 'Enter sub title');
+    },
+
+    verifyTextBlockInputFieldPlaceholderText: () => {
+        contentBlocksPage.textBlockInputField()
+            .should('have.attr', 'data-cke-editorplaceholder', 'Enter text block');
+    },
+
+    verifyBodySubTitleInputFieldPlaceholderText: () => {
+        contentBlocksPage.bodySubTitleInputField()
+            .should('have.attr', 'placeholder', 'Enter sub title');
+    },
+
+    verifyDragHandleButtonDisabled: () => {
+        commonComponents.dragHandleButton()
+            .parents('[class*="SingleOptionstyle__IconWrapper"]')
+            .should('have.attr', 'draggable', 'false');
+    },
+
+    verifyDragHandleButtonEnabled: () => {
+        commonComponents.dragHandleButton()
+            .parents('[class*="SingleOptionstyle__IconWrapper"]')
+            .should('have.attr', 'draggable', 'true');
+    },
+
+    verifyBodyContents: (index) => {
+        contentBlocksPage.bodyWrapper()
+            .eq(index)
+            .within(() => {
+                commonComponents.dragHandleButton()
+                    .should('exist');
+                contentBlocksPage.deleteButton()
+                    .should('exist');
+                contentBlocksPage.blockNumeration()
+                    .should('have.text', index + 1);
+            });
+    },
+
+    /**
+     * @description Deletes a page at the specified index.
+     * @param {number} index - The index of the page to delete.
+     */
+    deletePage: (index) => {
+        contentBlocksPage.deleteButton()
+            .eq(index)
+            .click();
+    },
+
+    /**
+     * @description Verifies the options available for group navigation.
+     * @param {string[]} groupNavigationOptionsArray - An array containing the expected options for group navigation.
+     */
+    verifyGroupNavigationOptions: (groupNavigationOptionsArray) => {
+        groupNavigationOptionsArray.forEach((option, index) => {
+            utilities.verifyInnerText(contentBlocksPage.groupNavigationOptionButton(index), option);
+            utilities.verifyElementVisibilityState(contentBlocksPage.groupNavigationOptionButton(index), 'visible');
+        });
+    },
+
+    /**
+     * @description Verifies the options available for group divider styles.
+     * @param {string[]} groupDividerStyleOptionsArray - An array containing the expected options for group divider styles.
+     */
+    verifyGroupDividerStyleOptions: (groupDividerStyleOptionsArray) => {
+        groupDividerStyleOptionsArray.forEach((option, index) => {
+            utilities.verifyInnerText(contentBlocksPage.groupDividerStyleOptionButton(index), option);
+            utilities.verifyElementVisibilityState(contentBlocksPage.groupDividerStyleOptionButton(index), 'visible');
+        });
+    },
+
+    /**
+     * @description Selects the group navigation option at the specified index.
+     * @param {number} index - The index of the group navigation option to select.
+     */
+    selectGroupNavigationOption: (index) => {
+        contentBlocksPage.groupNavigationOptionButton(index)
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    /**
+     * @description Verifies that the group navigation option at the specified index is selected.
+     * @param {number} index - The index of the group navigation option to verify.
+     */
+    verifyGroupNavigationOptionSelected: (index) => {
+        contentBlocksPage.groupNavigationOptionButton(index)
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    /**
+     * @description Selects a group divider style option at the specified index.
+     * @param {number} index - The index of the group divider style option to select.
+     */
+    selectGroupDividerStyleOption: (index) => {
+        contentBlocksPage.groupDividerStyleOptionButton(index)
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    /**
+     * @description Verifies that a group divider style option at the specified index is selected.
+     * @param {number} index - The index of the group divider style option to verify.
+     */
+    verifyGroupDividerStyleOptionSelected: (index) => {
+        contentBlocksPage.groupDividerStyleOptionButton(index)
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    /**
+     * @description Verifies that a group navigation option at the specified index is unselected.
+     * @param {number} index - The index of the group navigation option to verify.
+     */
+    verifyGroupNavigationOptionUnselected: (index) => {
+        contentBlocksPage.groupNavigationOptionButton(index)
+            .should('not.have.class', 'ngie-toggle-button-selected');
+    },
+
+    /**
+     * @description Verifies that a group divider style option at the specified index is unselected.
+     * @param {number} index - The index of the group divider style option to verify.
+     */
+    verifyGroupDividerStyleOptionUnselected: (index) => {
+        contentBlocksPage.groupDividerStyleOptionButton(index)
+            .should('not.have.class', 'ngie-toggle-button-selected');
+    },
+
+    /**
+     * @description Enters text into the tabs prefix input field and verifies the entered text.
+     * @param {string} text - The text to enter into the tabs prefix input field.
+     */
+    enterTextInTabsPrefixInputField: (text) => {
+        contentBlocksPage.tabsPrefixInputField()
+            .clear()
+            .type(text)
+            .blur()
+            .should('have.value', text);
+    },
+
+    /**
+     * @description Verifies that the tabs prefix input field contains the expected text.
+     * @param {string} text - The expected text in the tabs prefix input field.
+     */
+    verifyTextInTabsPrefixInputField: (text) => {
+        contentBlocksPage.tabsPrefixInputField()
+            .should('have.value', text);
+    },
+
+    /**
+    * @param {number} currentPage shows the current page
+    * @param {number} TotalPages shows the total no of pages
+    * @description this function verifies pagination text displayed in the preview tab
+    */
+    verifyPaginationTextPreviewTab: (currentPage, TotalPages) => {
+        contentBlocksPage.paginationText()
+            .should('have.text', `${currentPage} of ${TotalPages}`);
+    },
+
+    navigateToNextPage: () => {
+        contentBlocksPage.nextPageButton()
+            .click();
+    },
+
+    navigateToPreviousPage: () => {
+        contentBlocksPage.previousPageButton()
+            .click();
+    },
+
+    hoverOnNextPageButton: () => {
+        contentBlocksPage.nextPageButton()
+            .realHover()
+    },
+
+    hoverAwayFromNextPageButton: () => {
+        contentBlocksPage.nextPageButton()
+            .realHover({ position: 'topLeft' })
+    },
+
+    hoverOnPreviousPageButton: () => {
+        contentBlocksPage.previousPageButton()
+            .realHover()
+    },
+
+    hoverAwayFromPreviousPageButton: () => {
+        contentBlocksPage.previousPageButton()
+            .realHover({ position: 'topLeft' })
+    },
+
+    /**
+     * @description Navigates to a specific slide at the given index.
+     * @param {number} index - The index of the slide to navigate to.
+     */
+    navigateToSlide: (index) => {
+        contentBlocksPage.sliderButtonPreviewTab()
+            .find('[class*="Circle"]')
+            .eq(index)
+            .click()
+            .should('have.css', 'background-color', css.color.titleContainerBorder);
+    },
+
+    /**
+    * @description verifies active state of specific slide at the given index.
+    * @param {number} index - The index of the active slide.
+    */
+    verifyActiveSlide: (index) => {
+        contentBlocksPage.sliderButtonPreviewTab()
+            .find('[class*="Circle"]')
+            .eq(index)
+            .should('have.css', 'background-color', css.color.titleContainerBorder);
+    },
+
+    /**
+     * @description Navigates to a specific tab at the given index.
+     * @param {number} index - The index of the tab to navigate to.
+     */
+    navigateToTab: (index) => {
+        contentBlocksPage.tabListButton()
+            .eq(index)
+            .click()
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+    * @description verifies active state of specific tab at the given index.
+    * @param {number} index - The index of the active tab.
+    */
+    verifyActiveTab: (index) => {
+        contentBlocksPage.tabListButton()
+            .eq(index)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * @description Verifies the text of tab list buttons up to the specified index.
+     * @param {number} index - The maximum index to check.
+     * @param {string} label - The label expected on the tab list buttons.
+     */
+    verifyTabListButtonLabel: (index, label) => {
+        for (var i = 0; i < index; i++) {
+
+            contentBlocksPage.tabListButton()
+                .eq(i)
+                .should('have.text', `${label} ${i + 1}`);
+        }
+    },
+
+    /**
+     * @description Navigates to a tab in the preview tab at the specified index.
+     * @param {number} index - The index of the tab to navigate to.
+     */
+    navigateToTabPreviewTab: (index) => {
+        contentBlocksPage.tabListButton()
+            .eq(index)
+            .click();
+    },
+
+    verifyBodySubTitleContent: (index, numeration) => {
+        contentBlocksPage.bodySubTitleWrapper()
+            .eq(index)
+            .within(() => {
+                utilities.verifyInnerText(contentBlocksPage.bodySubTitleLabel(), 'Sub title');
+                utilities.verifyElementVisibilityState(contentBlocksPage.bodySubTitleLabel(), 'visible');
+                utilities.verifyElementVisibilityState(contentBlocksPage.bodySubTitleInputField(), 'visible');
+                utilities.verifyInnerText(contentBlocksPage.blockNumeration(), numeration);
+                utilities.verifyElementVisibilityState(contentBlocksPage.blockNumeration(), 'visible');
+                steps.verifyBodySubTitleInputFieldPlaceholderText();
+                utilities.verifyElementVisibilityState(contentBlocksPage.dragHandleButton(), 'visible');
+                utilities.verifyElementVisibilityState(contentBlocksPage.deleteButton(), 'visible');
+            });
+    },
+
+    verifyTextBlockContent: (index, numeration) => {
+        contentBlocksPage.textBlockWrapper()
+            .eq(index)
+            .within(() => {
+                utilities.verifyInnerText(contentBlocksPage.textBlockLabel(), 'Text block');
+                utilities.verifyElementVisibilityState(contentBlocksPage.textBlockLabel(), 'visible');
+                utilities.verifyElementVisibilityState(contentBlocksPage.textBlockInputField(), 'visible');
+                utilities.verifyInnerText(contentBlocksPage.blockNumeration(), numeration);
+                utilities.verifyElementVisibilityState(contentBlocksPage.blockNumeration(), 'visible');
+                steps.verifyTextBlockInputFieldPlaceholderText();
+                utilities.verifyElementVisibilityState(contentBlocksPage.dragHandleButton(), 'visible');
+                utilities.verifyElementVisibilityState(contentBlocksPage.deleteButton(), 'visible');
+            });
+    },
+
+    verifyGroupDividerContent: (index) => {
+        contentBlocksPage.groupDividerWrapper()
+            .eq(index)
+            .within(() => {
+                utilities.verifyInnerText(contentBlocksPage.groupDividerLabel(), 'Group divider');
+                utilities.verifyElementVisibilityState(contentBlocksPage.groupDividerLabel(), 'visible');
+                utilities.verifyElementVisibilityState(contentBlocksPage.groupDivider(), 'visible');
+                utilities.verifyElementVisibilityState(contentBlocksPage.dragHandleButton(), 'visible');
+                utilities.verifyElementVisibilityState(contentBlocksPage.deleteButton(), 'visible');
+            });
+    },
+
+    verifyPlaceholderTextNotExist: (selector) => {
+        selector()
+            .should('not.have.attr', 'placeholder');
+    },
+
+    verifyTextBlockInputFieldPlaceholderTextNotExist: () => {
+        contentBlocksPage.textBlockInputField()
+            .should('not.have.attr', 'data-cke-editorplaceholder');
+    },
+
+    verifyNumerationText: () => {
+        contentBlocksPage.inputFieldWrapper()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .within(() => {
+                        contentBlocksPage.blockNumeration()
+                            .should('have.text', `${index + 1}`);
+                    });
+            });
+    }
+}
+
+export const contentBlocksPage = {
+    ...selectors,
+    steps
+}

package/cypress/pages/drawingResponsePage.js

@@ -181,7 +181,7 @@ const selectors = {
     additionalSettingsStrokeImage: () => cy.get('[class*="DrawingResponsestyles__StrokeLineThicknessWrapper"] svg[aria-label*="Stroke"]'),
     setLineTypeButton: (ariaLabel = null) => {
         if (ariaLabel) {
-            return cy.get(`[class*="DrawingResponsestyles__SetLineTypeWrapper"] button[aria-label*="Set line types group ${ariaLabel}"]`)
+            return cy.get(`[class*="DrawingResponsestyles__SetLineTypeWrapper"] button[aria-label*="Set Line Types group ${ariaLabel}"]`)
         } else {
             return cy.get('[class*="DrawingResponsestyles__SetLineTypeWrapper"] button')
         }
@@ -605,7 +605,7 @@ const steps = {
     verifySecondaryPopupLineType: (lineType, index) => {
         drawingResponsePage.previewTabSecondaryOptionPopupOptions()
             .eq(index)
-            .should('have.attr', 'aria-label', `Line type ${lineType}`);
+            .should('have.attr', 'aria-label', `Line Type ${lineType}`);
     },
 
     /**