itemengine-cypress-automation 1.0.86 → 1.0.88
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cypress/e2e/ILC/DrawingResponse/drawingResponseCustomizeAdditionalOptions.js +30 -30
- package/cypress/e2e/ILC/DrawingResponse/drawingResponseGradingViewAndCorrectAnswerViewContents.smoke.js +1 -1
- package/cypress/e2e/ILC/EssayResponse/createCustomCategory.smoke.js +568 -0
- package/cypress/e2e/ILC/EssayResponse/editAndPreviewTabScoringSection.js +86 -0
- package/cypress/e2e/ILC/EssayResponse/editTabBasicSections.js +389 -0
- package/cypress/e2e/ILC/EssayResponse/gradingViewAndCorrectAnswerViewContents.smoke.js +112 -0
- package/cypress/e2e/ILC/EssayResponse/headerSection.js +68 -0
- package/cypress/e2e/ILC/EssayResponse/previewAddTable.js +290 -0
- package/cypress/e2e/ILC/EssayResponse/previewContentsForAllViews.smoke.js +79 -0
- package/cypress/e2e/ILC/EssayResponse/previewEditTable.js +379 -0
- package/cypress/e2e/ILC/EssayResponseBasic/essayResponseBasicCustomizeFormattingOptions.js +207 -0
- package/cypress/e2e/ILC/EssayResponseBasic/gradingViewAndCorrectAnswerViewContents.smoke.js +115 -0
- package/cypress/e2e/ILC/EssayResponseBasic/previewContentsForAllViews.smoke.js +79 -0
- package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/FillInTheGapsOverImageDragAndDropScoring/partialDifferentWeightsBasic.js +159 -0
- package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/backgroundImageAndCanvasProperties.js +507 -29
- package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/previewContentsForAllViews.smoke.js +6 -0
- package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/responseAnswersAndAcceptedStudentInput.js +272 -0
- package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/specialCharactersSection.js +300 -0
- package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/specifyCorrectAnswerSection.js +3 -3
- package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/studentViewSettings.js +204 -0
- package/cypress/e2e/ILC/Protractor/protractorEditTabBasicsSection.js +4 -4
- package/cypress/e2e/ILC/Protractor/protractorEditTabFunctionality.js +1 -1
- package/cypress/e2e/ILC/Ruler/rulerEditTabBasicsSection.js +4 -4
- package/cypress/e2e/ILC/Ruler/rulerEditTabFunctionality.js +1 -1
- package/cypress/e2e/ILC/SingleSelection/editTabScoringSection.js +1 -3
- package/cypress/e2e/ILC/TextEntryMath/editTabBasicSection.js +205 -0
- package/cypress/e2e/ILC/TextEntryMath/editTabScoringSection.js +259 -0
- package/cypress/e2e/ILC/TextEntryMath/minimumScoringPenaltyPointsAndRoundingDropdown.js +202 -0
- package/cypress/e2e/ILC/TextEntryMath/responseEvaluationMethodsAndCustomSettings.js +613 -0
- package/cypress/e2e/ILC/TextEntryMath/specifyCorrectAnswerSection.js +71 -0
- package/cypress/fixtures/equationEditorCategoriesAndSymbols .js +318 -318
- package/cypress/fixtures/theme/ilc.json +3 -0
- package/cypress/pages/components/backgroundImageUploadComponent.js +1 -2
- package/cypress/pages/components/colorPopupComponent.js +26 -3
- package/cypress/pages/components/createCustomCategoryFlyout.js +351 -46
- package/cypress/pages/components/customizeSpecialCharacterComponent.js +165 -0
- package/cypress/pages/components/equationEditorFlyout.js +124 -0
- package/cypress/pages/components/essayResponseCommonComponents.js +3 -0
- package/cypress/pages/components/figOverImageCanvasComponent.js +316 -7
- package/cypress/pages/components/index.js +3 -1
- package/cypress/pages/components/opacityComponent.js +31 -4
- package/cypress/pages/components/specialAndCustomSpecialCharactersComponent.js +1 -0
- package/cypress/pages/components/specialCharactersFlyoutComponent.js +1 -0
- package/cypress/pages/drawingResponsePage.js +33 -138
- package/cypress/pages/essayResponsePage.js +612 -26
- package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js +48 -7
- package/cypress/pages/fillInTheGapsOverImageTextPage.js +267 -13
- package/package.json +1 -1
@@ -0,0 +1,165 @@
|
|
1
|
+
import utilities from "../../support/helpers/utilities";
|
2
|
+
|
3
|
+
const selectors = {
|
4
|
+
groupByLanguageRadioButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-btn input').eq(0),
|
5
|
+
groupByLanguageLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-label').eq(0),
|
6
|
+
showOnlyCustomSpecialCharactersRadioButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-btn input').eq(1),
|
7
|
+
showOnlyCustomSpecialCharactersLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-label').eq(1),
|
8
|
+
selectSpecialCharacterLanguagesLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
|
9
|
+
customizeSpecialCharactersPreviewButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__PreviewLabel"]'),
|
10
|
+
specialCharactersCategoryTileTickIcon: () => cy.get('.tick-icon-wrapper'),
|
11
|
+
TickIcon: () => cy.get('.tick-icon-wrapper'),
|
12
|
+
specialCharactersCategoryTilesWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__DragAndDropWrapper"]'),
|
13
|
+
specialCharacterTiles: (specialCharacterCategory = null) => {
|
14
|
+
if (specialCharacterCategory) {
|
15
|
+
return cy.get(`[id*="DraggableItem"] button[aria-label="${specialCharacterCategory}"]`)
|
16
|
+
} else {
|
17
|
+
return cy.get('[id*="DraggableItem"] button')
|
18
|
+
}
|
19
|
+
},
|
20
|
+
specialCharacterTileIcon: () => cy.get('.equation-editor-icon'),
|
21
|
+
specialCharacterTileCategoryName: () => cy.get('.equation-editor-label-wrapper'),
|
22
|
+
specialCharacterTileSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
|
23
|
+
//Special characters preview popup
|
24
|
+
specialCharactersPreviewPopupCharactersCategoryWrapper: () => cy.get('[class*="special"][class*="accordion"]'),
|
25
|
+
specialCharactersPreviewPopupCategoryAccordionExpandIcon: () => cy.get('[class*="expandIconWrapper"]'),
|
26
|
+
specialCharactersPreviewPopupCategoryLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__AccordionLabel"]'),
|
27
|
+
specialCharactersPreviewPopupSymbol: () => cy.get('[class*="CustomizedSpecialCharacterstyles__CharacterWrapper"]'),
|
28
|
+
|
29
|
+
//Show only custom special characters section
|
30
|
+
customSpecialCharactersLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
|
31
|
+
customSpecialCharactersInputField: () => cy.get('input[aria-label="Custom special characters"]'),
|
32
|
+
}
|
33
|
+
|
34
|
+
const steps = {
|
35
|
+
verifyGroupedByLanguageRadioButtonIsSelected: () => {
|
36
|
+
customizeSpecialCharacterComponent.groupByLanguageRadioButton()
|
37
|
+
.should('be.checked');
|
38
|
+
},
|
39
|
+
|
40
|
+
selectGroupByLanguageRadioButton: () => {
|
41
|
+
customizeSpecialCharacterComponent.groupByLanguageRadioButton()
|
42
|
+
.click()
|
43
|
+
.should('be.checked');
|
44
|
+
},
|
45
|
+
|
46
|
+
selectShowOnlyCustomSpecialCharactersRadioButton: () => {
|
47
|
+
customizeSpecialCharacterComponent.showOnlyCustomSpecialCharactersRadioButton()
|
48
|
+
.click()
|
49
|
+
.should('be.checked');
|
50
|
+
},
|
51
|
+
|
52
|
+
clickOnCustomizeSpecialCharactersPreviewButton: () => {
|
53
|
+
customizeSpecialCharacterComponent.customizeSpecialCharactersPreviewButton()
|
54
|
+
.click();
|
55
|
+
},
|
56
|
+
|
57
|
+
/**
|
58
|
+
* @description Click on category accordion expand icon in special characters popup
|
59
|
+
* @param {number} index Index of category in popup
|
60
|
+
*/
|
61
|
+
clickOnSpecialCharactersPreviewPopupCategoryAccordionExpandIcon: (index) => {
|
62
|
+
customizeSpecialCharacterComponent.specialCharactersPreviewPopupCategoryAccordionExpandIcon()
|
63
|
+
.eq(index)
|
64
|
+
.click();
|
65
|
+
},
|
66
|
+
|
67
|
+
/**
|
68
|
+
* @description Verify the special characters preview popup in edit tab
|
69
|
+
* @param {object[]} categoryAndSymbolsArray Array of list of categories and their symbols
|
70
|
+
*/
|
71
|
+
verifySpecialCharactersPreviewPopupInEditTab: (categoryAndSymbolsArray) => {
|
72
|
+
categoryAndSymbolsArray.forEach((category, index) => {
|
73
|
+
utilities.verifyInnerText(customizeSpecialCharacterComponent.specialCharactersPreviewPopupCategoryLabel().eq(index), `${category.categoryName}`);
|
74
|
+
customizeSpecialCharacterComponent.specialCharactersPreviewPopupCharactersCategoryWrapper()
|
75
|
+
.eq(index)
|
76
|
+
.within(() => {
|
77
|
+
customizeSpecialCharacterComponent.specialCharactersPreviewPopupCategoryLabel()
|
78
|
+
.click();
|
79
|
+
category.symbols.forEach((symbolARIALabel, index) => {
|
80
|
+
customizeSpecialCharacterComponent.charactersPopupCharacterSymbol() //Check this
|
81
|
+
.eq(index)
|
82
|
+
.find('svg')
|
83
|
+
.should('have.attr', 'aria-label', `${symbolARIALabel}`);
|
84
|
+
});
|
85
|
+
});
|
86
|
+
});
|
87
|
+
},
|
88
|
+
|
89
|
+
/**
|
90
|
+
* @description Verify customized special character category tiles in edit tab
|
91
|
+
* @param {string[]} charactersCategoriesArray Array of special character categories
|
92
|
+
*/
|
93
|
+
verifyCustomizeSpecialCharactersCategoryTiles: (charactersCategoriesArray) => {
|
94
|
+
customizeSpecialCharacterComponent.specialCharactersCategoryTilesWrapper()
|
95
|
+
.within(() => {
|
96
|
+
charactersCategoriesArray.forEach((characterCategory, index) => {
|
97
|
+
customizeSpecialCharacterComponent.specialCharacterTiles()
|
98
|
+
.eq(index)
|
99
|
+
.should('have.attr', 'aria-label', `${characterCategory}`);
|
100
|
+
});
|
101
|
+
});
|
102
|
+
utilities.verifyElementCount(customizeSpecialCharacterComponent.specialCharacterTiles(), charactersCategoriesArray.length);
|
103
|
+
},
|
104
|
+
|
105
|
+
/**
|
106
|
+
* @description Verify selected special characters category tiles
|
107
|
+
* @param {string[]} selectedSpecialCharactersCategoriesArray Array of selected special characters categories
|
108
|
+
*/
|
109
|
+
verifySelectedCustomizeSpecialCharactersCategoryTiles: (selectedSpecialCharactersCategoriesArray) => {
|
110
|
+
customizeSpecialCharacterComponent.specialCharactersCategoryTilesWrapper()
|
111
|
+
.within(() => {
|
112
|
+
selectedSpecialCharactersCategoriesArray.forEach((characterCategory) => {
|
113
|
+
customizeSpecialCharacterComponent.specialCharacterTiles(characterCategory)
|
114
|
+
.should('have.class', 'Mui-selected')
|
115
|
+
.within(() => {
|
116
|
+
utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.specialCharactersCategoryTileTickIcon(), 'visible');
|
117
|
+
});
|
118
|
+
});
|
119
|
+
});
|
120
|
+
},
|
121
|
+
|
122
|
+
clickOnSpecialCharactersCategoryTile: (categoryName) => {
|
123
|
+
customizeSpecialCharacterComponent.specialCharacterTiles(categoryName)
|
124
|
+
.click();
|
125
|
+
},
|
126
|
+
|
127
|
+
verifySpecialCharacterCategoryTileIsSelected: (categoryName) => {
|
128
|
+
customizeSpecialCharacterComponent.specialCharacterTiles(categoryName)
|
129
|
+
.should('have.attr', 'data-aria-pressed', 'false')
|
130
|
+
.within(() => {
|
131
|
+
utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.TickIcon(), 'visible');
|
132
|
+
});
|
133
|
+
},
|
134
|
+
|
135
|
+
verifySpecialCharacterCategoryTileIsNotSelected: (categoryName) => {
|
136
|
+
customizeSpecialCharacterComponent.specialCharacterTiles(categoryName)
|
137
|
+
.should('have.attr', 'data-aria-pressed', 'false')
|
138
|
+
.within(() => {
|
139
|
+
utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.TickIcon(), 'hidden');
|
140
|
+
});
|
141
|
+
},
|
142
|
+
|
143
|
+
addInputToCustomSpecialCharactersInputField: (input) => {
|
144
|
+
customizeSpecialCharacterComponent.customSpecialCharactersInputField()
|
145
|
+
.type(`${input}`)
|
146
|
+
.should('have.value', `${input}`)
|
147
|
+
},
|
148
|
+
|
149
|
+
/**
|
150
|
+
* Verify custom special characters displayed in edit tab preview popup
|
151
|
+
* @param {string[]} customSpecialCharacters Array of custom special characters
|
152
|
+
*/
|
153
|
+
verifyCustomSpecialCharactersDisplayedInPreviewPopupEditTab: (customSpecialCharacters) => {
|
154
|
+
customSpecialCharacters.forEach((customSpecialCharacter, index) => {
|
155
|
+
utilities.verifyInnerText(customizeSpecialCharacterComponent.specialCharactersPreviewPopupSymbol().eq(index), `${customSpecialCharacter}`);
|
156
|
+
utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.specialCharactersPreviewPopupSymbol().eq(index), 'visible');
|
157
|
+
});
|
158
|
+
utilities.verifyElementCount(customizeSpecialCharacterComponent.specialCharactersPreviewPopupSymbol(), `${customSpecialCharacters.length}`);
|
159
|
+
},
|
160
|
+
}
|
161
|
+
|
162
|
+
export const customizeSpecialCharacterComponent = {
|
163
|
+
...selectors,
|
164
|
+
steps
|
165
|
+
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
|
2
2
|
import constants from "../../fixtures/constants";
|
3
3
|
import { dialogBoxBase } from "../dialogBoxBase";
|
4
|
+
import utilities from "../../support/helpers/utilities";
|
4
5
|
const css = Cypress.env('css');
|
5
6
|
|
6
7
|
const selectors = {
|
@@ -34,6 +35,129 @@ const selectors = {
|
|
34
35
|
}
|
35
36
|
|
36
37
|
const steps = {
|
38
|
+
/**
|
39
|
+
* @description verify category is not displayed in preview tab equation editor
|
40
|
+
* @param {string} categoryName Name of category
|
41
|
+
*/
|
42
|
+
verifyCategoryIsNotDisplayedInEquationEditorPreviewTab: (categoryName) => {
|
43
|
+
utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTab().contains(`${categoryName}`), 'notExist');
|
44
|
+
},
|
45
|
+
|
46
|
+
/**
|
47
|
+
* @description verify category in preview tab equation editor
|
48
|
+
* @param {string} categoryName Name of category
|
49
|
+
* @param {string} categoryIcon Icon of category
|
50
|
+
*/
|
51
|
+
verifyCategoryInEquationEditorPreviewTab: (categoryName, categoryIcon) => {
|
52
|
+
equationEditorFlyout.categoryTab()
|
53
|
+
.contains(`${categoryName}`)
|
54
|
+
.parents('.tool-wrapper')
|
55
|
+
.within(() => {
|
56
|
+
utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTabTitle(), 'visible');
|
57
|
+
utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTabIcon(), 'visible');
|
58
|
+
utilities.verifyTextContent(equationEditorFlyout.categoryTabTitle(), `${categoryName}`);
|
59
|
+
utilities.verifyTextContent(equationEditorFlyout.categoryTabIcon(), `${categoryIcon}`);
|
60
|
+
});
|
61
|
+
},
|
62
|
+
|
63
|
+
/**
|
64
|
+
* @description select equation editor category in preview tab
|
65
|
+
* @param {string} categoryName Name of category
|
66
|
+
*/
|
67
|
+
selectEquationEditorCategoryPreviewTab: (categoryName) => {
|
68
|
+
equationEditorFlyout.categoryTab()
|
69
|
+
.contains(`${categoryName}`)
|
70
|
+
.click();
|
71
|
+
},
|
72
|
+
|
73
|
+
/**
|
74
|
+
* @description Verify the symbols displayed in equation editor category in preview tab
|
75
|
+
* @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
|
76
|
+
* @param {object[]} symbolsArray An array of objects which contain aria-label, title and text element of every symbol
|
77
|
+
* @param {string} symbolsArray[].title Title of symbol
|
78
|
+
* @param {string} symbolsArray[].textElement Text element of symbol
|
79
|
+
* @param {string} symbolsArray[].ariaLabel aria-label of symbol
|
80
|
+
* @example [
|
81
|
+
{
|
82
|
+
title: 'One',
|
83
|
+
textElement: '1',
|
84
|
+
ariaLabel: 'one'
|
85
|
+
},
|
86
|
+
{
|
87
|
+
title: 'Two',
|
88
|
+
textElement: '2',
|
89
|
+
ariaLabel: 'two'
|
90
|
+
},
|
91
|
+
]
|
92
|
+
*/
|
93
|
+
verifyCharactersDisplayedInEquationEditorCategoryPreviewTab: (symbolsArray) => {
|
94
|
+
equationEditorFlyout.categoryCharacters()
|
95
|
+
.each(($el, index) => {
|
96
|
+
cy.wrap($el)
|
97
|
+
.should('have.attr', 'aria-label', symbolsArray[index].ariaLabel)
|
98
|
+
utilities.verifyTextContent(cy.wrap($el).find('title'), `${symbolsArray[index].title}`);
|
99
|
+
if (symbolsArray[index].textElement !== null) {
|
100
|
+
utilities.verifyTextContent(cy.wrap($el), `${symbolsArray[index].textElement}`);
|
101
|
+
}
|
102
|
+
});
|
103
|
+
utilities.verifyElementCount(equationEditorFlyout.categoryCharacters(), symbolsArray.length);
|
104
|
+
},
|
105
|
+
|
106
|
+
/**
|
107
|
+
* @description Select category and enter the equations in equation editor input field
|
108
|
+
* @param {Object[]} responses - An array of objects containing the categoryName and symbolName
|
109
|
+
* @param {string} responses[].categoryName Name of the category
|
110
|
+
* @param {string} responses[].symbolName Name of the symbol from the selected category
|
111
|
+
*/
|
112
|
+
enterEquation: (responses) => {
|
113
|
+
responses.forEach(({ categoryName, symbolName }) => {
|
114
|
+
equationEditorFlyout.categoryTab()
|
115
|
+
.contains(equationEditorCategoriesAndSymbols[categoryName].displayName, { matchCase: false })
|
116
|
+
.click();
|
117
|
+
symbolName.forEach((individualSymbol) => {
|
118
|
+
equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols[categoryName].symbols[individualSymbol].ariaLabel)
|
119
|
+
.click();
|
120
|
+
});
|
121
|
+
});
|
122
|
+
},
|
123
|
+
|
124
|
+
/**
|
125
|
+
* @description type in the equation editor input field
|
126
|
+
* @param {string} text - text to be entered in the input field
|
127
|
+
*/
|
128
|
+
enterTextInPreviewInputField: (text) => {
|
129
|
+
equationEditorFlyout.previewInputField()
|
130
|
+
.type(text);
|
131
|
+
},
|
132
|
+
|
133
|
+
clickOnOkButton: () => {
|
134
|
+
equationEditorFlyout.buttonOk()
|
135
|
+
.click();
|
136
|
+
},
|
137
|
+
|
138
|
+
/**
|
139
|
+
* @description type in the equation editor input field first empty box
|
140
|
+
* @param {string} text - text to be entered in the first empty box of field
|
141
|
+
*/
|
142
|
+
enterTextInFirstEmptyBox: (textArray) => {
|
143
|
+
textArray.forEach((text) => {
|
144
|
+
equationEditorFlyout.inputFieldFirstEmptyBox()
|
145
|
+
.click()
|
146
|
+
.type(text)
|
147
|
+
});
|
148
|
+
},
|
149
|
+
|
150
|
+
/**
|
151
|
+
* @description type in the equation editor cursor input field
|
152
|
+
* @param {string} text - text to be entered at the cursor
|
153
|
+
*/
|
154
|
+
enterTextAtInputFieldCursor: (text) => {
|
155
|
+
equationEditorFlyout.inputFieldCursor()
|
156
|
+
.click()
|
157
|
+
.type(text)
|
158
|
+
},
|
159
|
+
|
160
|
+
///Old
|
37
161
|
addGenericEquationUsingEquationEditorToCKEditorInputField: () => {
|
38
162
|
equationEditorFlyout.categoryTab(equationEditorCategoriesAndSymbols['basic'].displayName)
|
39
163
|
.click();
|
@@ -155,6 +155,9 @@ const steps = {
|
|
155
155
|
.should('be.checked');
|
156
156
|
},
|
157
157
|
|
158
|
+
|
159
|
+
///OLD
|
160
|
+
|
158
161
|
//TODO: need to improve this, we are passing two parameters here, only one should suffice
|
159
162
|
openAndSelectOptionFromDisplayWordLimitDropdown: (optionIndex, optionName) => {
|
160
163
|
essayResponseCommonComponents.displayWordLimitDropdown()
|
@@ -1,12 +1,38 @@
|
|
1
1
|
import utilities from "../../support/helpers/utilities";
|
2
2
|
import { backgroundImageUploadComponent } from "./backgroundImageUploadComponent";
|
3
|
+
import { commonComponents } from "./commonComponents";
|
3
4
|
import { createQuestionBasePage } from "./createQuestionBasePage";
|
4
5
|
|
5
6
|
const selectors = {
|
6
7
|
insertResponseAreaButton: () => cy.get('button[aria-label*="insert"]').eq(0),
|
7
8
|
selectResponseAreaButton: () => cy.get('button[aria-label*="select"]').eq(0),
|
9
|
+
insertTextAreaButton: () => cy.get('button[aria-label*="insert text"]').eq(0),
|
8
10
|
canvas: () => cy.get('[class*="Canvasstyle__DragAndDropCanvas"]'),
|
9
11
|
canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] [class*="Canvasstyle__DragAndDropCanvas"]'),
|
12
|
+
canvasLabel: () => cy.get('[class*="Canvasstyle__CanvasTxt"]'),
|
13
|
+
selectDropzoneButton: () => cy.get('[aria-label="select dropzone"]'),
|
14
|
+
insertDropzoneButton: () => cy.get('[aria-label="insert dropzone"]'),
|
15
|
+
insertTextButton: () => cy.get('[aria-label="insert text"]'),
|
16
|
+
undoButton: () => cy.get('[aria-label="undo"]'),
|
17
|
+
redoButton: () => cy.get('[aria-label="redo"]'),
|
18
|
+
clearAllButton: () => cy.get('[aria-label="clear all"]'),
|
19
|
+
canvasSelectedMenuText: () => cy.get('[class*="Canvasstyle__CanvasSelectedMenuTxt"]'),
|
20
|
+
dropzoneWrapper: () => cy.get('[class*="Canvasstyle__ResponseDiv"]'),
|
21
|
+
dropzonePointer: () => cy.get('[class*="Canvasstyle__PointerWrapper"]'),
|
22
|
+
dropzone: () => cy.get('[class*="Canvasstyle__DropZone"]'),
|
23
|
+
dropzonePointerInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__PointerWrapper"]'),
|
24
|
+
dropzoneInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__DropzoneWrapper"]'),
|
25
|
+
textBoxInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__TextBoxContainer"] textarea'),
|
26
|
+
removeDropzoneButton: () => cy.get('.remove-button'),
|
27
|
+
dropzoneNumerationText: () => cy.get('[class*="Canvasstyle__DropzoneContent"]'),
|
28
|
+
dropzoneStyle: (ariaLabel = null) => {
|
29
|
+
if (ariaLabel) {
|
30
|
+
return cy.get(`.canvas-secondary-control[aria-label="${ariaLabel}"]`)
|
31
|
+
} else {
|
32
|
+
return cy.get('.canvas-secondary-control')
|
33
|
+
}
|
34
|
+
},
|
35
|
+
textResponse: () => cy.get('[class*="Canvasstyle__TextBoxContainer"] textarea'),
|
10
36
|
canvasImage: () => cy.get('.canvas-image'),
|
11
37
|
canvasImageInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] .canvas-image'),
|
12
38
|
imagePropertiesLabel: () => cy.get('[class*="ImagePropertiesstyles__SectionLabel"]'),
|
@@ -22,8 +48,10 @@ const selectors = {
|
|
22
48
|
canvasHeightInputField: () => cy.get('.common-text-wrapper .text-field').eq(1),
|
23
49
|
imageAlternativeTextLabel: () => cy.get('[class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]'),
|
24
50
|
imageAlternativeTextInputField: () => cy.get('[class*="ImagePropertiesstyles__AltTextWrapper"] input'),
|
25
|
-
|
26
|
-
|
51
|
+
editColorLabel: () => cy.get('[class*="Canvasstyle__TextColorArray"] p'),
|
52
|
+
selectedColorBlockInTextColorPopup: () => cy.get('.color-library-selected'),
|
53
|
+
textColorPopupWrapper: () => cy.get('[class*="Canvasstyle__TextColorPopupWrapper"]'),
|
54
|
+
textColorLabelInTextColorPopup: () => cy.get('[class*="Canvasstyle__PopupText"]'),
|
27
55
|
}
|
28
56
|
|
29
57
|
const steps = {
|
@@ -46,6 +74,25 @@ const steps = {
|
|
46
74
|
.click();
|
47
75
|
},
|
48
76
|
|
77
|
+
/**
|
78
|
+
* @param {number} xCoordinateInPercentage - The x co-ordinate for position of the response area
|
79
|
+
* @description Adds response area to the canvas.
|
80
|
+
*/
|
81
|
+
insertTextArea: (yCoordinateInPercentage) => {
|
82
|
+
figOverImageCanvasComponent.insertTextAreaButton()
|
83
|
+
.click();
|
84
|
+
figOverImageCanvasComponent.canvasImage()
|
85
|
+
.then(($element) => {
|
86
|
+
const imageHeight = $element[0].clientHeight;
|
87
|
+
const xCoordinate = 80;
|
88
|
+
const yCoordinate = yCoordinateInPercentage * imageHeight / 100;
|
89
|
+
figOverImageCanvasComponent.canvasImage()
|
90
|
+
.click(xCoordinate, yCoordinate, { force: true });
|
91
|
+
});
|
92
|
+
figOverImageCanvasComponent.textResponse()
|
93
|
+
.type(text);
|
94
|
+
},
|
95
|
+
|
49
96
|
verifyImageIsUploaded: () => {
|
50
97
|
utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasImage(), 'visible');
|
51
98
|
utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'notExist');
|
@@ -149,11 +196,11 @@ const steps = {
|
|
149
196
|
.should('have.attr', 'opacity', value);
|
150
197
|
},
|
151
198
|
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
199
|
+
/**
|
200
|
+
* @param {number} value holds opacity value for image
|
201
|
+
* @description function verifies opacity value for image
|
202
|
+
*/
|
203
|
+
verifyOpacityValueForCanvasImageInPreviewTab: (value) => {
|
157
204
|
figOverImageCanvasComponent.canvasImageInPreviewTab()
|
158
205
|
.should('have.attr', 'opacity', value);
|
159
206
|
},
|
@@ -293,6 +340,246 @@ const steps = {
|
|
293
340
|
figOverImageCanvasComponent.canvasInPreviewTab()
|
294
341
|
.should('have.css', 'height', `${height}px`);
|
295
342
|
},
|
343
|
+
|
344
|
+
/**
|
345
|
+
* @param {"Insert dropzone"|"Insert text"|"Select dropzone"} {String} button denotes selected button name
|
346
|
+
*@description function verifies button active state
|
347
|
+
*/
|
348
|
+
verifyCanvasMenuButtonSelected: (button) => {
|
349
|
+
switch (button) {
|
350
|
+
case 'Insert dropzone': figOverImageCanvasComponent.insertDropzoneButton()
|
351
|
+
.should('have.class', 'active');
|
352
|
+
break;
|
353
|
+
case 'Insert text': figOverImageCanvasComponent.insertTextButton()
|
354
|
+
.should('have.class', 'active');
|
355
|
+
break;
|
356
|
+
case 'Select dropzone': figOverImageCanvasComponent.selectDropzoneButton()
|
357
|
+
.should('have.class', 'active');
|
358
|
+
break;
|
359
|
+
}
|
360
|
+
},
|
361
|
+
|
362
|
+
/**
|
363
|
+
* @param {"Insert dropzone"|"Insert text"|"Select dropzone"} {String} button denotes selected button name
|
364
|
+
*@description function selects button
|
365
|
+
*/
|
366
|
+
selectCanvasMenuButton: (button) => {
|
367
|
+
switch (button) {
|
368
|
+
case 'Insert dropzone': figOverImageCanvasComponent.insertDropzoneButton()
|
369
|
+
.click()
|
370
|
+
.should('have.class', 'active');
|
371
|
+
break;
|
372
|
+
case 'Insert text': figOverImageCanvasComponent.insertTextButton()
|
373
|
+
.click()
|
374
|
+
.should('have.class', 'active');
|
375
|
+
break;
|
376
|
+
case 'Select dropzone': figOverImageCanvasComponent.selectDropzoneButton()
|
377
|
+
.click()
|
378
|
+
.should('have.class', 'active');
|
379
|
+
break;
|
380
|
+
}
|
381
|
+
},
|
382
|
+
|
383
|
+
redoAction: () => {
|
384
|
+
figOverImageCanvasComponent.redoButton()
|
385
|
+
.click();
|
386
|
+
},
|
387
|
+
|
388
|
+
undoAction: () => {
|
389
|
+
figOverImageCanvasComponent.undoButton()
|
390
|
+
.click();
|
391
|
+
},
|
392
|
+
|
393
|
+
clearAll: () => {
|
394
|
+
figOverImageCanvasComponent.clearAllButton()
|
395
|
+
.click();
|
396
|
+
},
|
397
|
+
|
398
|
+
verifyUndoButtonDisabled: () => {
|
399
|
+
utilities.verifyElementDisabled(figOverImageCanvasComponent.undoButton());
|
400
|
+
},
|
401
|
+
|
402
|
+
verifyRedoButtonDisabled: () => {
|
403
|
+
utilities.verifyElementDisabled(figOverImageCanvasComponent.redoButton());
|
404
|
+
},
|
405
|
+
|
406
|
+
verifyUndoButtonEnabled: () => {
|
407
|
+
utilities.verifyElementNotDisabled(figOverImageCanvasComponent.undoButton());
|
408
|
+
},
|
409
|
+
|
410
|
+
verifyRedoButtonEnabled: () => {
|
411
|
+
utilities.verifyElementNotDisabled(figOverImageCanvasComponent.redoButton());
|
412
|
+
},
|
413
|
+
|
414
|
+
/**
|
415
|
+
* @param {number} dropzoneIndex dropzone number
|
416
|
+
* @description function selects dropzone of a particular index
|
417
|
+
*/
|
418
|
+
selectDropzone: (dropzoneIndex) => {
|
419
|
+
figOverImageCanvasComponent.dropzone()
|
420
|
+
.eq(dropzoneIndex)
|
421
|
+
.click();
|
422
|
+
},
|
423
|
+
|
424
|
+
/**
|
425
|
+
* @param {string} style dropzone pointer orientation
|
426
|
+
* @description function selects dropzone pointer style
|
427
|
+
*/
|
428
|
+
selectDropzonePointerStyle: (style) => {
|
429
|
+
figOverImageCanvasComponent.dropzoneStyle(style)
|
430
|
+
.click();
|
431
|
+
},
|
432
|
+
|
433
|
+
clickOnCanvasSelectedMenuText: () => {
|
434
|
+
figOverImageCanvasComponent.canvasSelectedMenuText()
|
435
|
+
.click();
|
436
|
+
},
|
437
|
+
|
438
|
+
verifyDropzonePointerStyle: (style, dropzoneIndex) => {
|
439
|
+
const getPosition = (option) => {
|
440
|
+
switch (option) {
|
441
|
+
case 'bottom':
|
442
|
+
return { top: '-31.5px', left: '-37.5px' };
|
443
|
+
case 'bottom right':
|
444
|
+
return { top: '-25px', left: '-40px' };
|
445
|
+
case 'right':
|
446
|
+
return { top: '-21px', left: '-36.5px' };
|
447
|
+
case 'top right':
|
448
|
+
return { top: '-19px', left: '-31px' };
|
449
|
+
case 'top':
|
450
|
+
return { top: '-22.5px', left: '-25.5px' };
|
451
|
+
case 'top left':
|
452
|
+
return { top: '-27px', left: '-24px' };
|
453
|
+
case 'left':
|
454
|
+
return { bottom: '-20px', left: '-27px' };
|
455
|
+
case 'bottom left':
|
456
|
+
return { bottom: '-18px', left: '-32px' };
|
457
|
+
}
|
458
|
+
}
|
459
|
+
const expectedPosition = getPosition(style);
|
460
|
+
if (style == 'left' || style == 'bottom left') {
|
461
|
+
figOverImageCanvasComponent.dropzonePointer()
|
462
|
+
.eq(dropzoneIndex)
|
463
|
+
.should('have.css', 'bottom', expectedPosition.bottom)
|
464
|
+
.and('have.css', 'left', expectedPosition.left);
|
465
|
+
}
|
466
|
+
else if (style == 'none') {
|
467
|
+
figOverImageCanvasComponent.dropzone()
|
468
|
+
.parent()
|
469
|
+
.should('not.contain', '[class*="Canvasstyle__PointerWrapper"]');
|
470
|
+
}
|
471
|
+
else {
|
472
|
+
figOverImageCanvasComponent.dropzonePointer()
|
473
|
+
.eq(dropzoneIndex)
|
474
|
+
.should('have.css', 'top', expectedPosition.top)
|
475
|
+
.and('have.css', 'left', expectedPosition.left);
|
476
|
+
}
|
477
|
+
},
|
478
|
+
|
479
|
+
verifyDropzonePointerStyleInPreviewTab: (style, dropzoneIndex) => {
|
480
|
+
const getPosition = (option) => {
|
481
|
+
switch (option) {
|
482
|
+
case 'bottom':
|
483
|
+
return { top: '-31.5px', left: '-37.5px' };
|
484
|
+
case 'bottom right':
|
485
|
+
return { top: '-25px', left: '-40px' };
|
486
|
+
case 'right':
|
487
|
+
return { top: '-21px', left: '-36.5px' };
|
488
|
+
case 'top right':
|
489
|
+
return { top: '-19px', left: '-31px' };
|
490
|
+
case 'top':
|
491
|
+
return { top: '-22.5px', left: '-25.5px' };
|
492
|
+
case 'top left':
|
493
|
+
return { top: '-27px', left: '-24px' };
|
494
|
+
case 'left':
|
495
|
+
return { bottom: '-20px', left: '-27px' };
|
496
|
+
case 'bottom left':
|
497
|
+
return { bottom: '-18px', left: '-32px' };
|
498
|
+
}
|
499
|
+
}
|
500
|
+
const expectedPosition = getPosition(style);
|
501
|
+
if (style == 'left' || style == 'bottom left') {
|
502
|
+
figOverImageCanvasComponent.dropzonePointerInPreviewTab()
|
503
|
+
.eq(dropzoneIndex)
|
504
|
+
.should('have.css', 'bottom', expectedPosition.bottom)
|
505
|
+
.and('have.css', 'left', expectedPosition.left);
|
506
|
+
}
|
507
|
+
else if (style == 'none') {
|
508
|
+
figOverImageCanvasComponent.dropzonePointerInPreviewTab()
|
509
|
+
.eq(dropzoneIndex)
|
510
|
+
.should('not.have.css', 'bottom')
|
511
|
+
.and('not.have.css', 'left');
|
512
|
+
}
|
513
|
+
else {
|
514
|
+
figOverImageCanvasComponent.dropzonePointerInPreviewTab()
|
515
|
+
.eq(dropzoneIndex)
|
516
|
+
.should('have.css', 'top', expectedPosition.top)
|
517
|
+
.and('have.css', 'left', expectedPosition.left);
|
518
|
+
}
|
519
|
+
},
|
520
|
+
|
521
|
+
verifyDropzoneNotExistInPreviewTab: () => {
|
522
|
+
utilities.verifyElementVisibilityState(figOverImageCanvasComponent.dropzoneInPreviewTab(), 'notExist');
|
523
|
+
},
|
524
|
+
|
525
|
+
verifyTextBoxNotExistInPreviewTab: () => {
|
526
|
+
utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textBoxInPreviewTab(), 'notExist');
|
527
|
+
},
|
528
|
+
|
529
|
+
verifyDropzoneExistInPreviewTab: () => {
|
530
|
+
figOverImageCanvasComponent.dropzoneInPreviewTab()
|
531
|
+
.should('be.visible');
|
532
|
+
},
|
533
|
+
|
534
|
+
verifyTextBoxExistInPreviewTab: () => {
|
535
|
+
figOverImageCanvasComponent.textBoxInPreviewTab()
|
536
|
+
.should('be.visible');
|
537
|
+
},
|
538
|
+
|
539
|
+
verifyTextColorOfTextBox: (color) => {
|
540
|
+
figOverImageCanvasComponent.textResponse()
|
541
|
+
.should('have.css', 'color', color);
|
542
|
+
},
|
543
|
+
|
544
|
+
verifyTextColorOfTextBoxInPreviewTab: (color) => {
|
545
|
+
figOverImageCanvasComponent.textBoxInPreviewTab()
|
546
|
+
.should('have.css', 'color', color);
|
547
|
+
},
|
548
|
+
|
549
|
+
verifyTextOfTextBox: (text) => {
|
550
|
+
figOverImageCanvasComponent.textResponse()
|
551
|
+
.invoke('text')
|
552
|
+
.should('eq', text);
|
553
|
+
},
|
554
|
+
|
555
|
+
verifyTextOfTextBoxInPreviewTab: (text) => {
|
556
|
+
figOverImageCanvasComponent.textBoxInPreviewTab()
|
557
|
+
.invoke('text')
|
558
|
+
.should('eq', text);
|
559
|
+
},
|
560
|
+
|
561
|
+
clickOnTextColorButton: () => {
|
562
|
+
figOverImageCanvasComponent.dropzoneStyle()
|
563
|
+
.click();
|
564
|
+
utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textColorPopupWrapper(), 'visible');
|
565
|
+
},
|
566
|
+
|
567
|
+
clickOnEditColorButton: () => {
|
568
|
+
figOverImageCanvasComponent.editColorLabel()
|
569
|
+
.click();
|
570
|
+
},
|
571
|
+
|
572
|
+
verifyColorBlockSelectedState: () => {
|
573
|
+
figOverImageCanvasComponent.selectedColorBlockInTextColorPopup()
|
574
|
+
.find('[data-name="Selected card icon"]')
|
575
|
+
.should('be.visible');
|
576
|
+
},
|
577
|
+
|
578
|
+
verifyColorBlock: (color) => {
|
579
|
+
figOverImageCanvasComponent.selectedColorBlockInTextColorPopup()
|
580
|
+
.should('have.css', 'background-color', color);
|
581
|
+
},
|
582
|
+
|
296
583
|
/**
|
297
584
|
* @description this function removes a dropzone from the canvas
|
298
585
|
* @param {number} index of the dropzone to be removed
|
@@ -301,6 +588,28 @@ const steps = {
|
|
301
588
|
figOverImageCanvasComponent.removeDropzoneButton()
|
302
589
|
.eq(index)
|
303
590
|
.click({ force: true });
|
591
|
+
},
|
592
|
+
|
593
|
+
/**
|
594
|
+
* @param {string} selectedMenu denotes canvas selected menu text
|
595
|
+
* @description function verifies inner text and visibility of canvas selected menu text
|
596
|
+
*/
|
597
|
+
verifyCanvasSelectedMenuText: (selectedMenu) => {
|
598
|
+
utilities.verifyInnerText(figOverImageCanvasComponent.canvasSelectedMenuText(), selectedMenu);
|
599
|
+
utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasSelectedMenuText(), 'visible');
|
600
|
+
},
|
601
|
+
|
602
|
+
/**
|
603
|
+
* @param {string} element denotes element
|
604
|
+
* @param {string} text denotes tooltip text
|
605
|
+
* @description function is used to hover over element and verify innertext of its tooltip
|
606
|
+
*/
|
607
|
+
verifyTooltipInnerText: (element, text) => {
|
608
|
+
element()
|
609
|
+
.trigger('mouseover', { force: true });
|
610
|
+
utilities.verifyInnerText(commonComponents.tooltipText(), text);
|
611
|
+
element()
|
612
|
+
.trigger('mouseout', { force: true });
|
304
613
|
}
|
305
614
|
}
|
306
615
|
|