Upgrade Cypress to 12.x (#5681)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [ ] I submit my changes into the `develop` branch
- [ ] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [ ] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [ ] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

.github/workflows/full.yml

@@ -347,13 +347,13 @@ jobs:
               --headed \
               --browser chrome \
               --env coverage=false \
-              --config-file cypress_canvas3d.json \
-              --spec 'cypress/integration/${{ matrix.specs }}/**/*.js,cypress/integration/remove_users_tasks_projects_organizations.js'
+              --config-file cypress_canvas3d.config.js \
+              --spec 'cypress/e2e/${{ matrix.specs }}/**/*.js,cypress/e2e/remove_users_tasks_projects_organizations.js'
           else
             npx cypress run \
               --browser chrome \
               --env coverage=false \
-              --spec 'cypress/integration/${{ matrix.specs }}/**/*.js,cypress/integration/remove_users_tasks_projects_organizations.js'
+              --spec 'cypress/e2e/${{ matrix.specs }}/**/*.js,cypress/e2e/remove_users_tasks_projects_organizations.js'
           fi
 
       - name: Creating a log file from "cvat" container logs

.github/workflows/main.yml

@@ -302,13 +302,13 @@ jobs:
               --headed \
               --browser chrome \
               --env coverage=false \
-              --config-file cypress_canvas3d.json \
-              --spec 'cypress/integration/${{ matrix.specs }}/**/*.js,cypress/integration/remove_users_tasks_projects_organizations.js'
+              --config-file cypress_canvas3d.config.js \
+              --spec 'cypress/e2e/${{ matrix.specs }}/**/*.js,cypress/e2e/remove_users_tasks_projects_organizations.js'
           else
             npx cypress run \
               --browser chrome \
               --env coverage=false \
-              --spec 'cypress/integration/${{ matrix.specs }}/**/*.js,cypress/integration/remove_users_tasks_projects_organizations.js'
+              --spec 'cypress/e2e/${{ matrix.specs }}/**/*.js,cypress/e2e/remove_users_tasks_projects_organizations.js'
           fi
 
       - name: Creating a log file from "cvat" container logs

.github/workflows/schedule.yml

@@ -347,13 +347,13 @@ jobs:
             npx cypress run \
               --headed \
               --browser chrome \
-              --config-file cypress_canvas3d.json \
-              --spec 'cypress/integration/${{ matrix.specs }}/**/*.js,cypress/integration/remove_users_tasks_projects_organizations.js'
+              --config-file cypress_canvas3d.config.js \
+              --spec 'cypress/e2e/${{ matrix.specs }}/**/*.js,cypress/e2e/remove_users_tasks_projects_organizations.js'
             mv ./.nyc_output/out.json ./.nyc_output/out_${{ matrix.specs }}.json
           else
             npx cypress run \
               --browser chrome \
-              --spec 'cypress/integration/${{ matrix.specs }}/**/*.js,cypress/integration/remove_users_tasks_projects_organizations.js'
+              --spec 'cypress/e2e/${{ matrix.specs }}/**/*.js,cypress/e2e/remove_users_tasks_projects_organizations.js'
             mv ./.nyc_output/out.json ./.nyc_output/out_${{ matrix.specs }}.json
           fi
 

tests/.eslintrc.js

@@ -23,5 +23,6 @@ module.exports = {
         ...Object.fromEntries(Object.entries(globalConfig.rules).filter(([key]) => {
             return !key.startsWith('@typescript-eslint')
         })),
+        "cypress/no-unnecessary-waiting": "off",
     },
 };

tests/cypress.config.js

