Cypress test. Settings. Player speed. (cvat-ai#2758)

* Cypress test. Settings. Player speed.

* Add css classes.

* Update the test.

* Add speed compare slower and fast to covarage line

cvat-ui/src/components/header/settings-modal/player-settings.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -109,27 +109,28 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                 <Col>
                     <Text className='cvat-text-color'> Player speed </Text>
                     <Select
+                        className='cvat-player-settings-speed-select'
                         value={frameSpeed}
                         onChange={(speed: FrameSpeed): void => {
                             onChangeFrameSpeed(speed);
                         }}
                     >
-                        <Select.Option key='fastest' value={FrameSpeed.Fastest}>
+                        <Select.Option key='fastest' value={FrameSpeed.Fastest} className='cvat-player-settings-speed-fastest'>
                             Fastest
                         </Select.Option>
-                        <Select.Option key='fast' value={FrameSpeed.Fast}>
+                        <Select.Option key='fast' value={FrameSpeed.Fast} className='cvat-player-settings-speed-fast'>
                             Fast
                         </Select.Option>
-                        <Select.Option key='usual' value={FrameSpeed.Usual}>
+                        <Select.Option key='usual' value={FrameSpeed.Usual} className='cvat-player-settings-speed-usual'>
                             Usual
                         </Select.Option>
-                        <Select.Option key='slow' value={FrameSpeed.Slow}>
+                        <Select.Option key='slow' value={FrameSpeed.Slow} className='cvat-player-settings-speed-slow'>
                             Slow
                         </Select.Option>
-                        <Select.Option key='slower' value={FrameSpeed.Slower}>
+                        <Select.Option key='slower' value={FrameSpeed.Slower} className='cvat-player-settings-speed-slower'>
                             Slower
                         </Select.Option>
-                        <Select.Option key='slowest' value={FrameSpeed.Slowest}>
+                        <Select.Option key='slowest' value={FrameSpeed.Slowest} className='cvat-player-settings-speed-slowest'>
                             Slowest
                         </Select.Option>
                     </Select>

tests/cypress/integration/actions_tasks_objects/case_50_settings_player_speed.js

@@ -0,0 +1,79 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+import { taskName, imageFileName } from '../../support/const';
+
+context('Settings. "Player speed" option.', () => {
+    const caseId = '50';
+
+    let timeBeforePlay = 0;
+    let timeAferPlay = 0;
+    let durationSlower = 0;
+    let durationFastest = 0;
+    let durationFast = 0;
+
+    function changePlayerSpeed(speed) {
+        cy.openSettings();
+        cy.get('.cvat-player-settings-speed').within(() => {
+            cy.get('.cvat-player-settings-speed-select').click();
+        });
+        cy.get(`.cvat-player-settings-speed-${speed}`).click();
+        cy.get('.cvat-player-settings-speed-select').should(
+            'contain.text',
+            speed.charAt(0).toUpperCase() + speed.slice(1),
+        );
+        cy.closeSettings();
+    }
+
+    before(() => {
+        cy.openTaskJob(taskName);
+    });
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('Change "Player speed" to "Slower" and measure the speed of changing frames. Go to first frame.', () => {
+            changePlayerSpeed('slower');
+            cy.get('.cvat-player-play-button').click();
+            timeBeforePlay = Date.now();
+            cy.log(timeBeforePlay);
+            cy.get('.cvat-player-filename-wrapper')
+                .should('have.text', `${imageFileName}_28.png`)
+                .then(() => {
+                    timeAferPlay = Date.now();
+                    durationSlower = timeAferPlay - timeBeforePlay;
+                });
+            cy.goCheckFrameNumber(0);
+        });
+
+        it('Change "Player speed" to "Fastest" and measure the speed of changing frames. The "Slower" is expected to be slower than the "Fastest"', () => {
+            changePlayerSpeed('fastest');
+            cy.get('.cvat-player-play-button').click();
+            timeBeforePlay = Date.now();
+            cy.log(timeBeforePlay);
+            cy.get('.cvat-player-filename-wrapper')
+                .should('have.text', `${imageFileName}_28.png`)
+                .then(() => {
+                    timeAferPlay = Date.now();
+                    durationFastest = timeAferPlay - timeBeforePlay;
+                    expect(durationSlower).to.be.greaterThan(durationFastest);
+                });
+            cy.goCheckFrameNumber(0);
+        });
+
+        it('Change "Player speed" to "Fast" and measure the speed of changing frames. The "Slower" is expected to be slower than the "Fastest"', () => {
+            changePlayerSpeed('fast');
+            cy.get('.cvat-player-play-button').click();
+            timeBeforePlay = Date.now();
+            cy.log(timeBeforePlay);
+            cy.get('.cvat-player-filename-wrapper')
+                .should('have.text', `${imageFileName}_28.png`)
+                .then(() => {
+                    timeAferPlay = Date.now();
+                    durationFast = timeAferPlay - timeBeforePlay;
+                    expect(durationSlower).to.be.greaterThan(durationFast);
+                });
+        });
+    });
+});