itemengine-cypress-automation 1.0.199 → 1.0.200

package/cypress/e2e/ILC/ImageHighlight/additionalSettings.js

@@ -0,0 +1,201 @@
+import { imageHighlightPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const flowerHighlightRegion = [[40, 6], [40, 20], [55, 20], [55, 6]];
+const branchesHighlightRegion = [[50, 30], [50, 42], [65, 42], [65, 30]];
+const leafHighlightRegion = [[26, 26], [26, 36], [48, 36], [48, 26]];
+const rootsHighlightRegion = [[45, 45], [45, 55], [57, 55], [57, 45]];
+
+const enumerationOptions = {
+    'Numerical': ['1', '2', '3'],
+    'Alphabet (uppercase)': ['A', 'B', 'C'],
+    'Alphabet (lowercase)': ['a', 'b', 'c'],
+    'Roman numeral (uppercase)': ['I', 'II', 'III'],
+    'Roman numeral (lowercase)': ['i', 'ii', 'iii'],
+};
+
+describe('Create Item page - Image highlight : Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings: Grading view - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.expandAdditionalSettings();
+        });
+
+        imageHighlightPage.tests.verifyGradingViewEnumerationSectionContents('Option');
+
+        it('When the user selects "Without enumeration" radio button, the identifiers section should disappear', () => {
+            imageHighlightPage.steps.selectEnumerationType('without enumeration');
+            utilities.verifyElementVisibilityState(imageHighlightPage.identifiersLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(imageHighlightPage.numericalToggleButton(), 'notExist');
+        });
+
+        it('When the user selects "With enumeration" radio button again, the identifiers section should appear again', () => {
+            imageHighlightPage.steps.selectEnumerationType('with enumeration');
+            utilities.verifyElementVisibilityState(imageHighlightPage.identifiersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.numericalToggleButton(), 'visible');
+        })
+    });
+
+    describe('Additional settings: Grading view - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(2);
+            imageHighlightPage.steps.allotPoints(10);
+            imageHighlightPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            imageHighlightPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(enumerationOptions).forEach(option => {
+            it(`When "${option}" toggle button is selected in the option identifiers section, then on switching to the preview tab highlight numeration should not be displayed`, () => {
+                imageHighlightPage.steps.selectIdentifierToggleButton(option);
+                imageHighlightPage.steps.switchToPreviewTab();
+                imageHighlightPage.steps.verifyHighlightNumerationNotExist();
+            });
+
+            it('When user clicks on \'Check answer\' button then the numeration should not be displayed in the highlight regions', () => {
+                imageHighlightPage.steps.checkAnswer();
+                imageHighlightPage.steps.verifyHighlightNumerationNotExist();
+            });
+
+            it(`When the user switches to the "Grading view", then the "${option}" numeration should be displayed in the highlight regions as well as correct answer options in the correct answer section`, () => {
+                imageHighlightPage.steps.switchToGradingView();
+                imageHighlightPage.steps.verifyHighlightEnumeration(enumerationOptions[option]);
+                imageHighlightPage.steps.verifyCorrectAnswerContainerNumeration(enumerationOptions[option]);
+                cy.log('Post step: Switch to Edit tab')
+                imageHighlightPage.steps.switchToEditTab();
+            });
+        });
+
+        it('When the user selects "without enumeration" radio button, then in the "Grading view", numeration should not be displayed for highlight region and in the correct answer section, the entire question preview should be displayed with correct answers', () => {
+            imageHighlightPage.steps.selectEnumerationType('without enumeration');
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.switchToGradingView();
+            utilities.verifyElementVisibilityState(utilities.getNthElement(imageHighlightPage.imagePreviewTab(), 1), 'visible');
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyHighlightNumerationNotExist();
+            utilities.verifyElementVisibilityState(imageHighlightPage.correctAnswerNumeration(), 'notExist');
+        });
+
+        it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.previewTabQuestionWrapper());
+        });
+    });
+
+    describe('Additional settings: ARIA label for options - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.expandAdditionalSettings();
+        });
+
+        it(`"ARIA label for options" label should be displayed`, () => {
+            utilities.verifyInnerText(imageHighlightPage.ariaLabelSectionLabel(), `ARIA label for options`);
+            utilities.verifyElementVisibilityState(imageHighlightPage.ariaLabelSectionLabel(), 'visible');
+        });
+
+        it('Two input fields with numeration and "Enter aria label" placeholder should be displayed by default', () => {
+            utilities.verifyElementCount(imageHighlightPage.ariaLabelInputField(), 2);
+            imageHighlightPage.steps.verifyAriaLabelTextInputFields(0);
+            imageHighlightPage.steps.verifyAriaLabelTextInputFields(1);
+        });
+
+        it(`CSS of "ARIA label for options" section`, { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.ariaLabelSectionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.ariaLabelInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('When the users adds a new highlight region, the count of the aria label text input fields should update accordingly', () => {
+            imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+            utilities.verifyElementCount(imageHighlightPage.ariaLabelInputField(), 3);
+            imageHighlightPage.steps.verifyAriaLabelTextInputFields(2);
+        });
+
+        it('When the user deletes any highlight region, the count of the aria label texts input fields should update accordingly', () => {
+            imageHighlightPage.steps.eraseAHighlightRegion(branchesHighlightRegion);
+            utilities.verifyElementCount(imageHighlightPage.ariaLabelInputField(), 2);
+            imageHighlightPage.steps.verifyAriaLabelTextInputFields(0);
+            imageHighlightPage.steps.verifyAriaLabelTextInputFields(1);
+        });
+
+        it('When the user sets aria label, then in the highlight region of the specify correct answer section, the aria labels should get updated accordingly', () => {
+            imageHighlightPage.steps.enterTextInAriaLabelInputField(0, 'Select correct option');
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelSpecifyCorrectAnswer(0, 'Select correct option');
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelSpecifyCorrectAnswer(1, 'Response 2');
+        });
+    });
+
+    describe('Additional settings: ARIA label for options - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.expandAdditionalSettings();
+            imageHighlightPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set \'ARIA label\' input field, then default aria labels should be present for the highlight region in the preview tab', () => {
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(0, 'Response 1');
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(1, 'Response 2');
+        });
+
+        it('When the user has set \'ARIA label\', then it should be present for the highlight region in the preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.enterTextInAriaLabelInputField(0, 'Correct response 1');
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(0, 'Correct response 1');
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(1, 'Response 2');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.highlightPreviewTab());
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default aria labels should be present for the highlight region in the preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.clearTextInAriaLabelInputField(0);
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(0, 'Response 1');
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(1, 'Response 2');
+        });
+    });
+});