+const { defineConfig } = require('cypress');
+const plugins = require('./cypress/plugins/index');
+
+module.exports = defineConfig({
+    video: false,
+    viewportWidth: 1300,
+    viewportHeight: 960,
+    defaultCommandTimeout: 25000,
+    downloadsFolder: 'cypress/fixtures',
+    env: {
+        user: 'admin',
+        email: 'admin@localhost.company',
+        password: '12qwaszx',
+    },
+    e2e: {
+        setupNodeEvents(on, config) {
+            return plugins(on, config);
+        },
+        testIsolation: false,
+        baseUrl: 'http://localhost:8080',
+        specPattern: [
+            'cypress/e2e/auth_page.js',
+            'cypress/e2e/skeletons/*.js',
+            'cypress/e2e/webhooks.js',
+            'cypress/e2e/masks/*.js',
+            'cypress/e2e/actions_tasks/**/*.js',
+            'cypress/e2e/actions_tasks2/**/*.js',
+            'cypress/e2e/actions_tasks3/**/*.js',
+            'cypress/e2e/actions_objects/**/*.js',
+            'cypress/e2e/actions_objects2/**/*.js',
+            'cypress/e2e/issues_prs/**/*.js',
+            'cypress/e2e/issues_prs2/**/*.js',
+            'cypress/e2e/actions_users/**/*.js',
+            'cypress/e2e/actions_projects_models/**/*.js',
+            'cypress/e2e/actions_organizations/**/*.js',
+            'cypress/e2e/remove_users_tasks_projects_organizations.js',
+        ],
+    },
+});

tests/cypress.json

-{
-  "video": false,
-  "baseUrl": "http://localhost:8080",
-  "viewportWidth": 1300,
-  "viewportHeight": 960,
-  "defaultCommandTimeout": 25000,
-  "downloadsFolder": "cypress/fixtures",
-  "env": {
-    "user": "admin",
-    "email": "admin@localhost.company",
-    "password": "12qwaszx"
-  },
-  "testFiles": [
-    "auth_page.js",
-    "skeletons/*.js",
-    "webhooks.js",
-    "masks/*.js",
-    "actions_tasks/**/*.js",
-    "actions_tasks2/**/*.js",
-    "actions_tasks3/**/*.js",
-    "actions_objects/**/*.js",
-    "actions_objects2/**/*.js",
-    "issues_prs/**/*.js",
-    "issues_prs2/**/*.js",
-    "actions_users/**/*.js",
-    "actions_projects_models/**/*.js",
-    "actions_organizations/**/*.js",
-    "remove_users_tasks_projects_organizations.js"
-  ]
-}

tests/cypress/integration/actions_objects2/case_delete_frame.js → tests/cypress/e2e/actions_objects2/case_delete_frame.js

