itemengine-cypress-automation 1.0.193-packageUpdated-b3f3d0b.0 → 1.0.193

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.
Files changed (51) hide show
  1. package/cypress/e2e/ILC/AudioPlayerNew/allSupportedFileTypes.js +3 -3
  2. package/cypress/e2e/ILC/AudioPlayerNew/audioOverviewAndTranscript.js +568 -0
  3. package/cypress/e2e/ILC/AudioPlayerNew/barAudioPlayerStyle.js +4 -4
  4. package/cypress/e2e/ILC/AudioPlayerNew/compactAudioPlayerStyle.js +5 -5
  5. package/cypress/e2e/ILC/AudioPlayerNew/customizePlayerLayoutSettings.js +2 -2
  6. package/cypress/e2e/ILC/AudioPlayerNew/headerSection.js +125 -0
  7. package/cypress/e2e/ILC/AudioPlayerNew/previewContents.smoke.js +5 -5
  8. package/cypress/e2e/ILC/AudioPlayerNew/standardAudioPlayerStyle.js +4 -4
  9. package/cypress/e2e/ILC/AudioPlayerNew/studentViewSettings.js +3 -3
  10. package/cypress/e2e/ILC/AudioPlayerNew/uploadAndAddAudioFile.js +19 -17
  11. package/cypress/e2e/ILC/ChartsBar/previewContentsForAllViews.smoke.js +7 -4
  12. package/cypress/e2e/ILC/ChartsLine/allOrNothingScoringForAllViews.smoke.js +366 -0
  13. package/cypress/e2e/ILC/ChartsLine/checkAnswerFunctionalityForAllViews.smoke.js +183 -0
  14. package/cypress/e2e/ILC/ChartsLine/gradingViewAndCorrectAnswerView.smoke.js +281 -0
  15. package/cypress/e2e/ILC/ChartsLine/previewContentsForAllViews.smoke.js +595 -0
  16. package/cypress/e2e/ILC/GridFill/allOrNothingBasicForAllViews.smoke.js +8 -8
  17. package/cypress/e2e/ILC/ImageHighlight/Scoring/allOrNothingWithAlternativePointsGreaterThanCorrectPoints.js +241 -0
  18. package/cypress/e2e/ILC/ImageHighlight/Scoring/allOrNothingWithCorrectPointsEqualToAlternativePoints.js +241 -0
  19. package/cypress/e2e/ILC/ImageHighlight/Scoring/allOrNothingWithCorrectPointsGreaterThanAlternatePoints.js +285 -0
  20. package/cypress/e2e/ILC/ImageHighlight/Scoring/manuallyAndNonScored.js +164 -0
  21. package/cypress/e2e/ILC/ImageHighlight/Scoring/partialDifferentWeightsAlternativePointsGreaterThanCorrectPoints.js +281 -0
  22. package/cypress/e2e/ILC/ImageHighlight/Scoring/partialDifferentWeightsScoring.js +467 -0
  23. package/cypress/e2e/ILC/ImageHighlight/Scoring/partialDifferentWeightsWithCorrectPointsEqualToAlternativePoints.js +250 -0
  24. package/cypress/e2e/ILC/ImageHighlight/Scoring/partialDifferentWeigtsCorrectPointsGreaterThanAlternativePoints.js +281 -0
  25. package/cypress/e2e/ILC/ImageHighlight/Scoring/partialEqualWeightsAlternativePointsGreaterThanCorrectPoints.js +260 -0
  26. package/cypress/e2e/ILC/ImageHighlight/Scoring/partialEqualWeightsScoring.js +184 -0
  27. package/cypress/e2e/ILC/ImageHighlight/Scoring/partialEqualWeightsWithCorrectPointsEqualToAlternativePoints.js +229 -0
  28. package/cypress/e2e/ILC/ImageHighlight/Scoring/partialEqualWeightsWithCorrectPointsGreaterThanAlternativePoints.js +261 -0
  29. package/cypress/e2e/ILC/chartsDotsPlot/allOrNothingForAllViews.smoke.js +409 -0
  30. package/cypress/e2e/ILC/chartsDotsPlot/checkAnswerFunctionalityForAllViews.smoke.js +199 -0
  31. package/cypress/e2e/ILC/chartsDotsPlot/gradingViewAndCorrectAnswerView.smoke.js +223 -0
  32. package/cypress/e2e/ILC/chartsDotsPlot/previewContentsForAllViews.smoke.js +402 -0
  33. package/cypress/pages/audioPlayerPage.js +229 -9
  34. package/cypress/pages/chartsBarPage.js +2 -70
  35. package/cypress/pages/chartsDotPlotPage.js +986 -3
  36. package/cypress/pages/chartsLinePage.js +368 -9
  37. package/cypress/pages/components/autoScoredScoringSectionMultiResponseType.js +0 -1
  38. package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js +3 -0
  39. package/cypress/pages/components/backgroundImageUploadComponent.js +1 -1
  40. package/cypress/pages/components/barAndLineChartComponent.js +27 -1
  41. package/cypress/pages/components/chartsCommonComponent.js +31 -2
  42. package/cypress/pages/components/createQuestionBasePage.js +1 -0
  43. package/cypress/pages/components/layoutSectionComponent.js +2 -2
  44. package/cypress/pages/components/singleMultipleSelectionModeComponent.js +5 -0
  45. package/cypress/pages/components/toolSettingsComponent.js +2 -2
  46. package/cypress/pages/feedbackScalePage.js +1 -1
  47. package/cypress/pages/gridFillPage.js +13 -6
  48. package/cypress/pages/imageHighlightPage.js +308 -2
  49. package/cypress/pages/numberLinePage.js +40 -16
  50. package/cypress/pages/videoResponsePage.js +350 -6
  51. package/package.json +1 -1