package/cypress/e2e/ILC/ImageHighlight/additionalSettingsBasic.js

@@ -0,0 +1,133 @@
+import { imageHighlightPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const flowerHighlightRegion = [[40, 6], [40, 20], [55, 20], [55, 6]];
+const leafHighlightRegion = [[26, 26], [26, 36], [48, 36], [48, 26]];
+
+const fontSizes = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
+
+describe('Create Item page - Image highlight : Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        imageHighlightPage.tests.verifyAdditionalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size contents', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.expandAdditionalSettings();
+        });
+
+        imageHighlightPage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size - Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.allotPoints(10);
+            imageHighlightPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(fontSizes).forEach((option) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the specify correct answer section should not change accordingly`, () => {
+                imageHighlightPage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(imageHighlightPage.fontSizeDropdown(), `${option}`);
+                utilities.verifyCSS(utilities.getNthElement(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon(), 0), {
+                    'font-size': '14px'
+                });
+                utilities.verifyCSS(utilities.getNthElement(imageHighlightPage.highlightNumerationSpecifyCorrectAnswer(), 0), {
+                    'font-size':  '12.0313px'
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.allotPoints(10);
+            imageHighlightPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(fontSizes).forEach((option) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${fontSizes[option]} accordingly`, () => {
+                imageHighlightPage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(imageHighlightPage.fontSizeDropdown(), `${option}`);
+                imageHighlightPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(imageHighlightPage.imagePreviewTab(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(imageHighlightPage.questionInstructionsText(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(imageHighlightPage.highlightPreviewTab(), {
+                    'font-size': fontSizes[option]
+                });
+                imageHighlightPage.steps.switchToGradingView();
+                utilities.verifyCSS(imageHighlightPage.correctAnswersLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(imageHighlightPage.correctIncorrectAnswerTextWrapper(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(imageHighlightPage.correctAnswerContainerAnswerWrapper(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(imageHighlightPage.correctAnswerNumeration(), {
+                    'font-size': fontSizes[option]
+                });
+                imageHighlightPage.steps.switchToStudentView();
+                imageHighlightPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Accessibility section', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.expandAdditionalSettings();
+        });
+
+        imageHighlightPage.tests.verifyAdditionalSettingsAccessibilitySection();
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.expandAdditionalSettings();
+        });
+
+        imageHighlightPage.tests.verifyDetailsSection();
+    });
+});