Cypress. Fix tests. (#3761)

* Step 1

* Step 2

* Update asset for 3d tests

* Step 3

* Added custom command for screenshot screation.

* Adaptation tests for 3d functionality

* Command update

* Update command

* Rework command

* always screenshots

* Fix eslint issue

* Fix case 31

* Update command

* Fix commands

tests/cypress/integration/actions_projects_models/case_95_move_task_to_project.js

@@ -4,7 +4,10 @@
 
 /// <reference types="cypress" />
 
-context('Move a task to a project.', () => {
+// Temporarily disabling the test for Firefox browser
+// Cypress issue: https://github.com/cypress-io/cypress/issues/18325
+
+context('Move a task to a project.', { browser: '!firefox' }, () => {
     const caseID = '95';
     const task = {
         name: `Case ${caseID}`,

tests/cypress/integration/actions_tasks2/case_31_label_constructor_color_name_label.js

@@ -146,9 +146,7 @@ context('Label constructor. Color label. Label name editing', () => {
                     cy.get('.cvat-change-task-label-color-button').click();
                     cy.get('.cvat-label-color-picker')
                         .not('.ant-popover-hidden')
-                        .should('have.attr', 'style')
-                        .and('not.include', 'pointer-events');
-                    cy.get('.cvat-label-color-picker')
+                        .should('be.visible')
                         .within(() => {
                             cy.contains('hex').prev().clear().type(labelColor.yellowHex);
                             cy.contains('button', 'Cancel').click();
@@ -168,6 +166,7 @@ context('Label constructor. Color label. Label name editing', () => {
                     cy.get('.cvat-change-task-label-color-button').click();
                     cy.get('.cvat-label-color-picker')
                         .not('.ant-popover-hidden')
+                        .should('be.visible')
                         .within(() => {
                             cy.contains('button', 'Reset').click();
                         });

tests/cypress/integration/canvas3d_functionality/case_83_canvas3d_functionality_cuboid_grouping.js

@@ -11,23 +11,23 @@ context('Canvas 3D functionality. Grouping.', () => {
     const screenshotsPath = 'cypress/screenshots/canvas3d_functionality/case_83_canvas3d_functionality_cuboid_grouping.js';
     const firstCuboidCreationParams = {
         labelName: labelName,
-        x: 350,
-        y: 250,
+        x: 480,
+        y: 160,
     };
     const secondCuboidCreationParams = {
         labelName: labelName,
-        x: 450,
-        y: 250,
+        x: 480,
+        y: 270,
     };
     const thirdCuboidCreationParams = {
         labelName: labelName,
-        x: 450,
-        y: 350,
+        x: 430,
+        y: 220,
     };
     const fourthCuboidCreationParams = {
         labelName: labelName,
-        x: 350,
-        y: 350,
+        x: 530,
+        y: 220,
     };
     const yellowHex = 'fcbe03';
     const yellowRgb = '252, 190, 3';
@@ -55,14 +55,14 @@ context('Canvas 3D functionality. Grouping.', () => {
         cy.create3DCuboid(secondCuboidCreationParams);
         cy.create3DCuboid(thirdCuboidCreationParams);
         cy.create3DCuboid(fourthCuboidCreationParams);
-        cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_cuboid_creation');
+        cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_cuboid_creation');
     });
 
     describe(`Testing case "${caseId}"`, () => {
         it('Grouping two cuboids.', () => {
             cy.get('.cvat-group-control').click();
-            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 450, 250).click(450, 250);
-            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 450, 350).click(450, 350);
+            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 480, 270).click(480, 270);
+            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 430, 220).click(430, 220);
             cy.get('.cvat-group-control').click();
             cy.changeAppearance('Group');
             cy.get('#cvat-objects-sidebar-state-item-1').invoke('attr', 'style').then((bgColorItem1) => {
@@ -77,7 +77,7 @@ context('Canvas 3D functionality. Grouping.', () => {
                     expect(bgColorItem1).not.be.equal(bgColorItem3);
                 });
             });
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_cuboid_grouping');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_cuboid_grouping');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_cuboid_creation.png`,
                 `${screenshotsPath}/canvas3d_perspective_cuboid_grouping.png`,
@@ -92,7 +92,7 @@ context('Canvas 3D functionality. Grouping.', () => {
                     .should('have.attr', 'style')
                     .and('contain', `background-color: rgba(${yellowRgb}`);
             }
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_change_group_color');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_change_group_color');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_cuboid_grouping.png`,
                 `${screenshotsPath}/canvas3d_perspective_change_group_color.png`,
@@ -100,10 +100,10 @@ context('Canvas 3D functionality. Grouping.', () => {
         });
 
         it('Reset group.', () => {
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_before_reset_group');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_before_reset_group');
             cy.get('.cvat-group-control').click();
-            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 450, 250).click(450, 250);
-            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 450, 350).click(450, 350);
+            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 480, 270).click(480, 270);
+            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 430, 220).click(430, 220);
             cy.get('body').type('{Shift}g');
             cy.get('#cvat-objects-sidebar-state-item-2').invoke('attr', 'style').then((bgColorItem2) => {
                 expect(bgColorItem).to.be.equal(bgColorItem2);
@@ -111,7 +111,7 @@ context('Canvas 3D functionality. Grouping.', () => {
             cy.get('#cvat-objects-sidebar-state-item-3').invoke('attr', 'style').then((bgColorItem3) => {
                 expect(bgColorItem).to.be.equal(bgColorItem3);
             });
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_after_reset_group');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_after_reset_group');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_before_reset_group.png`,
                 `${screenshotsPath}/canvas3d_perspective_after_reset_group.png`,

tests/cypress/integration/canvas3d_functionality/case_85_canvas3d_functionality_cuboid_cancel_drawing.js

@@ -28,10 +28,10 @@ context('Canvas 3D functionality. Cancel drawing.', () => {
                 });
             cy.get('.cvat-draw-cuboid-popover').find('button').click();
             cy.get('.cvat-canvas3d-perspective').trigger('mousemove');
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_drawning');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_drawning');
             cy.get('body').type('{Esc}');
             cy.get('.cvat-active-canvas-control').should('exist');
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_cancel_drawning');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_cancel_drawning');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_drawning.png`,
                 `${screenshotsPath}/canvas3d_perspective_cancel_drawning.png`,

tests/cypress/integration/canvas3d_functionality/case_86_canvas3d_functionality_move_image_button.js

@@ -18,11 +18,9 @@ context('Canvas 3D functionality. "Move the image" button interaction.', () => {
         cy.openJob();
         cy.wait(1000); // Waiting for the point cloud to display
         cy.create3DCuboid(cuboidCreationParams);
-        cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_after_add_cuboid');
+        cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_after_add_cuboid');
         ['topview', 'sideview', 'frontview'].forEach((view) => {
-            cy.get(`.cvat-canvas3d-${view}`)
-                .find('.cvat-canvas3d-fullsize')
-                .screenshot(`canvas3d_${view}_after_add_cuboid`);
+            cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_after_add_cuboid`);
         });
     });
 
@@ -32,11 +30,9 @@ context('Canvas 3D functionality. "Move the image" button interaction.', () => {
             cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 300, 200); // Interacting with the canvas before interacting with the cuboid.
             cy.get('.cvat-canvas3d-perspective').trigger('mousemove');
             cy.get('#cvat-objects-sidebar-state-item-1').should('not.have.class', 'cvat-objects-sidebar-state-active-item');
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_move_the_image_clicked');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_move_the_image_clicked');
             ['topview', 'sideview', 'frontview'].forEach((view) => {
-                cy.get(`.cvat-canvas3d-${view}`)
-                    .find('.cvat-canvas3d-fullsize')
-                    .screenshot(`canvas3d_${view}_move_the_image_clicked`);
+                cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_move_the_image_clicked`);
             });
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_after_add_cuboid.png`,

tests/cypress/integration/canvas3d_functionality/case_88_canvas3d_functionality_save_job_remove_annotation.js

@@ -18,7 +18,7 @@ context('Canvas 3D functionality. Save a job. Remove annotations.', () => {
         cy.openTask(taskName);
         cy.openJob();
         cy.wait(1000); // Waiting for the point cloud to display
-        cy.get('.cvat-canvas3d-topview').find('.cvat-canvas3d-fullsize').screenshot('canvas3d_topview_before_all');
+        cy.customScreenshot('.cvat-canvas3d-topview', 'canvas3d_topview_before_all');
         cy.create3DCuboid(cuboidCreationParams);
     });
 
@@ -36,9 +36,7 @@ context('Canvas 3D functionality. Save a job. Remove annotations.', () => {
                 expect(sidebarStateItem.length).to.be.equal(1);
             });
             cy.wait(waitTime);
-            cy.get('.cvat-canvas3d-topview')
-                .find('.cvat-canvas3d-fullsize')
-                .screenshot('canvas3d_topview_after_reopen_job');
+            cy.customScreenshot('.cvat-canvas3d-topview', 'canvas3d_topview_after_reopen_job');
             cy.wait(waitTime);
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_topview_before_all.png`,
@@ -51,9 +49,7 @@ context('Canvas 3D functionality. Save a job. Remove annotations.', () => {
             cy.saveJob('PUT');
             cy.contains('Saving changes on the server').should('be.hidden');
             cy.get('.cvat-objects-sidebar-state-item').should('not.exist');
-            cy.get('.cvat-canvas3d-topview')
-                .find('.cvat-canvas3d-fullsize')
-                .screenshot('canvas3d_topview_after_remove_annotations');
+            cy.customScreenshot('.cvat-canvas3d-topview', 'canvas3d_topview_after_remove_annotations');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_topview_after_reopen_job.png`,
                 `${screenshotsPath}/canvas3d_topview_after_remove_annotations.png`,

tests/cypress/integration/canvas3d_functionality/case_89_canvas3d_functionality_filters.js

@@ -28,7 +28,7 @@ context('Canvas 3D functionality. Filters.', () => {
         cy.wait(1000); // Waiting for the point cloud to display
         cy.create3DCuboid(firstCuboidCreationParams);
         cy.create3DCuboid(secondCuboidCreationParams);
-        cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_after_add_cuboids');
+        cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_after_add_cuboids');
     });
 
     describe(`Testing case "${caseId}"`, () => {
@@ -44,7 +44,7 @@ context('Canvas 3D functionality. Filters.', () => {
             });
             cy.get('#cvat-objects-sidebar-state-item-1').should('exist');
             cy.get('#cvat-objects-sidebar-state-item-2').should('not.exist');
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_set_filter_label');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_set_filter_label');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_after_add_cuboids.png`,
                 `${screenshotsPath}/canvas3d_perspective_set_filter_label.png`,
@@ -64,7 +64,7 @@ context('Canvas 3D functionality. Filters.', () => {
             });
             cy.get('#cvat-objects-sidebar-state-item-1').should('not.exist');
             cy.get('#cvat-objects-sidebar-state-item-2').should('exist');
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_set_filter_objectid');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_set_filter_objectid');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_set_filter_objectid.png`,
                 `${screenshotsPath}/canvas3d_perspective_set_filter_label.png`,

tests/cypress/integration/canvas3d_functionality_2/case_56_canvas3d_functionality_basic_actions.js

@@ -13,9 +13,10 @@ context('Canvas 3D functionality. Basic actions.', () => {
         'cypress/screenshots/canvas3d_functionality_2/case_56_canvas3d_functionality_basic_actions.js';
 
     function testPerspectiveChangeOnKeyPress(key, screenshotNameBefore, screenshotNameAfter) {
-        cy.get('.cvat-canvas3d-perspective').trigger('mouseover').screenshot(screenshotNameBefore);
+        cy.customScreenshot('.cvat-canvas3d-perspective', screenshotNameBefore);
+        cy.get('.cvat-canvas3d-perspective').trigger('mouseover');
         cy.get('body').type(`{alt}${key}`);
-        cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameAfter);
+        cy.customScreenshot('.cvat-canvas3d-perspective', screenshotNameAfter);
         cy.compareImagesAndCheckResult(
             `${screenshotsPath}/${screenshotNameBefore}.png`,
             `${screenshotsPath}/${screenshotNameAfter}.png`,
@@ -23,9 +24,10 @@ context('Canvas 3D functionality. Basic actions.', () => {
     }
 
     function testPerspectiveChangeOnArrowKeyPress(key, screenshotNameBefore, screenshotNameAfter) {
-        cy.get('.cvat-canvas3d-perspective').trigger('mouseover').screenshot(screenshotNameBefore);
+        cy.customScreenshot('.cvat-canvas3d-perspective', screenshotNameBefore);
+        cy.get('.cvat-canvas3d-perspective').trigger('mouseover');
         cy.get('body').type(`{Shift}${key}`);
-        cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameAfter);
+        cy.customScreenshot('.cvat-canvas3d-perspective', screenshotNameAfter);
         cy.compareImagesAndCheckResult(
             `${screenshotsPath}/${screenshotNameBefore}.png`,
             `${screenshotsPath}/${screenshotNameAfter}.png`,
@@ -33,11 +35,11 @@ context('Canvas 3D functionality. Basic actions.', () => {
     }
 
     function testPerspectiveChangeOnWheel(screenshotNameBefore, screenshotNameAfter) {
-        cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameBefore);
+        cy.customScreenshot('.cvat-canvas3d-perspective', screenshotNameBefore);
         for (let i = 0; i < 3; i++) {
             cy.get('.cvat-canvas3d-perspective').trigger('wheel', { deltaY: -50 });
         }
-        cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameAfter);
+        cy.customScreenshot('.cvat-canvas3d-perspective', screenshotNameAfter);
         cy.compareImagesAndCheckResult(
             `${screenshotsPath}/${screenshotNameBefore}.png`,
             `${screenshotsPath}/${screenshotNameAfter}.png`,
@@ -45,11 +47,11 @@ context('Canvas 3D functionality. Basic actions.', () => {
     }
 
     function testTopSideFrontChangeOnWheel(element, screenshotNameBefore, screenshotNameAfter) {
-        cy.get(element).find('.cvat-canvas3d-fullsize').screenshot(screenshotNameBefore);
+        cy.customScreenshot(element, screenshotNameBefore);
         for (let i = 0; i < 3; i++) {
             cy.get(element).trigger('wheel', { deltaY: -100 });
         }
-        cy.get(element).find('.cvat-canvas3d-fullsize').screenshot(screenshotNameAfter);
+        cy.customScreenshot(element, screenshotNameAfter);
         cy.compareImagesAndCheckResult(
             `${screenshotsPath}/${screenshotNameBefore}.png`,
             `${screenshotsPath}/${screenshotNameAfter}.png`,

tests/cypress/integration/canvas3d_functionality_2/case_63_canvas3d_functionality_control_button_mouse_interaction.js

@@ -18,7 +18,7 @@ context('Canvas 3D functionality. Control button. Mouse interaction.', () => {
         screenshotNameAfter,
         arrow,
     ) {
-        cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameBefore);
+        cy.customScreenshot('.cvat-canvas3d-perspective', screenshotNameBefore);
         cy.wait(300);
         arrow
             ? cy.get(button).trigger('mouseover').click()
@@ -34,7 +34,7 @@ context('Canvas 3D functionality. Control button. Mouse interaction.', () => {
             ? cy.get(button).trigger('mouseout')
             : cy.contains('button', new RegExp(`^${button}$`)).trigger('mouseout');
         cy.contains(expectedTooltipText).should('not.exist');
-        cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameAfter);
+        cy.customScreenshot('.cvat-canvas3d-perspective', screenshotNameAfter);
         cy.compareImagesAndCheckResult(
             `${screenshotsPath}/${screenshotNameBefore}.png`,
             `${screenshotsPath}/${screenshotNameAfter}.png`,

tests/cypress/integration/canvas3d_functionality_2/case_64_canvas3d_functionality_cuboid.js

@@ -17,24 +17,22 @@ context('Canvas 3D functionality. Add cuboid.', () => {
     before(() => {
         cy.openTaskJob(taskName);
         // Prepare screenshots to compare
-        cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_before_all');
+        cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_before_all');
         ['topview', 'sideview', 'frontview'].forEach((view) => {
-            cy.get(`.cvat-canvas3d-${view}`).find('.cvat-canvas3d-fullsize').screenshot(`canvas3d_${view}_before_all`);
+            cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_before_all`);
         });
     });
 
     describe(`Testing case "${caseId}"`, () => {
         it('Add cuboid.', () => {
             cy.create3DCuboid(cuboidCreationParams);
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_after_add_cuboid'); // The cuboid displayed
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_after_add_cuboid'); // The cuboid displayed
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_before_all.png`,
                 `${screenshotsPath}/canvas3d_perspective_after_add_cuboid.png`,
             );
             ['topview', 'sideview', 'frontview'].forEach((view) => {
-                cy.get(`.cvat-canvas3d-${view}`)
-                    .find('.cvat-canvas3d-fullsize')
-                    .screenshot(`canvas3d_${view}_add_cuboid`);
+                cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_add_cuboid`);
             });
             [
                 ['canvas3d_topview_before_all.png', 'canvas3d_topview_add_cuboid.png'],
@@ -50,24 +48,20 @@ context('Canvas 3D functionality. Add cuboid.', () => {
 
         it('Cuboid interaction by mouse.', () => {
             cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 300, 200).click(300, 200); // Deactivate the cuboid
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_deactivate_cuboid');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_deactivate_cuboid');
             ['topview', 'sideview', 'frontview'].forEach((view) => {
-                cy.get(`.cvat-canvas3d-${view}`)
-                    .find('.cvat-canvas3d-fullsize')
-                    .screenshot(`canvas3d_${view}_deactivate_cuboid`);
+                cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_deactivate_cuboid`);
             });
             cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 300, 200); // Interacting with the canvas before interacting with the cuboid.
             cy.get('.cvat-canvas3d-perspective').trigger('mousemove'); // Move cursor to cuboid
             cy.wait(1000); // Waiting for the reaction of the cuboid to interact with the mouse cursor
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_after_cursor_movements_to_cuboid');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_after_cursor_movements_to_cuboid');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_deactivate_cuboid.png`,
                 `${screenshotsPath}/canvas3d_perspective_after_cursor_movements_to_cuboid.png`,
             );
             ['topview', 'sideview', 'frontview'].forEach((view) => {
-                cy.get(`.cvat-canvas3d-${view}`)
-                    .find('.cvat-canvas3d-fullsize')
-                    .screenshot(`canvas3d_${view}_move_cursor_to_cuboid`);
+                cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_move_cursor_to_cuboid`);
             });
             [
                 ['canvas3d_topview_deactivate_cuboid.png', 'canvas3d_topview_move_cursor_to_cuboid.png'],

tests/cypress/integration/canvas3d_functionality_2/case_78_canvas3d_functionality_cuboid_label.js

@@ -20,11 +20,9 @@ context('Canvas 3D functionality. Interaction with cuboid via sidebar.', () => {
         cy.addNewLabel(secondLabel);
         cy.openJob();
         cy.wait(1000); // Waiting for the point cloud to display
-        cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_before_all');
+        cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_before_all');
         ['topview', 'sideview', 'frontview'].forEach((view) => {
-            cy.get(`.cvat-canvas3d-${view}`)
-                .find('.cvat-canvas3d-fullsize')
-                .screenshot(`canvas3d_${view}_before_all`);
+            cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_before_all`);
         });
         cy.create3DCuboid(cuboidCreationParams);
     });
@@ -35,15 +33,13 @@ context('Canvas 3D functionality. Interaction with cuboid via sidebar.', () => {
                 .trigger('mouseover')
                 .should('have.class', 'cvat-objects-sidebar-state-active-item')
                 .wait(1000); //Wating for cuboid activation
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_after_activating_cuboid');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_after_activating_cuboid');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_before_all.png`,
                 `${screenshotsPath}/canvas3d_perspective_after_activating_cuboid.png`,
             );
             ['topview', 'sideview', 'frontview'].forEach((view) => {
-                cy.get(`.cvat-canvas3d-${view}`)
-                    .find('.cvat-canvas3d-fullsize')
-                    .screenshot(`canvas3d_${view}_activating_cuboid`);
+                cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_activating_cuboid`);
             });
             [
                 ['canvas3d_topview_before_all.png', 'canvas3d_topview_activating_cuboid.png'],
@@ -58,15 +54,13 @@ context('Canvas 3D functionality. Interaction with cuboid via sidebar.', () => {
             cy.get('#cvat-objects-sidebar-state-item-1')
                 .find('.cvat-objects-sidebar-state-item-label-selector')
                 .type(`${secondLabel}{Enter}`);
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_after_change_label_cuboid');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_after_change_label_cuboid');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_after_activating_cuboid.png`,
                 `${screenshotsPath}/canvas3d_perspective_after_change_label_cuboid.png`,
             );
             ['topview', 'sideview', 'frontview'].forEach((view) => {
-                cy.get(`.cvat-canvas3d-${view}`)
-                    .find('.cvat-canvas3d-fullsize')
-                    .screenshot(`canvas3d_${view}_change_label_cuboid`);
+                cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_change_label_cuboid`);
             });
             [
                 ['canvas3d_topview_activating_cuboid.png', 'canvas3d_topview_change_label_cuboid.png'],
@@ -83,9 +77,7 @@ context('Canvas 3D functionality. Interaction with cuboid via sidebar.', () => {
                 .click({force: true}); // Lock the cubiod
             cy.get('.cvat-object-item-button-lock-enabled').should('exist');
             ['topview', 'sideview', 'frontview'].forEach((view) => {
-                cy.get(`.cvat-canvas3d-${view}`)
-                    .find('.cvat-canvas3d-fullsize')
-                    .screenshot(`canvas3d_${view}_lock_cuboid`);
+                cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_lock_cuboid`);
             });
             [
                 ['canvas3d_topview_change_label_cuboid.png', 'canvas3d_topview_lock_cuboid.png'],
@@ -94,12 +86,10 @@ context('Canvas 3D functionality. Interaction with cuboid via sidebar.', () => {
             ].forEach(([viewAfterCubiodChangeLabel, viewAfterCubiodLock]) => {
                 cy.compareImagesAndCheckResult(`${screenshotsPath}/${viewAfterCubiodChangeLabel}`, `${screenshotsPath}/${viewAfterCubiodLock}`);
             });
-            cy.get('.cvat-object-item-button-lock-enabled').click(); // Unlock the cubiod
+            cy.get('.cvat-object-item-button-lock-enabled').click({force: true}); // Unlock the cubiod
             cy.get('.cvat-object-item-button-lock').should('exist').trigger('mouseout');
             ['topview', 'sideview', 'frontview'].forEach((view) => {
-                cy.get(`.cvat-canvas3d-${view}`)
-                    .find('.cvat-canvas3d-fullsize')
-                    .screenshot(`canvas3d_${view}_unlock_cuboid`);
+                cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_unlock_cuboid`);
             });
             [
                 ['canvas3d_topview_lock_cuboid.png', 'canvas3d_topview_unlock_cuboid.png'],
@@ -113,16 +103,14 @@ context('Canvas 3D functionality. Interaction with cuboid via sidebar.', () => {
         it('Switch occluded property for a cuboid via sidear. The cuboid on the perpective view are occluded.', () => {
             cy.get('#cvat-objects-sidebar-state-item-1')
                 .find('.cvat-object-item-button-occluded')
-                .click(); // Switch occluded property
-            cy.get('.cvat-object-item-button-occluded-enabled').should('exist').trigger('mouseout');
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_enable_occlud_cuboid');
+                .click({force: true}); // Switch occluded property
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_enable_occlud_cuboid');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_after_activating_cuboid.png`,
                 `${screenshotsPath}/canvas3d_perspective_enable_occlud_cuboid.png`,
             );
-            cy.get('.cvat-object-item-button-occluded-enabled').click(); // Switch occluded property again
-            cy.get('.cvat-object-item-button-occluded').should('exist').trigger('mouseout');
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_disable_occlud_cuboid');
+            cy.get('.cvat-object-item-button-occluded-enabled').click({force: true}); // Switch occluded property again
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_disable_occlud_cuboid');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_enable_occlud_cuboid.png`,
                 `${screenshotsPath}/canvas3d_perspective_disable_occlud_cuboid.png`,
@@ -132,17 +120,14 @@ context('Canvas 3D functionality. Interaction with cuboid via sidebar.', () => {
         it('Hide/unhide a cuboid via sidear. The cuboid on the perpective/top/side/front view be hidden/unhidden.', () => {
             cy.get('#cvat-objects-sidebar-state-item-1')
                 .find('.cvat-object-item-button-hidden')
-                .click(); // Hide the cuboid
-            cy.get('.cvat-object-item-button-hidden-enabled').should('exist').trigger('mouseout');
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_hide_cuboid');
+                .click({force: true}); // Hide the cuboid
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_hide_cuboid');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_disable_occlud_cuboid.png`,
                 `${screenshotsPath}/canvas3d_perspective_hide_cuboid.png`,
             );
             ['topview', 'sideview', 'frontview'].forEach((view) => {
-                cy.get(`.cvat-canvas3d-${view}`)
-                    .find('.cvat-canvas3d-fullsize')
-                    .screenshot(`canvas3d_${view}_hide_cuboid`);
+                cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_hide_cuboid`);
             });
             [
                 ['canvas3d_topview_unlock_cuboid.png', 'canvas3d_topview_hide_cuboid.png'],
@@ -151,17 +136,14 @@ context('Canvas 3D functionality. Interaction with cuboid via sidebar.', () => {
             ].forEach(([viewAfterCubiodUnlock, viewAfterCubiodHide]) => {
                 cy.compareImagesAndCheckResult(`${screenshotsPath}/${viewAfterCubiodUnlock}`, `${screenshotsPath}/${viewAfterCubiodHide}`);
             });
-            cy.get('.cvat-object-item-button-hidden-enabled').click(); // Unhide the cuboid
-            cy.get('.cvat-object-item-button-hidden').should('exist').trigger('mouseout');
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_unhide_cuboid');
+            cy.get('.cvat-object-item-button-hidden-enabled').click({force: true}); // Unhide the cuboid
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_unhide_cuboid');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_hide_cuboid.png`,
                 `${screenshotsPath}/canvas3d_perspective_unhide_cuboid.png`,
             );
             ['topview', 'sideview', 'frontview'].forEach((view) => {
-                cy.get(`.cvat-canvas3d-${view}`)
-                    .find('.cvat-canvas3d-fullsize')
-                    .screenshot(`canvas3d_${view}_unhide_cuboid`);
+                cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_unhide_cuboid`);
             });
             [
                 ['canvas3d_topview_hide_cuboid.png', 'canvas3d_topview_unhide_cuboid.png'],

tests/cypress/integration/canvas3d_functionality_2/case_80_canvas3d_functionality_cuboid_make_copy.js

@@ -11,6 +11,8 @@ context('Canvas 3D functionality. Make a copy.', () => {
     const secondLabel = 'car';
     const cuboidCreationParams = {
         labelName: labelName,
+        x: 480,
+        y: 160,
     };
 
     before(() => {
@@ -29,7 +31,7 @@ context('Canvas 3D functionality. Make a copy.', () => {
                 .trigger('mouseout');
             cy.get('#cvat-objects-sidebar-state-item-1').find('[aria-label="more"]').click();
             cy.get('.ant-dropdown-menu').not('.ant-dropdown-menu-hidden').find('[aria-label="copy"]').click();
-            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 300, 200).dblclick(300, 200);
+            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 480, 270).dblclick(480, 270);
             cy.get('#cvat-objects-sidebar-state-item-1')
                 .invoke('attr', 'style')
                 .then((bgColor) => {
@@ -38,9 +40,9 @@ context('Canvas 3D functionality. Make a copy.', () => {
         });
 
         it('Make a copy via hot keys.', () => {
-            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 100, 200).trigger('mousemove', 300, 200);
+            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 480, 270).trigger('mousemove', 480, 270);
             cy.get('body').type('{Ctrl}c').type('{Ctrl}v');
-            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 350, 200).dblclick(350, 200);
+            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 430, 220).dblclick(430, 220);
             cy.get('.cvat-objects-sidebar-state-item').then((sideBarItems) => {
                 expect(sideBarItems.length).to.be.equal(3);
             });
@@ -52,16 +54,15 @@ context('Canvas 3D functionality. Make a copy.', () => {
         });
 
         it('Copy a cuboid to an another frame.', () => {
-            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 100, 200).trigger('mousemove', 300, 200);
+            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 480, 270).trigger('mousemove', 480, 270);
             cy.get('#cvat-objects-sidebar-state-item-2').should('have.class', 'cvat-objects-sidebar-state-active-item');
             cy.get('body').type('{Ctrl}c');
             cy.get('.cvat-player-next-button').click().wait(1000);
             cy.get('body').type('{Ctrl}v');
-            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 400, 200).dblclick(400, 200);
+            cy.get('.cvat-canvas3d-perspective').trigger('mousemove', 480, 270).dblclick(480, 270);
             cy.get('.cvat-objects-sidebar-state-item').then((sideBarItems) => {
                 expect(sideBarItems.length).to.be.equal(1);
             });
-            cy.get('.cvat-player-previous-button').click().wait(1000);
         });
     });
 });

tests/cypress/integration/canvas3d_functionality_2/case_82_canvas3d_functionality_cuboid_opacity_outlined_borders.js

@@ -11,7 +11,7 @@ context('Canvas 3D functionality. Opacity. Outlined borders.', () => {
     const screenshotsPath = 'cypress/screenshots/canvas3d_functionality_2/case_82_canvas3d_functionality_cuboid_opacity_outlined_borders.js';
     const cuboidCreationParams = {
         labelName: labelName,
-        x: 250,
+        x: 500,
         y: 250,
     };
 
@@ -21,21 +21,21 @@ context('Canvas 3D functionality. Opacity. Outlined borders.', () => {
         cy.wait(1000); // Waiting for the point cloud to display
         cy.create3DCuboid(cuboidCreationParams);
         cy.get('.cvat-canvas3d-perspective').trigger('mousemove').click(); // Deactivate the cuboiud
-        cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_deactivate_cuboid');
+        cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_deactivate_cuboid');
     });
 
     describe(`Testing case "${caseId}"`, () => {
         it('Change opacity to 100. To 0.', () => {
             cy.get('.cvat-appearance-opacity-slider').click('right');
             cy.get('.cvat-appearance-opacity-slider').find('[role="slider"]').should('have.attr', 'aria-valuenow', 100);
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_opacty_100');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_opacty_100');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_deactivate_cuboid.png`,
                 `${screenshotsPath}/canvas3d_perspective_opacty_100.png`,
             );
             cy.get('.cvat-appearance-opacity-slider').click('left');
             cy.get('.cvat-appearance-opacity-slider').find('[role="slider"]').should('have.attr', 'aria-valuenow', 0);
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_opacty_0');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_opacty_0');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_opacty_100.png`,
                 `${screenshotsPath}/canvas3d_perspective_opacty_0.png`,
@@ -45,8 +45,8 @@ context('Canvas 3D functionality. Opacity. Outlined borders.', () => {
         it('Change selected opacity to 100. To 0.', () => {
             cy.get('.cvat-appearance-selected-opacity-slider').click('right');
             cy.get('.cvat-appearance-selected-opacity-slider').find('[role="slider"]').should('have.attr', 'aria-valuenow', 100);
-            cy.get('.cvat-canvas3d-perspective').trigger('mousemove').trigger('mousemove', 250, 250).wait(1000); // Waiting for the cuboid activation
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_selected_opacty_100');
+            cy.get('.cvat-canvas3d-perspective').trigger('mousemove').trigger('mousemove', 500, 250).wait(1000); // Waiting for the cuboid activation
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_selected_opacty_100');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_opacty_100.png`,
                 `${screenshotsPath}/canvas3d_perspective_selected_opacty_100.png`,
@@ -54,7 +54,7 @@ context('Canvas 3D functionality. Opacity. Outlined borders.', () => {
             );
             cy.get('.cvat-appearance-selected-opacity-slider').click('left');
             cy.get('.cvat-appearance-selected-opacity-slider').find('[role="slider"]').should('have.attr', 'aria-valuenow', 0);
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_selected_opacty_0');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_selected_opacty_0');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_opacty_0.png`,
                 `${screenshotsPath}/canvas3d_perspective_selected_opacty_0.png`,
@@ -63,14 +63,14 @@ context('Canvas 3D functionality. Opacity. Outlined borders.', () => {
         });
 
         it('Enable/disable outlined borders.', () => {
-            cy.get('.cvat-appearance-outlinded-borders-checkbox').find('[type="checkbox"]').check();
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_enable_outlined_borders');
+            cy.get('.cvat-appearance-outlinded-borders-checkbox').find('[type="checkbox"]').check().should('be.checked');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_enable_outlined_borders');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_enable_outlined_borders.png`,
                 `${screenshotsPath}/canvas3d_perspective_selected_opacty_0.png`,
             );
-            cy.get('.cvat-appearance-outlinded-borders-checkbox').find('[type="checkbox"]').uncheck();
-            cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_disable_outlined_borders');
+            cy.get('.cvat-appearance-outlinded-borders-checkbox').find('[type="checkbox"]').uncheck().should('not.be.checked');
+            cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_disable_outlined_borders');
             cy.compareImagesAndCheckResult(
                 `${screenshotsPath}/canvas3d_perspective_disable_outlined_borders.png`,
                 `${screenshotsPath}/canvas3d_perspective_selected_opacty_0.png`,

tests/cypress/integration/issues_prs2/issue_1823_opening_context_menu_when_switching_another_frame.js

@@ -15,9 +15,11 @@ Uncaught (in promise) Error: . "{\"detail\":\"Authentication credentials were no
     at Object.getData (server-proxy.js:841)
 
 On Cypress version 6.4.0 is reproduced too. But the new version of Cypress caught this error.
+
+UPD: It has also become reproduce in Firefox.
 */
 
-context('Cannot read property label of undefined', { browser: '!chrome' }, () => {
+context('Cannot read property label of undefined', { browser: ['!chrome', '!firefox'] }, () => {
     const issueId = '1823';
     const labelName = `Issue ${issueId}`;
     const taskName = `New annotation task for ${labelName}`;

tests/cypress/support/commands.js

@@ -582,6 +582,7 @@ Cypress.Commands.add('goToTaskList', () => {
 Cypress.Commands.add('changeColorViaBadge', (labelColor) => {
     cy.get('.cvat-label-color-picker')
         .not('.ant-popover-hidden')
+        .should('be.visible')
         .within(() => {
             cy.contains('hex').prev().clear().type(labelColor);
             cy.contains('button', 'Ok').click();

tests/cypress/support/commands_canvas3d.js

@@ -6,7 +6,7 @@
 
 Cypress.Commands.add('compareImagesAndCheckResult', (baseImage, afterImage, noChangesExpected) => {
     cy.compareImages(baseImage, afterImage).then((diffPercent) => {
-        noChangesExpected ? expect(diffPercent).to.be.eq(0) : expect(diffPercent).to.be.gt(0);
+        noChangesExpected ? expect(diffPercent).to.be.lt(0.01) : expect(diffPercent).to.be.gt(0);
     });
 });
 
@@ -20,3 +20,16 @@ Cypress.Commands.add('create3DCuboid', (cuboidCreationParams) => {
     cy.wait(1000); // Waiting for a cuboid creation
     cy.get('.cvat-draw-cuboid-popover').should('be.hidden');
 });
+
+Cypress.Commands.add('customScreenshot', (element, screenshotName) => {
+    let getEl;
+    let padding;
+    if (element.includes('perspective')) {
+        getEl = cy.get(element);
+        padding = -130;
+    } else {
+        getEl = cy.get(element).find('.cvat-canvas3d-fullsize');
+        padding = -40;
+    }
+    getEl.screenshot(screenshotName, {padding: padding});
+});