@@ -1,21 +1,36 @@
1
1
  import utilities from "../support/helpers/utilities";
2
- import { autoScoredScoringPreviewTab, autoScoredStudentViewSettings, backgroundImageUploadComponent, createQuestionBasePage, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, singleMultipleSelectionModeComponent } from "./components"
2
+ import { autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, backgroundImageUploadComponent, commonComponents, createQuestionBasePage, enableOuterBorderComponent, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, singleMultipleSelectionModeComponent } from "./components"
3
3
  const css = Cypress.env('css');
4
4
  let imageWidth = 768;
5
5
  let imageHeight = 432;
6
6
 
7
7
  const selectors = {
8
8
  ...questionInstructionsComponent,
9
+ ...autoScoredScoringSectionMultiResponseType,
10
+ ...autoScoredSpecifyCorrectAnswerSection,
11
+ ...commonComponents,
12
+ ...enableOuterBorderComponent,
13
+ ...autoScoredScoringPreviewTab,
9
14
 
10
15
  //Specify possible options
11
16
  specifyPossibleOptionsImageWrapper: () => cy.get('.drawing-tool__wrapper .drawing-tool__canvas'),
12
17
  specifyPossibleOptionsImageCanvas: () => cy.get('.drawing-tool__wrapper .upper-canvas'),
13
18
  freeformTool: () => cy.get('.drawing-tool__button-polygon'),
19
+ itemEraserTool: () => cy.get('.drawing-tool__button-itemEraser'),
20
+ selectTool: () => cy.get('.drawing-tool__button-select'),
21
+ undoTool: () => cy.get('.drawing-tool__button-undo'),
22
+ redoTool: () => cy.get('.drawing-tool__button-redo'),
23
+ clearAllTool: () => cy.get('.drawing-tool__button-clearAll'),
24
+ optionCount: () => cy.get('[class*="HighlightImagestyles__HighlightCountWrapper"]'),
14
25
  //Specify correct answer section
15
26
  specifyCorrectAnswerSectionImage: () => cy.get('.highlight-svg-responseive image'),
16
- specifyCorrectAnswerSectionHighlight: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a'),
27
+ specifyCorrectAnswerSectionHighlight: () => cy.get('.ngie-accordion [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
28
+ specifyCorrectAnswerSectionHighlightPolygon: () => cy.get('[class*="HighlightImageControlstyles__PolygonWrapper"]'),
29
+ highlightNumerationSpecifyCorrectAnswer: () => cy.get('[class*="__TspanWrapper"]:visible'),
30
+ partialEqualWeightsPointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
17
31
  //preview tab
18
32
  imagePreviewTab: () => cy.get('[class*="question-preview-wrapper"] .highlight-svg-responseive image'),
33
+ imagePreviewTabWrapper: () => cy.get('[class*="question-preview-wrapper"] .highlight-svg-wrapper'),
19
34
  highlightPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
20
35
  highlightPolygonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="HighlightImageControlstyles__PolygonWrapper"]'),
21
36
  checkMarkIcon: () => cy.get('.correct-option-icon [data-name*="Rectangle"]'),
@@ -38,6 +53,10 @@ const steps = {
38
53
  ...imageCanvasComponent.steps,
39
54
  ...autoScoredScoringPreviewTab.steps,
40
55
  ...autoScoredStudentViewSettings.steps,
56
+ ...autoScoredSpecifyCorrectAnswerSection.steps,
57
+ ...autoScoredScoringSectionMultiResponseType.steps,
58
+ ...enableOuterBorderComponent.steps,
59
+
41
60
  //Specify possible options
42
61
  clickOnFreeformTool: () => {
43
62
  imageHighlightPage.freeformTool()
@@ -45,6 +64,24 @@ const steps = {
45
64
  .blur();
46
65
  },
47
66
 
67
+ clickOnUndoTool: () => {
68
+ imageHighlightPage.undoTool()
69
+ .click();
70
+ steps.clickOnFreeformTool();
71
+ },
72
+
73
+ clickOnRedoTool: () => {
74
+ imageHighlightPage.redoTool()
75
+ .click();
76
+ steps.clickOnFreeformTool();
77
+ },
78
+
79
+ clickOnClearAllTool: () => {
80
+ imageHighlightPage.clearAllTool()
81
+ .click()
82
+ .blur();
83
+ },
84
+
48
85
  verifyImageUploadedInSpecifyPossibleOptionsSection: () => {
49
86
  imageHighlightPage.specifyPossibleOptionsImageWrapper()
50
87
  .should('be.visible')
@@ -76,6 +113,50 @@ const steps = {
76
113
  cy.wait(200);
77
114
  },
78
115
 
116
+ /**
117
+ * @description verify the highlight count
118
+ * @param {number} count shows the count of highlight
119
+ */
120
+ verifyOptionCountInHighlightImageSection: (count) => {
121
+ imageHighlightPage.optionCount()
122
+ .verifyInnerText(`Option count: ${count}`)
123
+ },
124
+
125
+ verifySelectedStateOfFreeformTool: () => {
126
+ imageHighlightPage.freeformTool()
127
+ .should('have.class', 'drawing-tool__button--active');
128
+ },
129
+
130
+ verifyUnselectedStateOfSelectTool: () => {
131
+ imageHighlightPage.selectTool()
132
+ .should('not.have.class', 'drawing-tool__button--active');
133
+ },
134
+
135
+ verifyUnselectedStateOfUndoTool: () => {
136
+ imageHighlightPage.undoTool()
137
+ .should('not.have.class', 'drawing-tool__button--active');
138
+ },
139
+
140
+ verifyUnselectedStateOfRedoTool: () => {
141
+ imageHighlightPage.redoTool()
142
+ .should('not.have.class', 'drawing-tool__button--active');
143
+ },
144
+
145
+ verifyUnselectedStateOfItemEraserTool: () => {
146
+ imageHighlightPage.itemEraserTool()
147
+ .should('not.have.class', 'drawing-tool__button--active');
148
+ },
149
+
150
+ verifySelectedStateOfItemEraserTool: () => {
151
+ imageHighlightPage.itemEraserTool()
152
+ .should('have.class', 'drawing-tool__button--active');
153
+ },
154
+
155
+ verifyUnselectedStateOfClearAllTool: () => {
156
+ imageHighlightPage.clearAllTool()
157
+ .should('not.have.class', 'drawing-tool__button--active');
158
+ },
159
+
79
160
  //Specify correct answer section
80
161
  verifyImageUploadedSpecifyCorrectAnswer: () => {
81
162
  utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerSectionImage(), 'visible')
@@ -104,6 +185,16 @@ const steps = {
104
185
  /**
105
186
  * @param {number} index of highlight region
106
187
  * @description this functions highlights a region in set correct answer section
188
+ */
189
+ clickOnARegionInSpecifyCorrectAnswerSection: (index) => {
190
+ imageHighlightPage.specifyCorrectAnswerSectionHighlight()
191
+ .eq(index)
192
+ .click();
193
+ },
194
+
195
+ /**
196
+ * @param {number} index of highlight region
197
+ * @description this functions highlights a region in set correct answer section
107
198
  */
108
199
  highlightARegionInSpecifyCorrectAnswerSection: (index) => {
109
200
  imageHighlightPage.specifyCorrectAnswerSectionHighlight()
@@ -123,7 +214,119 @@ const steps = {
123
214
  steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(index);
124
215
  },
125
216
 
217
+ /**
218
+ * @param {number} index of points input field
219
+ * @param {number} points alloted in the points input field
220
+ * @description this function verifies the Options label and points input field
221
+ */
222
+ verifyPartialDifferentWeightsOptionLabelAndPoints: (index, points) => {
223
+ utilities.verifyInnerText(scoringSectionBaseEditTab.pointsLabel().eq(index + 1), `Option ${index + 1}`);
224
+ scoringSectionBaseEditTab.pointsInputField()
225
+ .eq(index)
226
+ .should('have.value', points);
227
+ utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pointsInputField().eq(index), 'visible');
228
+ },
229
+
230
+ verifyHighlightRegionNumerationSpecifyCorrectAnswer: () => {
231
+ imageHighlightPage.highlightNumerationSpecifyCorrectAnswer()
232
+ .each(($el, index) => {
233
+ cy.wrap($el)
234
+ .should('have.text', `${index + 1}`);
235
+ });
236
+ },
237
+
238
+ verifyPointsPerResponseLabel: () => {
239
+ utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'Points per response:\n-');
240
+ utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'visible');
241
+ },
242
+
243
+ /**
244
+ * @param {number} points - The expected points value to be verified.
245
+ * @description Verifies the partial equal weights points per response score for a specific option in the specify correct answer section for a multi-response type question.
246
+ */
247
+ verifyPartialEqualWeightsPointsPerResponseScore: (points) => {
248
+ imageHighlightPage.partialEqualWeightsPointsPerResponseScore()
249
+ .should('have.text', points)
250
+ },
251
+
252
+ /**
253
+ * verify the displayed penalty points for each incorrect option
254
+ * @param {number} penaltyPoints displayed penalty points
255
+ */
256
+ verifyPenaltyPointsForEachIncorrectOption: (penaltyPoints) => {
257
+ utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect answer: ${penaltyPoints}`);
258
+ },
259
+
260
+ /**
261
+ * This function erases highlight on the canvas
262
+ * @param {number[][]} arrayOfCoordinates coordinates of the highlight region
263
+ */
264
+ eraseAHighlightRegion: (arrayOfCoordinates) => {
265
+ imageHighlightPage.itemEraserTool()
266
+ .click();
267
+ imageHighlightPage.specifyPossibleOptionsImageCanvas()
268
+ .then(($element) => {
269
+ const clientWidth = $element[0].clientWidth;
270
+ arrayOfCoordinates.forEach((coordinates) => {
271
+ imageHighlightPage.specifyPossibleOptionsImageCanvas()
272
+ .click(coordinates[0] * clientWidth / 100, coordinates[1] * clientWidth / 100);
273
+ });
274
+ });
275
+ },
276
+
277
+ /**
278
+ * @param {string} fileFormat format of the uploaded file in the highlight region
279
+ * @description this function verifies the attribute of the image has the expected file format
280
+ */
281
+ verifyUploadedImageFormatInSetCorrectAnswerSection: (fileFormat) => {
282
+ imageHighlightPage.specifyCorrectAnswerSectionImage()
283
+ .should(($element) => {
284
+ const hrefAttributeValue = $element.attr('href');
285
+ expect(hrefAttributeValue).to.include(fileFormat);
286
+ });
287
+ },
288
+
289
+ /**
290
+ * @param {number} index of highlighted region
291
+ * @param {number[]} hotspotCoordsInPercentage co-ordinates of the highlighted image in set correct answer section
292
+ * @description this function verifies the co-ordinates of region highlighted in set correct answer section
293
+ */
294
+ verifyHighlightRegionsInSpecifyCorrectAnswerSection: (index, hotspotCoordsInPercentage) => {
295
+ let flattenedArr = hotspotCoordsInPercentage.flat();
296
+ imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon()
297
+ .eq(index)
298
+ .then(($element) => {
299
+ const pointsValue = $element.attr('points');
300
+ const pointsArray = pointsValue.split(',');
301
+ let wholeNumbersArray = pointsArray.map((point) => {
302
+ return Math.floor(Number(point))
303
+ });
304
+ wholeNumbersArray.forEach((actualPointsValue, index) => {
305
+ const expectedPointsValue = flattenedArr[index] * imageWidth / 100;
306
+ cy.wrap(actualPointsValue).should('be.closeTo', expectedPointsValue, 2);
307
+ });
308
+ });
309
+ imageHighlightPage.specifyCorrectAnswerSectionHighlight()
310
+ .eq(index)
311
+ .within(() => {
312
+ imageHighlightPage.highlightNumerationSpecifyCorrectAnswer()
313
+ .should('have.text', index + 1);
314
+ });
315
+ },
316
+
126
317
  //Preview tab
318
+ /**
319
+ * @param {string} fileFormat format of the uploaded file in the highlight region
320
+ * @description this function verifies the attribute of the image has the expected file format
321
+ */
322
+ verifyUploadedImageFormatInPreviewTab: (fileFormat) => {
323
+ imageHighlightPage.imagePreviewTab()
324
+ .should(($element) => {
325
+ const hrefAttributeValue = $element.attr('href');
326
+ expect(hrefAttributeValue).to.include(fileFormat);
327
+ });
328
+ },
329
+
127
330
  verifyImageUploadedPreviewTab: () => {
128
331
  utilities.verifyElementVisibilityState(imageHighlightPage.imagePreviewTab(), 'visible')
129
332
  },
@@ -228,6 +431,16 @@ const steps = {
228
431
  .click();
229
432
  },
230
433
 
434
+ /**
435
+ * @param {number} index of highlight region
436
+ * @description this functions highlights a region in preview tab
437
+ */
438
+ clickOnARegionInPreviewTab: (index) => {
439
+ imageHighlightPage.highlightPolygonPreviewTab()
440
+ .eq(index)
441
+ .click();
442
+ },
443
+
231
444
  /**
232
445
  * @param {number} index of highlight region
233
446
  * @description this functions highlights a region in preview tab
@@ -351,10 +564,103 @@ const steps = {
351
564
  }
352
565
  });
353
566
  },
567
+
568
+ verifyOuterBorderForQuestion: () => {
569
+ imageHighlightPage.imagePreviewTabWrapper()
570
+ .should('have.css', 'border', `1px solid ${css.color.outerBorder}`)
571
+ },
572
+
573
+ verifyOuterBorderOfQuestionPreviewNotExists: () => {
574
+ imageHighlightPage.imagePreviewTabWrapper()
575
+ .should('have.css', 'border')
576
+ .and('match', /0px none/);
577
+ },
354
578
  }
355
579
 
356
580
  const tests = {
357
581
  ...autoScoredScoringPreviewTab.tests,
582
+ ...scoringSectionBaseEditTab.tests,
583
+ ...autoScoredScoringSectionMultiResponseType.tests,
584
+ ...autoScoredSpecifyCorrectAnswerSection.tests,
585
+ ...createQuestionBasePage.tests,
586
+ ...commonComponents.tests,
587
+ ...enableOuterBorderComponent.tests,
588
+ ...autoScoredStudentViewSettings.tests,
589
+
590
+ /**
591
+ * @param {string} scoringType scoring type 'All or nothing| Partial equal weights| Partial different weights'
592
+ * @description this function verifies the contents of Set correct answer section for different scoring types
593
+ */
594
+ verifyContentsOfSpecifyCorrectAnswerSection: () => {
595
+ it(`When user has selected a scoring type then the uploaded image with highlight regions should be displayed in the set correct answer section`, () => {
596
+ imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
597
+ imageHighlightPage.specifyCorrectAnswerSectionHighlight()
598
+ .should('be.visible');
599
+ imageHighlightPage.steps.verifyHighlightRegionNumerationSpecifyCorrectAnswer();
600
+ imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
601
+ imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
602
+ imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(2);
603
+ });
604
+ },
605
+
606
+ /**
607
+ * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
608
+ * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
609
+ * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
610
+ */
611
+ verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
612
+ it('User should be able to select and de-select highlight regions in specify correct answer section', () => {
613
+ imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
614
+ imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
615
+ imageHighlightPage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(0);
616
+ });
617
+
618
+ it(`When the user has removed all the options from the dropzone in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
619
+ imageHighlightPage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(1);
620
+ utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
621
+ utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
622
+ if (accordionName == 'Correct') {
623
+ autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
624
+ .within(() => {
625
+ utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
626
+ });
627
+ } else {
628
+ autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
629
+ .within(() => {
630
+ utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
631
+ });
632
+ };
633
+ });
634
+
635
+ autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
636
+
637
+ it('When the user drops an option in the dropzone, the error message should disappear', () => {
638
+ imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
639
+ imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
640
+ utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
641
+ autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
642
+ });
643
+
644
+ autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
645
+
646
+ it('CSS of \'Correct\' accordion contents', { tags: 'css' }, () => {
647
+ utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon().eq(2), {
648
+ 'stroke': css.color.activeButtons,
649
+ 'stroke-width': '2px'
650
+ });
651
+ utilities.verifyCSS(imageHighlightPage.highlightNumerationSpecifyCorrectAnswer(), {
652
+ 'fill': css.color.activeButtons,
653
+ });
654
+ utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon().eq(0), {
655
+ 'stroke': css.color.activeButtons,
656
+ 'stroke-width': '4px'
657
+ });
658
+ });
659
+
660
+ it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
661
+ cy.checkAccessibility(imageHighlightPage.specifyCorrectAnswerSectionImage());
662
+ });
663
+ }
358
664
  }