@@ -36,7 +36,6 @@ context('Delete frame from job.', () => {
 
         it('Check open from non-deleted frame', () => {
             cy.visit('/tasks');
-            cy.login();
             cy.openTaskJob(taskName);
             cy.checkFrameNum(frame + 1);
         });

tests/cypress/integration/actions_organizations/case_113_new_organization_pipeline.js → tests/cypress/e2e/actions_organizations/case_113_new_organization_pipeline.js

@@ -114,10 +114,6 @@ context('New organization pipeline.', () => {
         }
     });
 
-    beforeEach(() => {
-        Cypress.Cookies.preserveOnce('sessionid', 'csrftoken');
-    });
-
     after(() => {
         cy.logout(thirdUserName);
         cy.getAuthKey().then((authKey) => {

tests/cypress/integration/actions_projects_models/case_104_project_export_3d.js → tests/cypress/e2e/actions_projects_models/case_104_project_export_3d.js

@@ -14,7 +14,7 @@ context('Export project dataset with 3D task.', { browser: '!firefox' }, () => {
         label3d: labelName,
         attrName3d: 'Kind',
         attrValue3d: 'Oak',
-        archiveName: '../../cypress/integration/canvas3d_functionality/assets/test_canvas3d.zip',
+        archiveName: '../../cypress/e2e/canvas3d_functionality/assets/test_canvas3d.zip',
         advancedConfigurationParams: false,
         forProject: true,
         attachToProject: false,

tests/cypress/integration/actions_projects_models/case_114_backup_restore_project.js → tests/cypress/e2e/actions_projects_models/case_114_backup_restore_project.js

@@ -113,7 +113,7 @@ context('Backup, restore a project.', { browser: '!firefox' }, () => {
 });
 
 context('Backup, restore a project with a 3D task.', { browser: '!firefox' }, () => {
-    const archiveName3d = '../../cypress/integration/canvas3d_functionality/assets/test_canvas3d.zip';
+    const archiveName3d = '../../cypress/e2e/canvas3d_functionality/assets/test_canvas3d.zip';
 
     const cuboidCreationParams = {
         labelName: project.label,

tests/cypress/integration/actions_projects_models/case_95_move_task_to_project.js → tests/cypress/e2e/actions_projects_models/case_95_move_task_to_project.js

@@ -39,7 +39,7 @@ context('Move a task to a project.', { browser: '!firefox' }, () => {
     const posY = 10;
     const color = 'gray';
     const archiveName = `${imageFileName}.zip`;
-    const archiveName3d = '../../cypress/integration/canvas3d_functionality/assets/test_canvas3d.zip';
+    const archiveName3d = '../../cypress/e2e/canvas3d_functionality/assets/test_canvas3d.zip';
     const archivePath = `cypress/fixtures/${archiveName}`;
     const imagesFolder = `cypress/fixtures/${imageFileName}`;
     const directoryToArchive = imagesFolder;

tests/cypress/integration/actions_projects_models/issue_2900_creating_more_one_tasks_from_project_per_time.js → tests/cypress/e2e/actions_projects_models/issue_2900_creating_more_one_tasks_from_project_per_time.js

@@ -26,7 +26,7 @@ context('Create more than one task per time when create from project.', () => {
 
     function createTask(nameTaskToCreate) {
         cy.get('[id="name"]').clear().type(nameTaskToCreate);
-        cy.get('.cvat-project-search-field').within(() => {
+        cy.get('.cvat-project-search-field').first().within(() => {
             cy.get('[type="search"]').should('have.value', projectName);
         });
         cy.get('.cvat-constructor-viewer-new-item').should('not.exist');

tests/cypress/integration/actions_tasks/case_102_create_link_shape_frame.js → tests/cypress/e2e/actions_tasks/case_102_create_link_shape_frame.js

@@ -25,7 +25,7 @@ context('Create a link for shape, frame.', () => {
     });
 
     describe(`Testing case "${caseId}"`, () => {
-        it('Create a link for a shape, for a frame.', () => {
+        it('Create a link for a shape.', () => {
             cy.window().then((win) => {
                 cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPromptShape');
             });
@@ -42,7 +42,9 @@ context('Create a link for shape, frame.', () => {
                 cy.get('.cvat-canvas-container').should('be.visible');
                 cy.get('#cvat_canvas_shape_1').should('be.visible');
             });
+        });
 
+        it('Create a link for a frame.', () => {
             cy.window().then((win) => {
                 cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPromptFrame');
             });

tests/cypress/integration/actions_tasks/registration_involved/case_39_issue_2572_rename_task.js → tests/cypress/e2e/actions_tasks/registration_involved/case_39_issue_2572_rename_task.js

@@ -36,6 +36,7 @@ context('Rename a task.', () => {
             cy.get('[aria-label="edit"]').click();
         });
         cy.contains('.cvat-text-color', myTaskName).click().type(newValue);
+        cy.get('.cvat-spinner').should('not.exist');
     }
 
     before(() => {

tests/cypress/integration/actions_tasks2/case_111_settings_text_size_position_label_content.js → tests/cypress/e2e/actions_tasks2/case_111_settings_text_size_position_label_content.js

@@ -145,7 +145,9 @@ context('Settings. Text size/position. Text labels content.', () => {
         it('Text labels content.', () => {
             cy.openSettings();
             cy.get('.cvat-workspace-settings-text-content').within(() => {
-                cy.get('[aria-label="close"]').click({ multiple: true });
+                cy.get('[aria-label="close"]').each((el) => {
+                    cy.wrap(el).click();
+                });
             });
 
             cy.get('.cvat-workspace-settings-text-content').click();

tests/cypress/integration/actions_tasks3/case_109_dummy_cloud_storage.js → tests/cypress/e2e/actions_tasks3/case_109_dummy_cloud_storage.js

@@ -12,7 +12,7 @@ const {
 
 context('Dummy cloud storages.', { browser: '!firefox' }, () => {
     const caseId = '109';
-    const imageFolder = '../integration/actions_tasks3/assets/case_109';
+    const imageFolder = '../e2e/actions_tasks3/assets/case_109';
 
     function testListDummyCloudStorages(dummyCS) {
         cy.intercept('GET', 'api/cloudstorages?**', dummyCS).as('listCS');
@@ -84,8 +84,11 @@ context('Dummy cloud storages.', { browser: '!firefox' }, () => {
         cy.get('.cvat-cloud-storage-form').should('be.visible');
     }
 
-    beforeEach(() => {
+    before(() => {
         cy.visit('auth/login');
+    });
+
+    beforeEach(() => {
         cy.login();
     });