itemengine-cypress-automation 1.0.21 → 1.0.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/cypress/e2e/ILC/AudioResponse/audioResponseAdditionalSettings.js +848 -0
  2. package/cypress/e2e/ILC/AudioResponse/audioResponseEditTabBasicSections.js +1230 -0
  3. package/cypress/e2e/ILC/AudioResponse/audioResponseHeaderSection.js +80 -0
  4. package/cypress/e2e/ILC/AudioResponse/audioResponseMinimalPreviewSection.js +941 -0
  5. package/cypress/e2e/ILC/AudioResponse/audioResponseScoringSection.js +60 -0
  6. package/cypress/e2e/ILC/AudioResponse/audioResponseStandardPreviewSection.js +862 -0
  7. package/package.json +1 -1
package/cypress/e2e/ILC/AudioResponse/audioResponseEditTabBasicSections.js ADDED
@@ -0,0 +1,1230 @@
1
+ import { audioResponsePage } from '../../../pages/audioResponsePage';
2
+ import abortEarlySetup from "../../../support/helpers/abortEarly";
3
+ const css = Cypress.env('css');
4
+
5
+ describe('Create Item page - Audio response: Question Instructions, Audio Recorder Style dropdown, Maximum recorder length, Stop recording if silence is detected after, Customize recorder and playback controls (for student player) Section', () => {
6
+ before(() => {
7
+ cy.loginAs('admin');
8
+ });
9
+
10
+ describe('Question Instructions input field - Edit tab', () => {
11
+ abortEarlySetup();
12
+ before(() => {
13
+ cy.log('Navigating to Audio response question type');
14
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
15
+ });
16
+
17
+ audioResponsePage.tests.verifyQuestionInstructionsInputFieldEditTab();
18
+
19
+ });
20
+
21
+ describe('Question Instructions input field - Preview tab', () => {
22
+ abortEarlySetup();
23
+ before(() => {
24
+ cy.log('Navigating to Audio response question type');
25
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
26
+ });
27
+
28
+ audioResponsePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
29
+ });
30
+
31
+ describe('\'Audio Recorder Style\' dropdown', () => {
32
+ const recordingResponseButtons = [audioResponsePage.startRecordingOptionButton, audioResponsePage.pauseRecordingOptionButton, audioResponsePage.stopRecordingOptionButton, audioResponsePage.recordingCueOptionButton, audioResponsePage.recordingOverlayOptionButton];
33
+ const responsePlaybackButtons = [audioResponsePage.playOptionButton, audioResponsePage.pauseOptionButton, audioResponsePage.seekOptionButton, audioResponsePage.volumeControlOptionButton, audioResponsePage.playbackOverlayOptionButton];
34
+ const dropdownOptions = ['Standard', 'Minimal'];
35
+ abortEarlySetup();
36
+ before(() => {
37
+ cy.log('Navigating to Audio Response question type');
38
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
39
+ });
40
+
41
+ it('CSS of Audio Recorder Style section', { tags: 'css' }, () => {
42
+ audioResponsePage.audioRecorderStyleLabel()
43
+ .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
44
+ audioResponsePage.audioRecorderStyleDropdown()
45
+ .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
46
+ .find('.dropdown-label-text')
47
+ .eq(0)
48
+ .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
49
+ .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
50
+ });
51
+
52
+ //Note: a11y is covered for Audio Recorder Style section in HeaderSection file using verifya11yOfCreateItemWrapperContents
53
+
54
+ it('\'Audio Recorder Style\' label and dropdown should be displayed and in \'Audio Recorder Style\' dropdown \'Standard\' option should be selected by default', () => {
55
+ audioResponsePage.audioRecorderStyleLabel()
56
+ .verifyInnerText('Audio recorder style')
57
+ .should('be.visible');
58
+ audioResponsePage.audioRecorderStyleDropdown()
59
+ .verifyInnerText('Standard')
60
+ .should('be.visible');
61
+ });
62
+
63
+ it('Clicking on \'Audio Recorder Style\' dropdown should open a list of 2 options - Standard, Minimal', () => {
64
+ cy.log('Expanding the Audio recorder style dropdown list');
65
+ audioResponsePage.audioRecorderStyleDropdown()
66
+ .click();
67
+ dropdownOptions.forEach((option, count) => {
68
+ audioResponsePage.audioRecorderStyleListOptions(count)
69
+ .verifyInnerText(option);
70
+ });
71
+ });
72
+
73
+ it('CSS of Audio Recorder Style dropdown in active state', { tags: 'css' }, () => {
74
+ audioResponsePage.audioRecorderStyleListOptions(0)
75
+ .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
76
+ .should('have.css', 'background-color', css.color.liTextSelectedBg);
77
+ audioResponsePage.audioRecorderStyleListOptions(1)
78
+ .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
79
+ .should('have.css', 'background-color', css.color.transparent);
80
+ });
81
+
82
+ it('Accessibility of Audio Recorder Style section in active state', { tags: 'a11y' }, () => {
83
+ cy.checkAccessibility(audioResponsePage.audioRecorderStyleList());
84
+ });
85
+
86
+ it('When the user clicks on the Audio Recorder Style dropdown menu then the dropdown menu should close', () => {
87
+ audioResponsePage.audioRecorderStyleListOptions(0)
88
+ .click();
89
+ audioResponsePage.audioRecorderStyleList()
90
+ .should('not.exist');
91
+ });
92
+
93
+ it('When the user selects \'Standard\' option from Audio Recorder Style dropdown then \'Start recording\', \'Pause recording\', \'Stop recording\', \'Recording cue\' options should be displayed and be selected by default in \'Controls for recording response\' section and \'Play\', \'Pause\', \'Seek\', \'Volume control\' options should be displayed and be selected by default in \'Controls for response playback\' section and \'Recording overlay\' in \'Controls for recording response\' and \'Playback overlay\' options should not be displayed in \'Controls for response playback\' section', () => {
94
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
95
+ audioResponsePage.recordingOverlayOptionButton()
96
+ .should('not.exist');
97
+ audioResponsePage.playbackOverlayOptionButton()
98
+ .should('not.exist');
99
+ recordingResponseButtons.slice(0, 4).forEach((button) => {
100
+ button()
101
+ .should('have.class', 'ngie-toggle-button-selected')
102
+ .and('be.visible')
103
+ .within(() => {
104
+ audioResponsePage.tickIconForOptionButtons()
105
+ .should('be.visible');
106
+ })
107
+ });
108
+ responsePlaybackButtons.slice(0, 4).forEach((button) => {
109
+ button()
110
+ .should('have.class', 'ngie-toggle-button-selected')
111
+ .and('be.visible')
112
+ .within(() => {
113
+ audioResponsePage.tickIconForOptionButtons()
114
+ .should('be.visible');
115
+ })
116
+ });
117
+ });
118
+
119
+ it('CSS of options in \'Customize recorder and playback controls (for student player)\' section', { tags: 'css' }, () => {
120
+ cy.log('CSS of button background and button label')
121
+ audioResponsePage.startRecordingOptionButton()
122
+ .should('have.css', 'background-color', css.color.activeButtons)
123
+ .within(() => {
124
+ audioResponsePage.recorderAndPlaybackControlsOptionButtonLabel()
125
+ .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular);
126
+ });
127
+ cy.log('CSS of tick icon of selected option button');
128
+ audioResponsePage.startRecordingOptionButton()
129
+ .find('[data-name="Icon feather-check"]')
130
+ .should('have.css', 'fill', css.color.activeButtons);
131
+ cy.log('CSS of background of tick icon of selected option button');
132
+ audioResponsePage.startRecordingOptionButton()
133
+ .find('.ngie-toggle-button-tick-icon')
134
+ .should('have.css', 'background-color', css.color.defaultBackground);
135
+ cy.log('CSS of selected option button icon');
136
+ audioResponsePage.startRecordingOptionButton()
137
+ .find('.ngie-toggle-button-icon svg')
138
+ .should('have.css', 'fill', css.color.primaryBtn);
139
+ });
140
+
141
+ it('Accessibility of options in \'Customize recorder and playback controls (for student player)\' section', { tags: 'a11y' }, () => {
142
+ cy.checkAccessibility(audioResponsePage.customizeRecorderAndPlaybackControlsSection());
143
+ });
144
+
145
+ it('When the user selects \'Minimal\' option from Audio Recorder Style dropdown then \'Recording overlay\' should be displayed in selected state in \'Controls for recording response\' section and \'Playback overlay\' should be displayed in selected state in \'Controls for response playback\' section', () => {
146
+ cy.log('Pre-step : Switching to Minimal recorder style');
147
+ audioResponsePage.steps.switchToMinimalRecorderStyle();
148
+ audioResponsePage.recordingOverlayOptionButton()
149
+ .should('have.class', 'ngie-toggle-button-selected')
150
+ .and('be.visible')
151
+ .within(() => {
152
+ audioResponsePage.tickIconForOptionButtons()
153
+ .should('be.visible');
154
+ })
155
+ audioResponsePage.playbackOverlayOptionButton()
156
+ .should('have.class', 'ngie-toggle-button-selected')
157
+ .and('be.visible')
158
+ .within(() => {
159
+ audioResponsePage.tickIconForOptionButtons()
160
+ .should('be.visible');
161
+ })
162
+ });
163
+
164
+ it('User should be able to deselect all options from \'Controls for recordings response\' and \'Controls for response playback\' section', () => {
165
+ recordingResponseButtons.forEach((button) => {
166
+ button().click()
167
+ .should('have.class', 'ngie-toggle-button-not-selected')
168
+ .within(() => {
169
+ audioResponsePage.tickIconForOptionButtons()
170
+ .should('not.be.visible');
171
+ });
172
+ });
173
+ responsePlaybackButtons.forEach((button) => {
174
+ button().click()
175
+ .should('have.class', 'ngie-toggle-button-not-selected')
176
+ .within(() => {
177
+ audioResponsePage.tickIconForOptionButtons()
178
+ .should('not.be.visible');
179
+ });
180
+ });
181
+ });
182
+
183
+ it('CSS of deselected options in \'Customize recorder and playback controls (for student player)\' section', { tags: 'css' }, () => {
184
+ cy.log('CSS of deselected option button label and background')
185
+ audioResponsePage.startRecordingOptionButton()
186
+ .should('have.css', 'background-color', css.color.defaultBackground)
187
+ .and('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
188
+ .within(() => {
189
+ audioResponsePage.recorderAndPlaybackControlsOptionButtonLabel()
190
+ .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.regular);
191
+ });
192
+
193
+ cy.log('CSS of deselected option button icon')
194
+ audioResponsePage.startRecordingOptionButton()
195
+ .find('.ngie-toggle-button-icon svg')
196
+ .should('have.css', 'fill', css.color.secondaryBtn);
197
+ });
198
+
199
+ it('Accessibility of deselected options in \'Customize recorder and playback controls (for student player)\' section', { tags: 'a11y' }, () => {
200
+ cy.checkAccessibility(audioResponsePage.customizeRecorderAndPlaybackControlsSection());
201
+ });
202
+ });
203
+
204
+ describe('\'Maximum recorder length\': Edit tab ', () => {
205
+ abortEarlySetup();
206
+ before(() => {
207
+ cy.log('Navigating to Audio Response question type');
208
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
209
+ });
210
+
211
+ audioResponsePage.tests.verifyMaximumRecorderLengthLabelAndInputField();
212
+
213
+ audioResponsePage.tests.verifyMaximumRecorderLengthSectionCSS();
214
+
215
+ //Note: a11y is covered for Maximum recorder length section in HeaderSection file using verifyA11yOfCreateItemWrapperContents
216
+
217
+ audioResponsePage.tests.verifyMaximumRecorderLengthInputFieldErrorMessages();
218
+
219
+ audioResponsePage.tests.verifyMaximumRecorderLengthCharacterAcceptanceCriteria();
220
+
221
+ it('When user tries to add a value greater than 3600 it should be automatically set back to 3600 and should not allow to add greater than set value', () => {
222
+ audioResponsePage.steps.setMaximumRecorderLength('9999');
223
+ audioResponsePage.steps.verifyMaximumRecorderLength('3600');
224
+ });
225
+
226
+ it('When the maximum recorder length value is updated in edit tab, it should be reflected in the preview tab', () => {
227
+ audioResponsePage.steps.setMaximumRecorderLength('3600');
228
+ cy.log('Switching to Preview tab');
229
+ audioResponsePage.steps.switchToPreviewTab();
230
+ audioResponsePage.previewMaxRecordTime()
231
+ .verifyInnerText('1:00:00')
232
+ });
233
+ });
234
+
235
+ describe('\'Maximum recorder length\': Preview tab', () => {
236
+ abortEarlySetup();
237
+ before(() => {
238
+ cy.log('Navigating to audio response question type');
239
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
240
+ audioResponsePage.steps.switchToPreviewTab();
241
+ });
242
+
243
+ it('By default, maximum recorder length (15 minutes) should be displayed in minutes(mm:ss) format', () => {
244
+ audioResponsePage.previewMaxRecordTime()
245
+ .verifyInnerText('15:00')
246
+ });
247
+
248
+ it('When the maximum recorder length value is updated in edit tab, it should be reflected in the preview tab', () => {
249
+ audioResponsePage.steps.switchToEditTab();
250
+ audioResponsePage.steps.setMaximumRecorderLength('3600');
251
+ cy.log('Switching to Preview tab');
252
+ audioResponsePage.steps.switchToPreviewTab();
253
+ audioResponsePage.previewMaxRecordTime()
254
+ .verifyInnerText('1:00:00')
255
+ });
256
+ });
257
+
258
+ describe('\'Stop recording if silence is detected after\' Section', () => {
259
+ abortEarlySetup();
260
+ before(() => {
261
+ cy.log('Navigating to Audio Response question type');
262
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
263
+ });
264
+
265
+ it('\'Stop recording if silence is detected after\' label, input field and \'Secs\' text should be displayed. By default \'Stop recording if silence is detected after\' input field should be empty', () => {
266
+ audioResponsePage.stopRecordingIfSilenceIsDetectedLabel()
267
+ .verifyInnerText('Stop recording if silence is detected after')
268
+ .should('be.visible');
269
+ audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
270
+ .should('be.visible')
271
+ .and('have.attr', 'value', '');
272
+ audioResponsePage.stopRecordingIfSilenceIsDetectedInputFieldSecsSuffix()
273
+ .verifyInnerText('Secs')
274
+ .should('be.visible');
275
+ });
276
+
277
+ it('CSS of \'Stop recording if silence is detected after\' section', { tags: 'css' }, () => {
278
+ audioResponsePage.stopRecordingIfSilenceIsDetectedLabel()
279
+ .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
280
+ audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
281
+ .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
282
+ audioResponsePage.stopRecordingIfSilenceIsDetectedInputFieldSecsSuffix()
283
+ .parents('.stop-recording-on-silence-time-input-field')
284
+ .find('.css-igs3ac')
285
+ .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
286
+ });
287
+
288
+ //Note: a11y is covered for Stop recording if silence is detected after section in HeaderSection file using verifya11yOfCreateItemWrapperContents
289
+
290
+ it('When the user has set \'Stop recording if silence is detected after\' value to \'0\' (zero) then a validation text \'Error: Value must be greater than 0 secs.\' should be displayed and once the user updates the \'Stop recording if silence is detected after\' value the validation text should disappear. User should be able to add only numeric values and should not able to add decimal points', () => {
291
+ audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('0');
292
+ audioResponsePage.errorMessage()
293
+ .verifyInnerText('Error: Value must be greater than 0 secs.');
294
+ audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('150');
295
+ audioResponsePage.errorMessage()
296
+ .should('not.exist');
297
+ audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('.10.0');
298
+ audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
299
+ .should('have.attr', 'value', '100');
300
+ audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('!@#abcde236');
301
+ audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
302
+ .should('have.attr', 'value', '236');
303
+ });
304
+
305
+ it('CSS of \'Stop recording if silence is detected after\' with error message \'Error: Value must be greater than 0 secs.\'', () => {
306
+ cy.log('Pre-step: Setting Stop recording if silence is detected after to 0');
307
+ audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('0');
308
+ audioResponsePage.errorMessage()
309
+ .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
310
+ cy.log('Post-step: Setting Stop recording if silence is detected after to 100');
311
+ audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('100');
312
+ });
313
+
314
+ it('Accessibility of \'Stop recording if silence is detected after\' when \'Error: Value must be greater than 0 secs.\' is displayed', () => {
315
+ cy.log('Pre-step: Setting Stop recording if silence is detected after to 0');
316
+ audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('0');
317
+ cy.checkAccessibility(audioResponsePage.errorMessage());
318
+ cy.log('Post-step: Setting Stop recording if silence is detected after to 100');
319
+ audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('100');
320
+ });
321
+
322
+ it('When user focuses in \'Stop recording if silence is detected after\' and focuses out without entering any value, or entering a value greater than \'Maximum recorder length\' input field, no error should be displayed', () => {
323
+ audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
324
+ .clear()
325
+ .blur();
326
+ audioResponsePage.errorMessage()
327
+ .should('not.exist');
328
+ audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('4000');
329
+ audioResponsePage.errorMessage()
330
+ .should('not.exist');
331
+ });
332
+
333
+ it('When silence is detected for more than value set in \'Stop recording if silence is detected after\' input field during recording, the recorder should stop automatically by the system and the recording should get saved', () => {
334
+ audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('5');
335
+ cy.log('Switching to Preview tab');
336
+ audioResponsePage.steps.switchToPreviewTab();
337
+ audioResponsePage.standardPreviewStartRecordingButton()
338
+ .click();
339
+ audioResponsePage.steps.waitForRecordingToStartStandardPreview();
340
+ audioResponsePage.standardPreviewPlayerHelpText()
341
+ .should('be.visible')
342
+ .verifyInnerText('Your response has been recorded');
343
+ audioResponsePage.previewPlayPlaybackButton()
344
+ .should('not.have.attr', 'disabled');
345
+ audioResponsePage.standardPreviewRecordTime()
346
+ .verifyInnerText('00:05');
347
+ });
348
+ });
349
+
350
+ describe('\'Customize recorder and playback controls (for student player)\' Section', () => {
351
+ abortEarlySetup();
352
+ before(() => {
353
+ cy.log('Navigating to Audio Response question type');
354
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
355
+ });
356
+
357
+ it('\'Customize recorder and playback controls (for student player)\' accordion should be displayed along with chevron icon and by default it should be in collapsed state', () => {
358
+ audioResponsePage.customizeRecorderAndPlaybackControlsAccordionLabel()
359
+ .verifyInnerText('Customize recorder and playback controls (for student player)')
360
+ .should('be.visible');
361
+ audioResponsePage.customizeRecorderAndPlaybackControlsAccordionChevronIcon()
362
+ .should('be.visible');
363
+ audioResponsePage.customizeRecorderAndPlaybackControlsAccordion()
364
+ .should('have.attr', 'aria-expanded', 'false')
365
+ .should('be.visible');
366
+ });
367
+
368
+ it('User should be able to expand and collapse \'Customize recorder and playback controls (for student player)\' accordion', () => {
369
+ cy.log('Expanding \'Customize recorder and playback controls (for student player)\' accordion');
370
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
371
+ cy.log('Collapsing \'Customize recorder and playback controls (for student player)\' accordion');
372
+ audioResponsePage.steps.collapseCustomizeRecorderAndPlaybackControlsAccordion();
373
+ });
374
+
375
+ it('\'Controls for recordings response\' and \'Controls for response playback\' label should be displayed', () => {
376
+ cy.log('Pre-step : Expanding \'Customize recorder and playback controls (for student player)\' accordion');
377
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
378
+ audioResponsePage.controlsForRecordingResponseLabel()
379
+ .verifyInnerText('Controls for recording response')
380
+ .should('be.visible');
381
+ audioResponsePage.controlsForResponsePlaybackLabel()
382
+ .verifyInnerText('Controls for response playback')
383
+ .should('be.visible');
384
+ });
385
+
386
+ it('CSS of \'Customize recorder and playback controls (for student player)\' section in collapsed state', { tags: 'css' }, () => {
387
+ audioResponsePage.customizeRecorderAndPlaybackControlsAccordionLabel()
388
+ .verifyCSS(css.color.accordionLabel, css.fontSize.default, css.fontWeight.bold);
389
+ audioResponsePage.customizeRecorderAndPlaybackControlsAccordionChevronIcon()
390
+ .find('path')
391
+ .should('have.css', 'fill', css.color.accordionLabel);
392
+ });
393
+
394
+ //Note: a11y is covered for Customize recorder and playback controls (for student player) section in HeaderSection file using verifya11yOfCreateItemWrapperContents
395
+ });
396
+
397
+ describe('Controls for recording response- Start recording', () => {
398
+ abortEarlySetup();
399
+ before(() => {
400
+ cy.log('Navigating to Audio Response question type');
401
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
402
+ cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion');
403
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
404
+ });
405
+
406
+ it('In standard mode, when the start recording option is selected the start recording icon button should be enabled in the preview tab', () => {
407
+ cy.log('Pre-step: Switching to Preview tab');
408
+ audioResponsePage.steps.switchToPreviewTab();
409
+ audioResponsePage.standardPreviewStartRecordingButton()
410
+ .should('be.enabled')
411
+ .and('be.visible');
412
+ });
413
+
414
+ it('In standard mode, when the start recording option is deselected the start recording icon button should be disabled in the preview tab', () => {
415
+ cy.log('Pre-step: Switching to Edit tab');
416
+ audioResponsePage.steps.switchToEditTab();
417
+ audioResponsePage.startRecordingOptionButton()
418
+ .click()
419
+ .should('have.class', 'ngie-toggle-button-not-selected')
420
+ cy.log('Switching to Preview tab');
421
+ audioResponsePage.steps.switchToPreviewTab();
422
+ audioResponsePage.standardPreviewStartRecordingButton()
423
+ .should('be.visible')
424
+ .and('be.disabled');
425
+ });
426
+
427
+ it('In minimal mode, when the start recording option is selected the record icon button should be enabled in the preview tab', () => {
428
+ cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown');
429
+ audioResponsePage.steps.switchToEditTab();
430
+ audioResponsePage.steps.switchToMinimalRecorderStyle();
431
+ audioResponsePage.startRecordingOptionButton()
432
+ .click()
433
+ .should('have.class', 'ngie-toggle-button-selected')
434
+ cy.log('Switching to Preview tab');
435
+ audioResponsePage.steps.switchToPreviewTab();
436
+ audioResponsePage.minimalPreviewRecordButton()
437
+ .should('be.visible')
438
+ .and('be.enabled');
439
+ });
440
+
441
+ it('In minimal mode, when the start recording option is deselected the record icon button should be disabled in the preview tab', () => {
442
+ cy.log('Pre-step: Switching to Edit tab');
443
+ audioResponsePage.steps.switchToEditTab();
444
+ audioResponsePage.startRecordingOptionButton()
445
+ .click()
446
+ .should('have.class', 'ngie-toggle-button-not-selected')
447
+ cy.log('Switching to Preview tab');
448
+ audioResponsePage.steps.switchToPreviewTab();
449
+ audioResponsePage.minimalPreviewRecordButton()
450
+ .should('be.visible')
451
+ .and('be.disabled');
452
+ });
453
+ });
454
+
455
+ describe('Controls for recording response- Pause recording', () => {
456
+ abortEarlySetup();
457
+ before(() => {
458
+ cy.log('Navigating to Audio Response question type');
459
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
460
+ cy.log('Setting Maximum recorder length to 5 seconds');
461
+ audioResponsePage.steps.setMaximumRecorderLength(5);
462
+ cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion');
463
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
464
+ });
465
+
466
+ it('In standard mode, when the \'Pause recording\' option is selected the pause icon button should be enabled in the preview tab', () => {
467
+ cy.log('Pre-step: Switching to Preview tab and starting the recording');
468
+ audioResponsePage.steps.switchToPreviewTab();
469
+ audioResponsePage.standardPreviewStartRecordingButton()
470
+ .click();
471
+ audioResponsePage.standardPreviewPauseRecordingButton()
472
+ .should('be.visible')
473
+ .and('be.enabled');
474
+ });
475
+
476
+ it('In standard mode, when the pause recording option is deselected the pause recording icon button should be disabled in the preview tab and user should not be able to pause recording', () => {
477
+ cy.log('Pre-step: Switching to Edit tab, deselecting pause recording option button and switching back to preview tab');
478
+ audioResponsePage.steps.switchToEditTab();
479
+ audioResponsePage.pauseRecordingOptionButton()
480
+ .click()
481
+ .should('have.class', 'ngie-toggle-button-not-selected')
482
+ audioResponsePage.steps.switchToPreviewTab();
483
+ audioResponsePage.standardPreviewStartRecordingButton()
484
+ .click();
485
+ audioResponsePage.standardPreviewPauseRecordingButton()
486
+ .should('be.visible')
487
+ .and('be.disabled');
488
+ audioResponsePage.standardPreviewPlayerHelpText()
489
+ .verifyInnerText('Your response has been recorded');
490
+ });
491
+
492
+ it('In minimal mode, when the pause recording option is selected the pause recording icon button should be enabled in the preview tab', () => {
493
+ cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown');
494
+ audioResponsePage.steps.switchToEditTab();
495
+ audioResponsePage.steps.switchToMinimalRecorderStyle();
496
+ audioResponsePage.pauseRecordingOptionButton()
497
+ .click()
498
+ .should('have.class', 'ngie-toggle-button-selected')
499
+ cy.log('Switching to Preview tab and starting a recording');
500
+ audioResponsePage.steps.switchToPreviewTab();
501
+ audioResponsePage.minimalPreviewRecordButton()
502
+ .click();
503
+ audioResponsePage.minimalPreviewPauseRecordingButton()
504
+ .should('be.visible')
505
+ .and('be.enabled');
506
+ });
507
+
508
+ it('In minimal mode, when the pause recording option is deselected the pause recording icon button should be disabled in the preview tab. User should not be able to pause recording', () => {
509
+ cy.log('Pre-step: Switching to Edit tab, deselecting Pause recording option button, switching back to preview tab and starting a recording')
510
+ audioResponsePage.steps.switchToEditTab();
511
+ audioResponsePage.pauseRecordingOptionButton()
512
+ .click()
513
+ .should('have.class', 'ngie-toggle-button-not-selected')
514
+ audioResponsePage.steps.switchToPreviewTab();
515
+ audioResponsePage.minimalPreviewRecordButton()
516
+ .click();
517
+ audioResponsePage.minimalPreviewPauseRecordingButton()
518
+ .should('be.visible')
519
+ .and('be.disabled');
520
+ audioResponsePage.minimalPreviewRecorderHelpText()
521
+ .should('have.text', 'Your response has been recorded');
522
+ });
523
+ });
524
+
525
+ describe('Controls for recording response- Stop recording', () => {
526
+ abortEarlySetup();
527
+ before(() => {
528
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
529
+ cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion');
530
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
531
+ });
532
+
533
+ it('In standard mode, when the \'Stop recording\' option is selected the stop recording icon button should be enabled in the preview tab', () => {
534
+ cy.log('Pre-step: Switching to Preview tab')
535
+ audioResponsePage.steps.switchToPreviewTab();
536
+ audioResponsePage.standardPreviewStartRecordingButton()
537
+ .click();
538
+ audioResponsePage.standardPreviewStopRecordingButton()
539
+ .should('be.visible')
540
+ .and('be.enabled');
541
+ });
542
+
543
+ it('In standard mode, when the stop recording option is deselected the stop recording icon button should be disabled in the preview tab and user should not able to stop recording until the \'Maximum recorder length\' is recorded', () => {
544
+ cy.log('Pre-step: Switching to Edit tab');
545
+ audioResponsePage.steps.switchToEditTab();
546
+ audioResponsePage.steps.setMaximumRecorderLength('5');
547
+ audioResponsePage.stopRecordingOptionButton()
548
+ .click()
549
+ .should('have.class', 'ngie-toggle-button-not-selected')
550
+ cy.log('Switching to Preview tab');
551
+ audioResponsePage.steps.switchToPreviewTab();
552
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
553
+ audioResponsePage.standardPreviewStartRecordingButton()
554
+ .click();
555
+ audioResponsePage.standardPreviewStopRecordingButton()
556
+ .should('be.visible')
557
+ .and('be.disabled');
558
+ audioResponsePage.standardPreviewPlayerHelpText()
559
+ .verifyInnerText('Your response has been recorded');
560
+ });
561
+
562
+ it('In minimal mode, when the stop recording option is selected the stop icon button should be enabled in the preview tab', () => {
563
+ cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown');
564
+ audioResponsePage.steps.switchToEditTab();
565
+ audioResponsePage.steps.switchToMinimalRecorderStyle();
566
+ audioResponsePage.stopRecordingOptionButton()
567
+ .click()
568
+ .should('have.class', 'ngie-toggle-button-selected')
569
+ cy.log('Switching to Preview tab');
570
+ audioResponsePage.steps.switchToPreviewTab();
571
+ audioResponsePage.minimalPreviewRecordButton()
572
+ .click();
573
+ audioResponsePage.minimalPreviewStopRecordingButton()
574
+ .should('be.visible')
575
+ .and('be.enabled');
576
+ });
577
+
578
+ it('In minimal mode, when the stop recording option is deselected the stop button should be disabled in the preview tab and user should not able to stop recording until the \'Maximum recorder length\' is recorded', () => {
579
+ cy.log('Pre-step: Switching to Edit tab');
580
+ audioResponsePage.steps.switchToEditTab();
581
+ audioResponsePage.stopRecordingOptionButton()
582
+ .click();
583
+ cy.log('Switching to Preview tab');
584
+ audioResponsePage.steps.switchToPreviewTab();
585
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
586
+ audioResponsePage.minimalPreviewRecordButton()
587
+ .click();
588
+ audioResponsePage.minimalPreviewStopRecordingButton()
589
+ .should('be.visible')
590
+ .should('be.disabled');
591
+ audioResponsePage.minimalPreviewRecorderHelpText()
592
+ .should('have.text', 'Your response has been recorded');
593
+ });
594
+ });
595
+
596
+ //TODO : revisit later, as we are unable to detect cue in cypress
597
+ describe.skip('Controls for recording response- Recording cue', () => {
598
+ abortEarlySetup();
599
+ before(() => {
600
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
601
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
602
+ });
603
+
604
+ it('In standard mode, when the \'Recording cue\' option is selected and in preview tab when recording is initiated, a beep sound should play', () => {
605
+ });
606
+
607
+ it('In standard mode, when the \'Recording cue\' option is deselected and in preview tab when recording is initiated, a beep sound should not play', () => {
608
+ });
609
+
610
+ it('In minimal mode, when the \'Recording cue\' option is selected and in preview tab when recording is initiated, a beep sound should play', () => {
611
+ });
612
+
613
+ it('In minimal mode, when the \'Recording cue\' option is deselected and in preview tab when recording is initiated, a beep sound should not play', () => {
614
+ });
615
+ });
616
+
617
+ describe('Controls for recording response- Recording overlay', () => {
618
+ abortEarlySetup();
619
+ before(() => {
620
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
621
+ cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion and switching to Minimal recorder style');
622
+ audioResponsePage.steps.switchToMinimalRecorderStyle();
623
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
624
+ });
625
+
626
+ it('In minimal mode, when the \'Recording overlay\' option is selected, recording overlay should be displayed once recording is started in the preview tab', () => {
627
+ cy.log('Pre-step: Switching to Preview tab and starting the recording');
628
+ audioResponsePage.steps.switchToPreviewTab();
629
+ audioResponsePage.minimalPreviewRecordButton()
630
+ .click();
631
+ audioResponsePage.minimalPreviewRecordingOverlay()
632
+ .should('be.visible');
633
+ });
634
+
635
+ it('In minimal mode, when the recording overlay option is deselected, overlay should not be displayed', () => {
636
+ cy.log('Pre-step: Switching to Edit tab, deselecting recording overlay option button and switching back to preview tab to start a recording');
637
+ audioResponsePage.steps.switchToEditTab();
638
+ audioResponsePage.recordingOverlayOptionButton()
639
+ .click()
640
+ .should('have.class', 'ngie-toggle-button-not-selected')
641
+ audioResponsePage.steps.switchToPreviewTab();
642
+ audioResponsePage.minimalPreviewRecordButton()
643
+ .click();
644
+ audioResponsePage.minimalPreviewRecordingOverlay()
645
+ .should('not.exist');
646
+ });
647
+ });
648
+
649
+ describe('Controls for response playback- Play', () => {
650
+ abortEarlySetup();
651
+ before(() => {
652
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
653
+ cy.log('Setting \'Maximum record length\' to 5 seconds, so that I can record for a duration of 5 seconds without using cy.wait(5000)');
654
+ audioResponsePage.steps.setMaximumRecorderLength('5');
655
+ cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion')
656
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
657
+ });
658
+
659
+ it('In standard mode, when the \'Play\' option is selected the play icon button should be enabled in the playback player of preview tab', () => {
660
+ cy.log('Pre-step: Switching to Preview tab');
661
+ audioResponsePage.steps.switchToPreviewTab();
662
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
663
+ audioResponsePage.standardPreviewStartRecordingButton()
664
+ .click();
665
+ audioResponsePage.steps.waitForRecordingToStartStandardPreview();
666
+ audioResponsePage.standardPreviewPlayerHelpText()
667
+ .should('be.visible');
668
+ audioResponsePage.previewPlayPlaybackButton()
669
+ .should('be.enabled');
670
+ });
671
+
672
+ it('In standard mode, when the play option is deselected the play icon button should be disabled in the preview tab and player should not able to playback the recording', () => {
673
+ cy.log('Pre-step : Switching to Edit tab and deselecting Play button');
674
+ audioResponsePage.steps.switchToEditTab();
675
+ audioResponsePage.playOptionButton()
676
+ .click()
677
+ .should('have.class', 'ngie-toggle-button-not-selected')
678
+ cy.log('Switching to Preview tab');
679
+ audioResponsePage.steps.switchToPreviewTab();
680
+ audioResponsePage.standardPreviewStartRecordingButton()
681
+ .click();
682
+ audioResponsePage.standardPreviewPlayerHelpText()
683
+ .verifyInnerText('Your response has been recorded');
684
+ audioResponsePage.previewPlayPlaybackButton()
685
+ .should('be.visible')
686
+ .and('be.disabled');
687
+ });
688
+
689
+ it('In minimal mode, when the play option is selected the playback icon button should be enabled in the preview tab', () => {
690
+ cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown, and switching back to preview tab');
691
+ audioResponsePage.steps.switchToEditTab();
692
+ audioResponsePage.steps.switchToMinimalRecorderStyle();
693
+ audioResponsePage.playOptionButton()
694
+ .click()
695
+ .should('have.class', 'ngie-toggle-button-selected')
696
+ audioResponsePage.steps.switchToPreviewTab();
697
+ audioResponsePage.minimalPreviewRecordButton()
698
+ .click();
699
+ audioResponsePage.minimalPreviewPlaybackButton()
700
+ .should('be.enabled');
701
+ });
702
+
703
+ it('In minimal mode, when the play option is deselected the playback button should be disabled in the preview tab and user should not able to playback the recording', () => {
704
+ cy.log('Pre-step: Switching to Edit tab');
705
+ audioResponsePage.steps.switchToEditTab();
706
+ audioResponsePage.playOptionButton()
707
+ .click()
708
+ .should('have.class', 'ngie-toggle-button-not-selected')
709
+ cy.log('Switching to Preview tab');
710
+ audioResponsePage.steps.switchToPreviewTab();
711
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
712
+ audioResponsePage.minimalPreviewRecordButton()
713
+ .click();
714
+ audioResponsePage.minimalPreviewRecorderHelpText()
715
+ .should('have.text', 'Your response has been recorded');
716
+ audioResponsePage.minimalPreviewPlaybackButton()
717
+ .should('be.visible')
718
+ .and('be.disabled');
719
+ });
720
+ });
721
+
722
+ describe('Controls for response playback- Pause', () => {
723
+ abortEarlySetup();
724
+ before(() => {
725
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
726
+ cy.log('Setting \'Maximum record length\' to 5 seconds, so that I can record for a duration of 5 seconds without using cy.wait(5000)');
727
+ audioResponsePage.steps.setMaximumRecorderLength('5');
728
+ cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion');
729
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
730
+ });
731
+
732
+ it('In standard mode, when the \'Pause\' option is selected the pause icon button should be enabled in the preview tab', () => {
733
+ cy.log('Pre-step: Switching to Preview tab');
734
+ audioResponsePage.steps.switchToPreviewTab();
735
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
736
+ audioResponsePage.standardPreviewStartRecordingButton()
737
+ .click();
738
+ audioResponsePage.steps.waitForRecordingToStartStandardPreview();
739
+ audioResponsePage.standardPreviewPlayerHelpText()
740
+ .should('be.visible');
741
+ audioResponsePage.previewPlayPlaybackButton()
742
+ .click();
743
+ audioResponsePage.previewPausePlaybackButton()
744
+ .should('be.enabled');
745
+ });
746
+
747
+ it('In standard mode, when the pause option is deselected the pause icon button should be disabled in the preview tab and player should not able to paused recorded response', () => {
748
+ cy.log('Pre-step: Switching to Edit tab');
749
+ audioResponsePage.steps.switchToEditTab();
750
+ audioResponsePage.pauseOptionButton()
751
+ .click()
752
+ .should('have.class', 'ngie-toggle-button-not-selected')
753
+ cy.log('Switching to Preview tab');
754
+ audioResponsePage.steps.switchToPreviewTab();
755
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
756
+ audioResponsePage.standardPreviewStartRecordingButton()
757
+ .click();
758
+ audioResponsePage.previewPlayPlaybackButton()
759
+ .click();
760
+ audioResponsePage.previewPausePlaybackButton()
761
+ .should('be.visible')
762
+ .and('be.disabled');
763
+ });
764
+
765
+ it('In minimal mode, when the pause option is selected the pause icon button should be enabled in the preview tab', () => {
766
+ cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown');
767
+ audioResponsePage.steps.switchToEditTab();
768
+ audioResponsePage.steps.switchToMinimalRecorderStyle();
769
+ audioResponsePage.pauseOptionButton()
770
+ .click()
771
+ .should('have.class', 'ngie-toggle-button-selected')
772
+ cy.log('Switching to Preview tab');
773
+ audioResponsePage.steps.switchToPreviewTab();
774
+ audioResponsePage.minimalPreviewRecordButton()
775
+ .click();
776
+ audioResponsePage.minimalPreviewRecorderHelpText()
777
+ .should('have.text', 'Your response has been recorded');
778
+ audioResponsePage.minimalPreviewPlaybackButton()
779
+ .click();
780
+ audioResponsePage.previewPausePlaybackButton()
781
+ .should('be.enabled');
782
+ });
783
+
784
+ it('In minimal mode, when the pause option is deselected the pause icon button should be disabled in the preview tab and player should not able to paused recorded response', () => {
785
+ cy.log('Pre-step: Switching to Edit tab');
786
+ audioResponsePage.steps.switchToEditTab();
787
+ audioResponsePage.pauseOptionButton()
788
+ .click()
789
+ .should('have.class', 'ngie-toggle-button-not-selected')
790
+ cy.log('Switching to Preview tab');
791
+ audioResponsePage.steps.switchToPreviewTab();
792
+ audioResponsePage.minimalPreviewRecordButton()
793
+ .click();
794
+ audioResponsePage.minimalPreviewRecorderHelpText()
795
+ .should('have.text', 'Your response has been recorded');
796
+ audioResponsePage.minimalPreviewPlaybackButton()
797
+ .click();
798
+ audioResponsePage.previewPausePlaybackButton()
799
+ .should('be.visible')
800
+ .and('be.disabled');
801
+ });
802
+ });
803
+
804
+ describe('Controls for response playback- Seek', () => {
805
+ abortEarlySetup();
806
+ before(() => {
807
+ cy.log('Navigating to Audio Response question type');
808
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
809
+ cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion');
810
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
811
+ cy.log('Setting \'Maximum record length\' to 5 seconds, so that I can record for a duration of 5 seconds without using cy.wait(5000)');
812
+ audioResponsePage.steps.setMaximumRecorderLength('5');
813
+ });
814
+
815
+ //TODO: Verify outer-circle on hover of Progress bar slider
816
+ it('In standard mode, when the \'Seek\' option is selected the seek functionality should be enabled in the preview tab user should be able to seek the audio from the progress bar and waveform', () => {
817
+ let actualAudioSeekedInPercent = 50
818
+ cy.log('Pre-step : Switching to Preview tab');
819
+ audioResponsePage.steps.switchToPreviewTab();
820
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
821
+ audioResponsePage.standardPreviewStartRecordingButton()
822
+ .click();
823
+ audioResponsePage.steps.waitForRecordingToStartStandardPreview();
824
+ audioResponsePage.standardPreviewPlayerHelpText()
825
+ .should('be.visible');
826
+ audioResponsePage.previewPlayPlaybackButton()
827
+ .click();
828
+ audioResponsePage.steps.waitForPlaybackToBeginStandardPreview();
829
+ audioResponsePage.previewPausePlaybackButton()
830
+ .click();
831
+ cy.log('Clicking at the middle of the progress bar to seek till 50% of the recording');
832
+ audioResponsePage.previewPlaybackProgressBar()
833
+ .click();
834
+ audioResponsePage.previewPlaybackSlider()
835
+ .should('have.attr', 'value', actualAudioSeekedInPercent);
836
+ audioResponsePage.previewWaveformTotalWidth()
837
+ .then(($totalWidth) => {
838
+ const totalWidth = $totalWidth[0].clientWidth
839
+ audioResponsePage.previewWaveformCurrentPositionWidth()
840
+ .then(($currWidth) => {
841
+ const currentWaveFormWidth = $currWidth[0].clientWidth
842
+ const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
843
+ expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 1)
844
+ });
845
+ });
846
+ cy.log('Clicking on the waveform to seek till 25% of the recording');
847
+ audioResponsePage.previewPlaybackWaveform()
848
+ .then(($waveformDimensions) => {
849
+ const x = ($waveformDimensions[0].clientWidth) / 4
850
+ const y = ($waveformDimensions[0].clientHeight) / 2
851
+ audioResponsePage.previewPlaybackWaveform()
852
+ .click(x, y);
853
+ });
854
+ cy.log('Checking value of progress bar after seeking on waveform');
855
+ audioResponsePage.previewPlaybackSlider()
856
+ .then(($val) => {
857
+ actualAudioSeekedInPercent = 25
858
+ const value = $val[0].value
859
+ expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 1)
860
+ });
861
+ audioResponsePage.previewWaveformTotalWidth()
862
+ .then(($totalWidth) => {
863
+ actualAudioSeekedInPercent = 25
864
+ const totalWidth = $totalWidth[0].clientWidth
865
+ audioResponsePage.previewWaveformCurrentPositionWidth()
866
+ .then(($currWidth) => {
867
+ const currentWaveFormWidth = $currWidth[0].clientWidth
868
+ const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
869
+ expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 1)
870
+ });
871
+ });
872
+ audioResponsePage.previewPlaybackSlider()
873
+ .should('be.visible');
874
+ audioResponsePage.previewPlaybackWaveform()
875
+ .realHover();
876
+ audioResponsePage.waveformCursor()
877
+ .should('be.visible');
878
+ cy.get('body')
879
+ .realHover({ position: 'topLeft' });
880
+ audioResponsePage.waveformCursor()
881
+ .should('not.be.visible');
882
+ });
883
+
884
+ it('In standard mode, when the \'Seek\' option is deselected, the progress bar should not have a slider handle and waveform should not have cursor if user hover on it and user should not be able to seek the audio from the progress bar and waveform', () => {
885
+ let actualAudioSeekedInPercent = 25
886
+ cy.log('Pre-step: Switching to Edit tab, deselecting \'Seek\' button, switching back to Preview tab and saving a record response');
887
+ audioResponsePage.steps.switchToEditTab();
888
+ audioResponsePage.seekOptionButton()
889
+ .click()
890
+ .should('have.class', 'ngie-toggle-button-not-selected')
891
+ audioResponsePage.steps.switchToPreviewTab();
892
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
893
+ audioResponsePage.standardPreviewStartRecordingButton()
894
+ .click();
895
+ audioResponsePage.standardPreviewPlayerHelpText()
896
+ .verifyInnerText('Your response has been recorded');
897
+ audioResponsePage.previewPlayPlaybackButton()
898
+ .click();
899
+ audioResponsePage.steps.waitForPlaybackToBeginStandardPreview();
900
+ audioResponsePage.previewPausePlaybackButton()
901
+ .click();
902
+ cy.log('Clicking at the middle of the progress bar to seek till 50% of the recording');
903
+ audioResponsePage.previewPlaybackProgressBar()
904
+ .click();
905
+ audioResponsePage.previewPlaybackSlider()
906
+ .then(($val) => {
907
+ const value = $val[0].value
908
+ expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 5)
909
+ });
910
+ audioResponsePage.previewWaveformTotalWidth()
911
+ .then(($totalWidth) => {
912
+ const totalWidth = $totalWidth[0].clientWidth
913
+ audioResponsePage.previewWaveformCurrentPositionWidth()
914
+ .then(($currWidth) => {
915
+ const currentWaveFormWidth = $currWidth[0].clientWidth
916
+ const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
917
+ expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 5)
918
+ });
919
+ });
920
+ cy.log('Clicking on the waveform to seek till 75% of the recording');
921
+ audioResponsePage.previewPlaybackWaveform()
922
+ .then(($waveformDimensions) => {
923
+ const x = $waveformDimensions[0].clientWidth - ($waveformDimensions[0].clientWidth) / 4
924
+ const y = ($waveformDimensions[0].clientHeight) / 2
925
+ audioResponsePage.previewPlaybackWaveform()
926
+ .click(x, y);
927
+ });
928
+ cy.log('Checking value of progress bar after seeking on waveform');
929
+ audioResponsePage.previewPlaybackSlider()
930
+ .then(($val) => {
931
+ const value = $val[0].value
932
+ expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 5)
933
+ });
934
+ audioResponsePage.previewWaveformTotalWidth()
935
+ .then(($totalWidth) => {
936
+ const totalWidth = $totalWidth[0].clientWidth
937
+ audioResponsePage.previewWaveformCurrentPositionWidth()
938
+ .then(($currWidth) => {
939
+ const currentWaveFormWidth = $currWidth[0].clientWidth
940
+ const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
941
+ expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 5)
942
+ });
943
+ });
944
+ audioResponsePage.previewPlaybackSlider()
945
+ .should('not.be.visible');
946
+ audioResponsePage.previewPlaybackWaveform()
947
+ .realHover();
948
+ audioResponsePage.waveformCursor()
949
+ .should('not.be.visible');
950
+ });
951
+
952
+ it('In minimal mode, when \'Seek\' option is selected user should be able to seek the audio from the progress bar and waveform', () => {
953
+ let actualAudioSeekedInPercent = 50
954
+ cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown and switching back to preview tab and saving a recording response');
955
+ audioResponsePage.steps.switchToEditTab();
956
+ audioResponsePage.steps.switchToMinimalRecorderStyle();
957
+ audioResponsePage.seekOptionButton()
958
+ .click()
959
+ .should('have.class', 'ngie-toggle-button-selected')
960
+ audioResponsePage.steps.switchToPreviewTab();
961
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
962
+ audioResponsePage.minimalPreviewRecordButton()
963
+ .click();
964
+ audioResponsePage.steps.waitForRecordingToStartMinimalPreview();
965
+ audioResponsePage.minimalPreviewRecorderHelpText()
966
+ .should('have.text', 'Your response has been recorded');
967
+ audioResponsePage.minimalPreviewPlaybackButton()
968
+ .click();
969
+ audioResponsePage.steps.waitForPlaybackToBeginMinimalPreview();
970
+ audioResponsePage.previewPausePlaybackButton()
971
+ .click();
972
+ cy.log('Clicking at the middle of the progress bar to seek till 50% of the recording');
973
+ audioResponsePage.previewPlaybackProgressBar()
974
+ .click();
975
+ audioResponsePage.previewPlaybackSlider()
976
+ .should('have.attr', 'value', actualAudioSeekedInPercent);
977
+ audioResponsePage.previewWaveformTotalWidth()
978
+ .then(($totalWidth) => {
979
+ const totalWidth = $totalWidth[0].clientWidth
980
+ audioResponsePage.previewWaveformCurrentPositionWidth()
981
+ .then(($currWidth) => {
982
+ const currentWaveFormWidth = $currWidth[0].clientWidth
983
+ const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
984
+ expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 1)
985
+ });
986
+ });
987
+ cy.log('Clicking on the waveform to seek till 25% of the recording');
988
+ audioResponsePage.previewPlaybackWaveform()
989
+ .then(($waveformDimensions) => {
990
+ const x = ($waveformDimensions[0].clientWidth) / 4
991
+ const y = ($waveformDimensions[0].clientHeight) / 2
992
+ audioResponsePage.previewPlaybackWaveform()
993
+ .click(x, y);
994
+ });
995
+ cy.log('Checking value of progress bar after seeking on waveform');
996
+ audioResponsePage.previewPlaybackSlider()
997
+ .then(($val) => {
998
+ actualAudioSeekedInPercent = 25
999
+ const value = $val[0].value
1000
+ expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 1)
1001
+ });
1002
+ audioResponsePage.previewWaveformTotalWidth()
1003
+ .then(($totalWidth) => {
1004
+ actualAudioSeekedInPercent = 25
1005
+ const totalWidth = $totalWidth[0].clientWidth
1006
+ audioResponsePage.previewWaveformCurrentPositionWidth()
1007
+ .then(($currWidth) => {
1008
+ const currentWaveFormWidth = $currWidth[0].clientWidth
1009
+ const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
1010
+ expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 1)
1011
+ });
1012
+ });
1013
+ audioResponsePage.previewPlaybackSlider()
1014
+ .should('be.visible');
1015
+ audioResponsePage.previewPlaybackWaveform()
1016
+ .realHover();
1017
+ audioResponsePage.waveformCursor()
1018
+ .should('be.visible');
1019
+ cy.get('body')
1020
+ .realHover({ position: 'topLeft' });
1021
+ audioResponsePage.waveformCursor()
1022
+ .should('not.be.visible');
1023
+ });
1024
+
1025
+ it('In minimal mode, when \'Seek\' option is deselected, on hover the progress bar should not have a slider handle and waveform should not have cursor if user hover on it and user should not able to change the play pointer position on the progress bar and waveform', () => {
1026
+ let actualAudioSeekedInPercent = 25
1027
+ cy.log('Pre-step : Switching to Edit tab, deselecting \'Seek\' and switching back to Preview tab and saving a recording response');
1028
+ audioResponsePage.steps.switchToEditTab();
1029
+ audioResponsePage.seekOptionButton()
1030
+ .click()
1031
+ .should('have.class', 'ngie-toggle-button-not-selected')
1032
+ audioResponsePage.steps.switchToPreviewTab();
1033
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
1034
+ audioResponsePage.minimalPreviewRecordButton()
1035
+ .click();
1036
+ audioResponsePage.minimalPreviewRecorderHelpText()
1037
+ .should('have.text', 'Your response has been recorded');
1038
+ audioResponsePage.minimalPreviewPlaybackButton()
1039
+ .click();
1040
+ audioResponsePage.steps.waitForPlaybackToBeginMinimalPreview();
1041
+ audioResponsePage.previewPausePlaybackButton()
1042
+ .click();
1043
+ audioResponsePage.previewPlaybackSlider()
1044
+ .should('not.be.visible');
1045
+ cy.log('Clicking at the middle of the progress bar to seek till 50% of the recording');
1046
+ audioResponsePage.previewPlaybackProgressBar()
1047
+ .click();
1048
+ audioResponsePage.previewPlaybackSlider()
1049
+ .then(($val) => {
1050
+ const value = $val[0].value
1051
+ expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 5)
1052
+ });
1053
+ audioResponsePage.previewWaveformTotalWidth()
1054
+ .then(($totalWidth) => {
1055
+ const totalWidth = $totalWidth[0].clientWidth
1056
+ audioResponsePage.previewWaveformCurrentPositionWidth()
1057
+ .then(($currWidth) => {
1058
+ const currentWaveFormWidth = $currWidth[0].clientWidth
1059
+ const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
1060
+ expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 5)
1061
+ });
1062
+ });
1063
+ cy.log('Clicking on the waveform to seek till 75% of the recording');
1064
+ audioResponsePage.previewPlaybackWaveform()
1065
+ .then(($waveformDimensions) => {
1066
+ const x = $waveformDimensions[0].clientWidth - ($waveformDimensions[0].clientWidth) / 4
1067
+ const y = ($waveformDimensions[0].clientHeight) / 2
1068
+ audioResponsePage.previewPlaybackWaveform()
1069
+ .click(x, y);
1070
+ });
1071
+ cy.log('Checking value of progress bar after seeking on waveform');
1072
+ audioResponsePage.previewPlaybackSlider()
1073
+ .then(($val) => {
1074
+ const value = $val[0].value
1075
+ expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 5)
1076
+ });
1077
+ audioResponsePage.previewWaveformTotalWidth()
1078
+ .then(($totalWidth) => {
1079
+ const actualAudioSeekedInPercent = 25
1080
+ const totalWidth = $totalWidth[0].clientWidth
1081
+ audioResponsePage.previewWaveformCurrentPositionWidth()
1082
+ .then(($currWidth) => {
1083
+ const currentWaveFormWidth = $currWidth[0].clientWidth
1084
+ const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
1085
+ expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 5)
1086
+ });
1087
+ });
1088
+ audioResponsePage.previewPlaybackSlider()
1089
+ .should('not.be.visible');
1090
+ audioResponsePage.previewPlaybackWaveform()
1091
+ .realHover();
1092
+ audioResponsePage.waveformCursor()
1093
+ .should('not.be.visible');
1094
+ });
1095
+ });
1096
+
1097
+ describe('Controls for response playback- Volume Control', () => {
1098
+ abortEarlySetup();
1099
+ before(() => {
1100
+ cy.log('Navigating to Audio Response question type');
1101
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
1102
+ cy.log('Setting \'Maximum record length\' to 5 seconds, so that I can record for a duration of 5 seconds without using cy.wait(5000)');
1103
+ audioResponsePage.steps.setMaximumRecorderLength('5');
1104
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
1105
+ });
1106
+
1107
+ it('In standard mode, when the \'Volume Control\' option is selected the volume control icon button should be enabled in the preview tab', () => {
1108
+ cy.log('Pre-step : Switches to Preview tab and saves a recording');
1109
+ audioResponsePage.steps.switchToPreviewTab();
1110
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
1111
+ audioResponsePage.standardPreviewStartRecordingButton()
1112
+ .click();
1113
+ audioResponsePage.steps.waitForRecordingToStartStandardPreview();
1114
+ audioResponsePage.standardPreviewPlayerHelpText()
1115
+ .should('be.visible');
1116
+ audioResponsePage.previewPlayPlaybackButton()
1117
+ .click();
1118
+ audioResponsePage.previewVolumeControlButton()
1119
+ .should('be.visible')
1120
+ .and('be.enabled');
1121
+ });
1122
+
1123
+ it('In standard mode, when the volume control option is deselected \'Volume control\' should not be displayed on the playback player', () => {
1124
+ cy.log('Pre-step : User switches to Edit tab, deselects \'Volume control\' button, switches back to Preview tab and saves a recording');
1125
+ audioResponsePage.steps.switchToEditTab();
1126
+ audioResponsePage.volumeControlOptionButton()
1127
+ .click()
1128
+ .should('have.class', 'ngie-toggle-button-not-selected')
1129
+ cy.log('Switching to Preview tab');
1130
+ audioResponsePage.steps.switchToPreviewTab();
1131
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
1132
+ audioResponsePage.standardPreviewStartRecordingButton()
1133
+ .click();
1134
+ audioResponsePage.standardPreviewPlayerHelpText()
1135
+ .verifyInnerText('Your response has been recorded');
1136
+ audioResponsePage.previewPlayPlaybackButton()
1137
+ .click();
1138
+ audioResponsePage.previewVolumeControlButton()
1139
+ .should('not.exist');
1140
+ });
1141
+
1142
+ it('In minimal mode, when the volume control option is selected the volume control icon button should be enabled in the preview tab', () => {
1143
+ cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown');
1144
+ audioResponsePage.steps.switchToEditTab();
1145
+ audioResponsePage.steps.switchToMinimalRecorderStyle();
1146
+ audioResponsePage.volumeControlOptionButton()
1147
+ .click()
1148
+ .should('have.class', 'ngie-toggle-button-selected')
1149
+ cy.log('Switching to Preview tab');
1150
+ audioResponsePage.steps.switchToPreviewTab();
1151
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
1152
+ audioResponsePage.minimalPreviewRecordButton()
1153
+ .click();
1154
+ audioResponsePage.minimalPreviewRecorderHelpText()
1155
+ .should('have.text', 'Your response has been recorded');
1156
+ audioResponsePage.minimalPreviewPlaybackButton()
1157
+ .click();
1158
+ audioResponsePage.previewVolumeControlButton()
1159
+ .should('be.enabled')
1160
+ .and('be.visible');
1161
+ });
1162
+
1163
+ it('In minimal mode, when the volume control option is deselected the volume control button should not be displayed in the preview tab', () => {
1164
+ cy.log('Pre-step : Switching to Edit tab, deselecting \'Volume control\' button and switching back to Preview tab');
1165
+ audioResponsePage.steps.switchToEditTab();
1166
+ audioResponsePage.volumeControlOptionButton()
1167
+ .click()
1168
+ .should('have.class', 'ngie-toggle-button-not-selected')
1169
+ audioResponsePage.steps.switchToPreviewTab();
1170
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
1171
+ audioResponsePage.minimalPreviewRecordButton()
1172
+ .click();
1173
+ audioResponsePage.minimalPreviewRecorderHelpText()
1174
+ .should('have.text', 'Your response has been recorded');
1175
+ audioResponsePage.minimalPreviewPlaybackButton()
1176
+ .click();
1177
+ audioResponsePage.previewVolumeControlButton()
1178
+ .should('not.exist');
1179
+ });
1180
+ });
1181
+
1182
+ describe('Controls for response playback- Playback overlay', () => {
1183
+ abortEarlySetup();
1184
+ before(() => {
1185
+ cy.log('Navigating to Audio Response question type');
1186
+ audioResponsePage.steps.navigateToCreateQuestion('audio response');
1187
+ cy.log('Setting \'Maximum record length\' to 5 seconds, so that I can record for a duration of 5 seconds without using cy.wait(5000)');
1188
+ audioResponsePage.steps.setMaximumRecorderLength('5');
1189
+ cy.log('Selecing \'Minimal\' Recorder style and switching to Preview tab');
1190
+ audioResponsePage.steps.switchToMinimalRecorderStyle();
1191
+ cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion');
1192
+ audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
1193
+ });
1194
+
1195
+ it('In minimal mode, when the \'Playback overlay\' option is selected the playback overlay should be displayed in the preview tab', () => {
1196
+ cy.log('Pre-step: Switching to Preview tab and saving a recording response');
1197
+ audioResponsePage.steps.switchToPreviewTab();
1198
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
1199
+ audioResponsePage.minimalPreviewRecordButton()
1200
+ .click();
1201
+ audioResponsePage.steps.waitForRecordingToStartMinimalPreview();
1202
+ audioResponsePage.minimalPreviewRecorderHelpText()
1203
+ .should('be.visible');
1204
+ audioResponsePage.minimalPreviewPlaybackButton()
1205
+ .click();
1206
+ audioResponsePage.minimalPreviewPlaybackOverlay()
1207
+ .should('be.visible');
1208
+ });
1209
+
1210
+ it('In minimal mode, when the \'Playback overlay\' option is deselected overlay should not be displayed in preview tab. User should be able to stop playback by clicking on stop button', () => {
1211
+ cy.log('Pre-step : Switching to Edit tab and deselecting \'Playback overlay\'');
1212
+ audioResponsePage.steps.switchToEditTab();
1213
+ audioResponsePage.playbackOverlayOptionButton()
1214
+ .click()
1215
+ .should('have.class', 'ngie-toggle-button-not-selected')
1216
+ audioResponsePage.steps.switchToPreviewTab();
1217
+ cy.log('Pre-step: Switching to Preview tab');
1218
+ audioResponsePage.steps.switchToPreviewTab();
1219
+ cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
1220
+ audioResponsePage.minimalPreviewRecordButton()
1221
+ .click();
1222
+ audioResponsePage.minimalPreviewPlaybackButton()
1223
+ .click();
1224
+ audioResponsePage.minimalPreviewPlaybackOverlay()
1225
+ .should('not.exist')
1226
+ audioResponsePage.minimalPreviewStopPlaybackButton()
1227
+ .should('be.enabled')
1228
+ });
1229
+ });
1230
+ });