359
665
 
360
666
  export const imageHighlightPage = {
@@ -75,6 +75,30 @@ const steps = {
75
75
  ...numberLineCommonComponent.steps,
76
76
  ...layoutSectionComponent.steps,
77
77
 
78
+ /**
79
+ * This function selects tool options
80
+ * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
81
+ */
82
+ selectToolOptions: (toolOptionAriaLabelArray) => {
83
+ toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
84
+ toolOptionAriaLabel = toolOptionAriaLabel.toLowerCase()
85
+ toolsAndControlsComponent.toolOptions(toolOptionAriaLabel)
86
+ .click();
87
+ });
88
+ },
89
+
90
+ /**
91
+ * This function de-selects tool options
92
+ * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
93
+ */
94
+ deselectToolOptions: (toolOptionAriaLabelArray) => {
95
+ toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
96
+ toolOptionAriaLabel = toolOptionAriaLabel.toLowerCase()
97
+ toolsAndControlsComponent.toolOptions(toolOptionAriaLabel)
98
+ .click();
99
+ });
100
+ },
101
+
78
102
  /**
79
103
  * @description This function selects the tool option from graph
80
104
  * @param {string} toolOption aria label of the tool option to be selected
@@ -1113,7 +1137,7 @@ const steps = {
1113
1137
  const originX = graphWidth / 2;
1114
1138
  const originY = graphHeight / 2;
1115
1139
  const y1Pixel = originY - startingPoint * (graphHeight / range);
1116
- const rayArrowHeight = 42;
1140
+ const rayArrowHeight = 18;
1117
1141
  const y2Pixel = direction === 'up' ? rayArrowHeight : graphHeight - rayArrowHeight;
1118
1142
  cy.get(`.ngie-accordion .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
1119
1143
  .should('be.visible');
@@ -1133,7 +1157,7 @@ const steps = {
1133
1157
  const originX = graphWidth / 2;
1134
1158
  const originY = graphHeight / 2;
1135
1159
  const y1Pixel = originY - startingPoint * (graphHeight / range);
1136
- const rayArrowHeight = 42;
1160
+ const rayArrowHeight = 18;
1137
1161
  const y2Pixel = direction === 'up' ? rayArrowHeight : graphHeight - rayArrowHeight;
1138
1162
  cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
1139
1163
  .should('be.visible');
@@ -1154,7 +1178,7 @@ const steps = {
1154
1178
  const originX = graphWidth / 2;
1155
1179
  const originY = graphHeight / 2;
1156
1180
  const y1Pixel = originY - startingPoint * (graphHeight / range);
1157
- const rayArrowHeight = 42;
1181
+ const rayArrowHeight = 18;
1158
1182
  const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
1159
1183
  cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
1160
1184
  .should('have.css', 'stroke', css.color.correctAnswer);
@@ -1174,7 +1198,7 @@ const steps = {
1174
1198
  const originX = graphWidth / 2;
1175
1199
  const originY = graphHeight / 2;
1176
1200
  const y1Pixel = originY - startingPoint * (graphHeight / range);
1177
- const rayArrowHeight = 42;
1201
+ const rayArrowHeight = 18;
1178
1202
  const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
1179
1203
  cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
1180
1204
  .should('have.css', 'stroke', css.color.incorrectAnswer);
@@ -1194,7 +1218,7 @@ const steps = {
1194
1218
  const originX = graphWidth / 2;
1195
1219
  const originY = graphHeight / 2;
1196
1220
  const y1Pixel = originY - startingPoint * (graphHeight / range);
1197
- const rayArrowHeight = 42;
1221
+ const rayArrowHeight = 18;
1198
1222
  const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
1199
1223
  cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
1200
1224
  .should('not.exist');
@@ -1214,7 +1238,7 @@ const steps = {
1214
1238
  const originX = graphWidth / 2;
1215
1239
  const originY = graphHeight / 2;
1216
1240
  const y1Pixel = originY - startingPoint * (graphHeight / range);
1217
- const rayArrowHeight = 42;
1241
+ const rayArrowHeight = 18;
1218
1242
  const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
1219
1243
  cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
1220
1244
  .should('be.visible');
@@ -1234,7 +1258,7 @@ const steps = {
1234
1258
  const originX = graphWidth / 2;
1235
1259
  const originY = graphHeight / 2;
1236
1260
  const y1Pixel = originY - startingPoint * (graphHeight / range);
1237
- const rayArrowHeight = 42;
1261
+ const rayArrowHeight = 18;
1238
1262
  const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
1239
1263
  cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
1240
1264
  .should('have.css', 'stroke', css.color.correctAnswer);
@@ -1254,7 +1278,7 @@ const steps = {
1254
1278
  const originX = graphWidth / 2;
1255
1279
  const originY = graphHeight / 2;
1256
1280
  const y1Pixel = originY - startingPoint * (graphHeight / range);
1257
- const rayArrowHeight = 42;
1281
+ const rayArrowHeight = 18;
1258
1282
  const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
1259
1283
  cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
1260
1284
  .should('not.exist');
@@ -1416,10 +1440,10 @@ const tests = {
1416
1440
  });
1417
1441
  },
1418
1442
 
1419
- /**
1420
- * Verifies the functionality of the number line section in the edit tab.
1421
- * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
1422
- */
1443
+ /**
1444
+ * Verifies the functionality of the number line section in the edit tab.
1445
+ * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
1446
+ */
1423
1447
  verifyDisplayNumberSettingsFunctionalitySpecifyCorrectAnswerSection: (orientation) => {
1424
1448
  const displayNumbersOptions = (orientation === "Horizontal") ? ["Below line", "Above line"] : ["Left of line", "Right of line"];
1425
1449
  const direction = (orientation === "Horizontal") ? "Below" : "Left of";
@@ -1437,10 +1461,10 @@ const tests = {
1437
1461
  });
1438
1462
  },
1439
1463
 
1440
- /**
1441
- * Verifies the functionality of the number line section in the preview tab.
1442
- * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
1443
- */
1464
+ /**
1465
+ * Verifies the functionality of the number line section in the preview tab.
1466
+ * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
1467
+ */
1444
1468
  verifyDisplayNumberSettingsFunctionalityPreviewTab: (orientation) => {
1445
1469
  const displayNumbersOptions = (orientation === "Horizontal") ? ["Below line", "Above line"] : ["Left of line", "Right of line"];
1446
1470
  const direction = (orientation === "Horizontal") ? "Below" : "Left of";