itemengine-cypress-automation 1.0.252 → 1.0.253

package/cypress/pages/components/ckEditorInsertTableComponent.js

@@ -0,0 +1,741 @@
+import { dialogBoxBase } from "../dialogBoxBase";
+import { createQuestionBasePage } from "../components/createQuestionBasePage.js";
+import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...createQuestionBasePage,
+    ...dialogBoxBase,
+    //Basic
+    tablePropertyWrapper: () => cy.get('.custom-link-wrapper'),
+    buttonTableIcon: () => cy.get('.cke_button__table_icon'),
+    tablePropertyLabel: () => cy.get('.dialog-header-label'),
+    buttonOk: () => cy.get('.cke_dialog_ui_button_ok'),
+    buttonCancel: () => cy.get('.cke_dialog_ui_button_cancel'),
+    tableInQuestionInstructionSection: () => cy.get('.custom_author_table'),
+
+    //Row Column
+    rowLabel: () => cy.get('.dialog-input-label').eq(0),
+    rowInputField: () => cy.get('.cke_dialog_ui_input_text').eq(1),
+    rowIncrement: () => cy.get('.increment').eq(0),
+    rowDecrement: () => cy.get('.decrement').eq(0),
+    columnLabel: () => cy.get('.dialog-input-label').eq(1),
+    columnInputField: () => cy.get('.cke_dialog_ui_input_text').eq(3),
+    columnIncrement: () => cy.get('.increment').eq(1),
+    columnDecrement: () => cy.get('.decrement').eq(1),
+
+    //Table Style
+    tableStyleLabel: () => cy.get('.table_styles_header .cke_dialog_ui_html'),
+    borderLabel: () => cy.get('.cke_dialog_ui_vbox_child').eq(26),
+    clearAllTableStyle: () => cy.get('.clear_all_table_styles'),
+
+    //Borders
+    allBorders: () => cy.get('[title="All borders"]'),
+    innerBorders: () => cy.get('[title="Inner borders"]'),
+    outerAndHorizontalBorders: () => cy.get('[title="Outer and horizontal borders"]'),
+    horizontalBorders: () => cy.get('[title="Horizontal borders "]'),
+    outerAndVerticalBorders: () => cy.get('[title="Outer and vertical borders"]'),
+    verticalBorders: () => cy.get('[title="Vertical borders"]'),
+    outerBorders: () => cy.get('[title="Outer borders"]'),
+    clearBorders: () => cy.get('[title="Clear borders"]'),
+    firstRowOfTable: () => cy.get('tbody tr').eq(0),
+    firstContainerOfTable: () => cy.get('tbody tr td').eq(0),
+    containerOfTable: () => cy.get('tbody tr td'),
+    headerContainerOfTable: () => cy.get('.custom_author_table th'),
+    borderSizeLabel: () => cy.get('.dialog-input-label').eq(7),
+    borderSizeInputField: () => cy.get('.cke_dialog_ui_input_text').eq(13),
+    stripedLabel: () => cy.get('.cke_dialog_ui_html').eq(3),
+    clearStripes: () => cy.get('[title="Clear stripes"]'),
+    horizontalStripes: () => cy.get('[title="Horizontal stripes"]'),
+    verticalStripes: () => cy.get('[title="Vertical stripes"]'),
+    addHoverStateLabel: () => cy.get('.dialog-input-label').eq(8),
+    addHoverStateDropDown: () => cy.get('.dialog-input-area').eq(8),
+    hoverOptionsSelect: (value = null) => {
+        if (value) {
+            return cy.get(`[class*="cke_dialog_ui_input_select"] option[value="${value}"]`)
+        } else {
+            return cy.get('[class*="cke_dialog_ui_input_select"] option[value]').eq(0)
+        }
+    },
+
+    //Headers
+    headerLabel: () => cy.get('.cke_dialog_ui_html').eq(0),
+    rowHeaderLabel: () => cy.get('.dialog-input-label').eq(5),
+    rowHeaderInput: () => cy.get('[aria-label="Header Rows"]'),
+    columnHeaderLabel: () => cy.get('.dialog-input-label').eq(6),
+    columnHeaderInput: () => cy.get('[aria-label="Header Columns"]'),
+    rowHeaderIncrementButton: () => cy.get('[aria-label="increment header row button"]'),
+    rowHeaderDecrementButton: () => cy.get('[aria-label="decrement header row button"]'),
+    columnHeaderIncrementButton: () => cy.get('[aria-label="increment header column button"]'),
+    columnHeaderDecrementButton: () => cy.get('[aria-label="decrement header column button"]'),
+    firstRowHeaderLabel: () => cy.get('.chk_box_make_first_row_title_header').eq(0),
+    firstRowHeaderCheckBox: () => cy.get('.chk_box_make_first_row_title_header').eq(1),
+    firstRowHeaderInTable: () => cy.get('[class*="InstructionComponentstyles__DivBody"] .custom_author_table [colspan="2"]'),
+
+    //Error Message
+    rowErrorMessage: () => cy.get('.inlvalid_value_error').eq(1),
+    rowHeaderErrorMessage: () => cy.get('.inlvalid_value_error').eq(5),
+    columnErrorMessage: () => cy.get('.inlvalid_value_error').eq(3),
+    columnHeaderErrorMessage: () => cy.get('.inlvalid_value_error').eq(8),
+
+    //Dimension
+    tableDimensionsLabel: () => cy.get('.dialog-input-label').eq(2),
+    fullWidthLabel: () => cy.get('.table-width-auto').eq(2),
+    fullWidthRadioButton: () => cy.get('.table-width-auto').eq(1),
+    autoAdjustLabel: () => cy.get('.table-width-auto').eq(4),
+    autoAdjustRadioButton: () => cy.get('.table-width-auto').eq(3),
+    widthPxLabel: () => cy.get('.dialog-input-label').eq(3),
+    widthPxInput: () => cy.get('.cke_dialog_ui_input_text').eq(5),
+    heightPxLabel: () => cy.get('.dialog-input-label').eq(4),
+    heightPxInput: () => cy.get('.cke_dialog_ui_input_text').eq(7),
+
+    //Alignment, Caption and Summary
+    alignmentLabel: () => cy.get('.dialog-input-label').eq(9),
+    alignmentDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(2),
+    captionLabel: () => cy.get('.dialog-input-label').eq(10),
+    captionInputField: () => cy.get('.cke_dialog_ui_input_text').eq(15),
+    summaryLabel: () => cy.get('.dialog-input-label').eq(11),
+    summaryInputField: () => cy.get('.cke_dialog_ui_input_text').eq(17),
+    captionOfTheTable: () => cy.get('[class*="InstructionComponentstyles__DivBody"] .custom_author_table caption'),
+    alignmentOptions: (alignment = null) => {
+        if (alignment) {
+            return cy.get(`[class*="cke_dialog_ui_input_select"] option[value="${alignment}"]`)
+        } else {
+            return cy.get('[class*="cke_dialog_ui_input_select"] option[value]').eq(3)
+        }
+    },
+}
+
+const steps = {
+
+    incrementRowCount: () => {
+        ckEditorInsertTableComponent.rowIncrement()
+            .click();
+    },
+
+    decrementRowCount: () => {
+        ckEditorInsertTableComponent.rowDecrement()
+            .click();
+    },
+
+    /**
+     * @param {string} value value of row
+     * @description this function is used to type value in row input field
+     */
+    typeRowValue: (value) => {
+        ckEditorInsertTableComponent.rowInputField()
+            .click()
+            .clear()
+            .type(value);
+    },
+
+    emptyRowAndCheckErrorMessage: () => {
+        ckEditorInsertTableComponent.rowInputField()
+            .click()
+            .clear();
+        utilities.verifyInnerText(ckEditorInsertTableComponent.rowErrorMessage(), 'Value must be greater than zero.');
+        utilities.verifyElementVisibilityState(ckEditorInsertTableComponent.rowErrorMessage(), 'visible');
+    },
+
+    incrementColumnCount: () => {
+        ckEditorInsertTableComponent.columnIncrement()
+            .click();
+    },
+
+    decrementColumnCount: () => {
+        ckEditorInsertTableComponent.columnDecrement()
+            .click();
+    },
+
+    /**
+     * @param {string} value value of column
+     * @description this function is used to type value in column input field
+     */
+    typeColumnValue: (value) => {
+        ckEditorInsertTableComponent.columnInputField()
+            .click()
+            .clear()
+            .type(value);
+    },
+
+    emptyColumnAndCheckErrorMessage: () => {
+        ckEditorInsertTableComponent.columnInputField()
+            .click()
+            .clear();
+        utilities.verifyInnerText(ckEditorInsertTableComponent.columnErrorMessage(), 'Value must be greater than zero.');
+        utilities.verifyElementVisibilityState(ckEditorInsertTableComponent.columnErrorMessage(), 'visible');
+    },
+
+    incrementRowHeaderCount: () => {
+        ckEditorInsertTableComponent.rowHeaderIncrementButton()
+            .click();
+    },
+
+    /**
+     * @param {string} value value of row header
+     * @description this function is used to type value in row header input field
+     */
+    typeRowHeaderValue: (value) => {
+        ckEditorInsertTableComponent.rowHeaderInput()
+            .click()
+            .clear()
+            .type(value);
+    },
+
+    decrementRowHeaderCount: () => {
+        ckEditorInsertTableComponent.rowHeaderDecrementButton()
+            .click();
+    },
+
+    incrementColumnHeaderCount: () => {
+        ckEditorInsertTableComponent.columnHeaderIncrementButton()
+            .click();
+    },
+
+    /**
+     * @param {string} value value of column header
+     * @description this function is used to type value in column header input field
+     */
+    typeColumnHeaderValue: (value) => {
+        ckEditorInsertTableComponent.columnHeaderInput()
+            .click()
+            .clear()
+            .type(value);
+    },
+
+    clickOnAutoAdjustRadioButton: () => {
+        ckEditorInsertTableComponent.autoAdjustRadioButton()
+            .click();
+    },
+
+    verifyFullWidthRadioButtonChecked: () => {
+        ckEditorInsertTableComponent.fullWidthRadioButton()
+            .should('be.checked');
+    },
+
+    verifyFullWidthRadioButtonUnchecked: () => {
+        ckEditorInsertTableComponent.fullWidthRadioButton()
+            .should('not.be.checked');
+    },
+
+    verifyAutoAdjustRadioButtonChecked: () => {
+        ckEditorInsertTableComponent.autoAdjustRadioButton()
+            .should('be.checked');
+    },
+
+    verifyAutoAdjustRadioButtonUnchecked: () => {
+        ckEditorInsertTableComponent.autoAdjustRadioButton()
+            .should('not.be.checked');
+    },
+
+    /**
+     * @param {string} value value of width in px
+     * @description this function is used to type value in widthPx input field
+     */
+    enterWidthPx: (value) => {
+        ckEditorInsertTableComponent.widthPxInput()
+            .click()
+            .clear()
+            .type(value);
+    },
+
+    /**
+     * @param {string} value value of height in px
+     * @description this function is used to type value in heightPx input field
+     */
+    enterHeightPx: (value) => {
+        ckEditorInsertTableComponent.heightPxInput()
+            .click()
+            .clear()
+            .type(value);
+    },
+
+    /**
+     * @param {string} width width value in px
+     * @description this function is used to verify width of the table
+     */
+    verifyWidthOfTheTable: (width) => {
+        utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+            'width': `${width}px`,
+        });
+    },
+
+    /**
+     * @param {string} height height value in px
+     * @description this function is used to verify height of the table
+     */
+    verifyHeightOfTheTable: (height) => {
+        utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+            'height': `${height}px`,
+        });
+    },
+
+    decrementColumnHeaderCount: () => {
+        ckEditorInsertTableComponent.columnHeaderDecrementButton()
+            .click();
+    },
+
+    clickOnFirstRowHeaderCheckBox: () => {
+        ckEditorInsertTableComponent.firstRowHeaderCheckBox()
+            .click();
+    },
+
+    selectTableButtonOptionFromCKEditorToolbar: () => {
+        ckEditorInsertTableComponent.buttonTableIcon()
+            .eq(0)
+            .click();
+    },
+
+    selectCancelButtonFromCKEditorToolbar: () => {
+        ckEditorInsertTableComponent.buttonCancel()
+            .click();
+    },
+
+    selectOkButtonFromCKEditorToolbar: () => {
+        ckEditorInsertTableComponent.buttonOk()
+            .click();
+    },
+
+    /**
+     * @param {number} expectedRowCount The expected number of rows in the table.
+     * @param {number} expectedColumnCount The expected number of columns in the first row of the table.
+     * @description This function is used to verify the number of rows and columns present in the table.
+     */
+    checkNumberOfRowsAndColumnsPresentInTable: (expectedRowCount, expectedColumnCount) => {
+        ckEditorInsertTableComponent.tableInQuestionInstructionSection()
+            .should('exist')
+            .within(() => {
+                cy.get('tbody tr').should('have.length', expectedRowCount);
+                cy.get('tbody tr').first().find('td').should('have.length', expectedColumnCount);
+            });
+    },
+
+    /**
+     * @param {number} containerNumber The index of the container whose header needs to be checked.
+     * @description This function verifies the background color of the header for the specified container number.
+     */
+    checkHeaderForContainerNumber: (containerNumber) => {
+        utilities.verifyCSS(ckEditorInsertTableComponent.headerContainerOfTable().eq(containerNumber), {
+            'background-color': 'rgb(29, 29, 156)',
+        });
+    },
+
+    /**
+     * @param {number} size The expected border size (in pixels) of the table.
+     * @description This function verifies the top border width of the table.
+     */
+    checkBorderSizeOfTable: (size) => {
+        utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+            'border-top-width': `${size}px`,
+        });
+
+    },
+
+    /**
+     * @param { string } value The value to be input as the border size for the table.
+     * @description This function inputs the specified border size value into the border size input field of the table and verifies that the value has been set correctly.
+     */
+    inputBorderSizeForTable: (value) => {
+        ckEditorInsertTableComponent.borderSizeInputField()
+            .clear()
+            .type(value)
+            .should('have.value', value)
+    },
+
+    expandHoverStateDropdown: () => {
+        ckEditorInsertTableComponent.addHoverStateDropDown()
+            .click();
+    },
+
+    scrollingDownInInsertTablePopUp: () => {
+        ckEditorInsertTableComponent.borderSizeLabel()
+            .scrollIntoView()
+    },
+
+    scrollingDownToAlignmentLabel: () => {
+        ckEditorInsertTableComponent.alignmentLabel()
+            .scrollIntoView()
+    },
+
+    /**
+     * @param {string} value The caption text to be entered for the table.
+     * @description This function enters the specified caption into the caption input field of the table.
+     */
+    enterCaption: (value) => {
+        ckEditorInsertTableComponent.captionInputField()
+            .click()
+            .clear()
+            .type(value);
+    },
+
+    /**
+     * @param {string} value The summary text to be entered for the table.
+     * @description This function enters the specified summary into the summary input field of the table.
+     */
+    enterSummary: (value) => {
+        ckEditorInsertTableComponent.summaryInputField()
+            .click()
+            .clear()
+            .type(value);
+    },
+
+    /**
+     * @param {string} value The expected summary value of the table.
+     * @description This function verifies that the table has the specified summary attribute value.
+     */
+    verifySummaryOfTheTable: (value) => {
+        ckEditorInsertTableComponent.tableInQuestionInstructionSection()
+            .should('have.attr', 'summary', value);
+    },
+
+    expandAlignmentDropDown: () => {
+        ckEditorInsertTableComponent.alignmentDropDown()
+            .click();
+    },
+
+    /**
+     * @param {string} alignment The alignment option to be selected (e.g., 'left', 'center', 'right').
+     * @description This function selects the specified alignment option from the alignment dropdown.
+     */
+    selectAlignmentOptionDropdown: (alignment) => {
+        ckEditorInsertTableComponent.alignmentOptions(alignment)
+            .click();
+    },
+
+    /**
+     * @param {string} value The expected alignment value of the table (e.g., 'left', 'center', 'right').
+     * @description This function verifies that the table has the specified alignment attribute value.
+     */
+    verifyAlignmentOnTable: (value) => {
+        ckEditorInsertTableComponent.tableInQuestionInstructionSection()
+            .should('have.attr', 'align', value);
+    },
+
+    /**
+     * @param {string} effectOn The hover effect option to be selected ('Row' or 'Cell').
+     * @description This function selects the specified hover effect style (row or cell) from the hover state dropdown.
+     * @throws Will throw an error if an unsupported hover effect option is provided.
+     */
+    selectHoverEffectStyle: (effectOn) => {
+        switch (effectOn) {
+            case 'Row':
+                ckEditorInsertTableComponent.steps.expandHoverStateDropdown();
+                ckEditorInsertTableComponent.hoverOptionsSelect("row")
+                    .click();
+                break;
+            case 'Cell':
+                ckEditorInsertTableComponent.steps.expandHoverStateDropdown();
+                ckEditorInsertTableComponent.hoverOptionsSelect("cell")
+                    .click();
+                break;
+            default:
+                throw new Error(`Unknown Border Strip: ${effectOn}`);
+        }
+    },
+
+    /**
+     * @param {string} effectOn The hover effect style to verify ('Row' or 'Cell').
+     * @description This function verifies the hover effect style applied to the table based on the specified option.
+     * @throws Will throw an error if an unsupported hover effect option is provided.
+     */
+    verifyHoverEffectStyleOnTable: (effectOn) => {
+        switch (effectOn) {
+            case 'Row':
+                ckEditorInsertTableComponent.firstRowOfTable()
+                    .realHover();
+                utilities.verifyCSS(ckEditorInsertTableComponent.firstRowOfTable(), {
+                    'box-shadow': '0 2px 8px rgba(82,0,255,.32)',
+                    'border': '1px solid #bac9ff'
+                });
+                break;
+            case 'Cell':
+                ckEditorInsertTableComponent.firstContainerOfTable()
+                    .realHover();
+                utilities.verifyCSS(ckEditorInsertTableComponent.firstContainerOfTable(), {
+                    'background-color': 'fbf5ff',
+                    'color': '#7e00cc'
+                });
+                break;
+            default:
+                throw new Error(`Unknown Border Strip: ${effectOn}`);
+        }
+    },
+
+    /**
+     * @param {string} borderStrip The table strip style to be selected ('Clear', 'Horizontal', or 'Vertical').
+     * @description This function selects the specified table strip style from the available options.
+     * @throws Will throw an error if an unsupported border strip option is provided.
+     */
+    selectTableStripStyle: (borderStrip) => {
+        switch (borderStrip) {
+            case 'Clear':
+                ckEditorInsertTableComponent.clearStripes()
+                    .click();
+                break;
+            case 'Horizontal':
+                ckEditorInsertTableComponent.horizontalStripes()
+                    .click();
+                break;
+            case 'Vertical':
+                ckEditorInsertTableComponent.verticalStripes()
+                    .click();
+                break;
+            default:
+                throw new Error(`Unknown Border Strip: ${borderStrip}`);
+        }
+    },
+
+    /**
+     * @param {string} borderStrip The border strip style to verify ('Clear', 'Horizontal', or 'Vertical').
+     * @description This function checks the background color of the table containers based on the specified border strip style.
+     * @throws Will throw an error if an unsupported border strip option is provided.
+     */
+    checkBorderStripOfTable: (borderStrip) => {
+        switch (borderStrip) {
+            case 'Clear':
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(0), {
+                    'background-color': 'rgba(0, 0, 0, 0)',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(1), {
+                    'background-color': 'rgba(0, 0, 0, 0)',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(2), {
+                    'background-color': 'rgba(0, 0, 0, 0)',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(3), {
+                    'background-color': 'rgba(0, 0, 0, 0)',
+                });
+                break;
+            case 'Horizontal':
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(0), {
+                    'background-color': 'rgb(245, 248, 255)',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(1), {
+                    'background-color': 'rgb(245, 248, 255)',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(2), {
+                    'background-color': 'rgba(0, 0, 0, 0)',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(3), {
+                    'background-color': 'rgba(0, 0, 0, 0)',
+                });
+                break;
+            case 'Vertical':
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(0), {
+                    'background-color': 'rgb(245, 248, 255)',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(1), {
+                    'background-color': 'rgba(0, 0, 0, 0)',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(2), {
+                    'background-color': 'rgb(245, 248, 255)',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.containerOfTable().eq(3), {
+                    'background-color': 'rgba(0, 0, 0, 0)',
+                });
+                break;
+            default:
+                throw new Error(`Unknown Border Strip: ${borderStrip}`);
+        }
+    },
+
+    /**
+     * @param {string} borderType The type of border button to check for visibility ('All borders', 'Inner borders', 'Outer and horizontal borders', 'Horizontal borders', 'Outer and vertical borders', 'Vertical borders', 'Outer borders', or 'Clear borders').
+     * @description This function checks if the specified border button is visible in the table component.
+     * @throws Will throw an error if an unsupported border type is provided.
+     */
+    checkBorderButtonVisible: (borderType) => {
+        switch (borderType) {
+            case 'All borders':
+                utilities.verifyElementVisibilityState(ckEditorInsertTableComponent.allBorders(), 'visible');
+                break;
+            case 'Inner borders':
+                utilities.verifyElementVisibilityState(ckEditorInsertTableComponent.innerBorders(), 'visible');
+                break;
+            case 'Outer and horizontal borders':
+                utilities.verifyElementVisibilityState(ckEditorInsertTableComponent.outerAndHorizontalBorders(), 'visible');
+                break;
+            case 'Horizontal borders':
+                utilities.verifyElementVisibilityState(ckEditorInsertTableComponent.horizontalBorders(), 'visible');
+                break;
+            case 'Outer and vertical borders':
+                utilities.verifyElementVisibilityState(ckEditorInsertTableComponent.outerAndVerticalBorders(), 'visible');
+                break;
+            case 'Vertical borders':
+                utilities.verifyElementVisibilityState(ckEditorInsertTableComponent.verticalBorders(), 'visible');
+                break;
+            case 'Outer borders':
+                utilities.verifyElementVisibilityState(ckEditorInsertTableComponent.outerBorders(), 'visible');
+                break;
+            case 'Clear borders':
+                utilities.verifyElementVisibilityState(ckEditorInsertTableComponent.clearBorders(), 'visible');
+                break;
+            default:
+                throw new Error(`Unknown Border Type: ${borderType}`);
+        }
+    },
+
+    /**
+     * @param {string} borderType The border type to check for visibility ('All borders', 'Inner borders', 'Outer and horizontal borders', 'Horizontal borders', 'Outer and vertical borders', 'Vertical borders', 'Outer borders', or 'Clear borders').
+     * @description This function verifies the CSS styles of the borders in the question instruction section and the first container of the table based on the specified border type.
+     * @throws Will throw an error if an unsupported border type is provided.
+     */
+    checkBorderVisibleInQuestionInstruction: (borderType) => {
+        switch (borderType) {
+            case 'All borders':
+                utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+                    'border-bottom-style': 'solid',
+                    'border-left-style': 'solid',
+                    'border-right-style': 'solid',
+                    'border-top-style': 'solid',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.firstContainerOfTable(), {
+                    'border-bottom-style': 'solid',
+                    'border-left-style': 'solid',
+                    'border-right-style': 'solid',
+                    'border-top-style': 'solid',
+                });
+                break;
+            case 'Inner borders':
+                utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+                    'border-bottom-style': 'hidden',
+                    'border-left-style': 'hidden',
+                    'border-right-style': 'hidden',
+                    'border-top-style': 'hidden',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.firstContainerOfTable(), {
+                    'border-bottom-style': 'solid',
+                    'border-left-style': 'hidden',
+                    'border-right-style': 'solid',
+                    'border-top-style': 'hidden',
+                });
+                break;
+            case 'Outer and horizontal borders':
+                utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+                    'border-bottom-style': 'solid',
+                    'border-left-style': 'solid',
+                    'border-right-style': 'solid',
+                    'border-top-style': 'solid',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.firstContainerOfTable(), {
+                    'border-bottom-style': 'solid',
+                    'border-left-style': 'solid',
+                    'border-right-style': 'hidden',
+                    'border-top-style': 'solid',
+                });
+                break;
+            case 'Horizontal borders':
+                utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+                    'border-bottom-style': 'hidden',
+                    'border-left-style': 'hidden',
+                    'border-right-style': 'hidden',
+                    'border-top-style': 'hidden',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.firstContainerOfTable(), {
+                    'border-bottom-style': 'solid',
+                    'border-left-style': 'hidden',
+                    'border-right-style': 'hidden',
+                    'border-top-style': 'hidden',
+                });
+                break;
+            case 'Outer and vertical borders':
+                utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+                    'border-bottom-style': 'solid',
+                    'border-left-style': 'solid',
+                    'border-right-style': 'solid',
+                    'border-top-style': 'solid',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.firstContainerOfTable(), {
+                    'border-bottom-style': 'hidden',
+                    'border-left-style': 'solid',
+                    'border-right-style': 'solid',
+                    'border-top-style': 'solid',
+                });
+                break;
+            case 'Vertical borders':
+                utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+                    'border-bottom-style': 'hidden',
+                    'border-left-style': 'hidden',
+                    'border-right-style': 'hidden',
+                    'border-top-style': 'hidden',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.firstContainerOfTable(), {
+                    'border-bottom-style': 'hidden',
+                    'border-left-style': 'hidden',
+                    'border-right-style': 'solid',
+                    'border-top-style': 'hidden',
+                });
+                break;
+            case 'Outer borders':
+                utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+                    'border-bottom-style': 'solid',
+                    'border-left-style': 'solid',
+                    'border-right-style': 'solid',
+                    'border-top-style': 'solid',
+                });
+                utilities.verifyCSS(ckEditorInsertTableComponent.firstContainerOfTable(), {
+                    'border-bottom-style': 'hidden',
+                    'border-left-style': 'solid',
+                    'border-right-style': 'hidden',
+                    'border-top-style': 'solid',
+                });
+                break;
+            case 'Clear borders':
+                utilities.verifyCSS(ckEditorInsertTableComponent.tableInQuestionInstructionSection(), {
+                    'border-color': 'rgba(0, 0, 0, 0)',
+                });
+                break;
+            default:
+                throw new Error(`Unknown Border Type: ${borderType}`);
+        }
+    },
+
+    /**
+     * @param {string} borderType The border type to select ('All borders', 'Inner borders', 'Outer and horizontal borders', 'Horizontal borders', 'Outer and vertical borders', 'Vertical borders', 'Outer borders', or 'Clear borders').
+     * @description This function selects the specified border style for the table component based on the provided border type.
+     * @throws Will throw an error if an unsupported border type is provided.
+     */
+    selectTableBorderStyle: (borderType) => {
+        switch (borderType) {
+            case 'All borders':
+                ckEditorInsertTableComponent.allBorders()
+                    .click();
+                break;
+            case 'Inner borders':
+                ckEditorInsertTableComponent.innerBorders()
+                    .click();
+                break;
+            case 'Outer and horizontal borders':
+                ckEditorInsertTableComponent.outerAndHorizontalBorders()
+                    .click();
+                break;
+            case 'Horizontal borders':
+                ckEditorInsertTableComponent.horizontalBorders()
+                    .click();
+                break;
+            case 'Outer and vertical borders':
+                ckEditorInsertTableComponent.outerAndVerticalBorders()
+                    .click();
+                break;
+            case 'Vertical borders':
+                ckEditorInsertTableComponent.verticalBorders()
+                    .click();
+                break;
+            case 'Outer borders':
+                ckEditorInsertTableComponent.outerBorders()
+                    .click();
+                break;
+            case 'Clear borders':
+                ckEditorInsertTableComponent.clearBorders()
+                    .click();
+                break;
+            default:
+                throw new Error(`Unknown Border Type: ${borderType}`);
+        }
+    },
+}
+
+export const ckEditorInsertTableComponent = {
+    ...selectors,
+    steps
+}