diff --git a/tests/cypress/integration/canvas3d_functionality/case_56_canvas3d_functionality_basic_actions.js b/tests/cypress/integration/canvas3d_functionality/case_56_canvas3d_functionality_basic_actions.js index 7330cdd2..981da3cd 100644 --- a/tests/cypress/integration/canvas3d_functionality/case_56_canvas3d_functionality_basic_actions.js +++ b/tests/cypress/integration/canvas3d_functionality/case_56_canvas3d_functionality_basic_actions.js @@ -5,30 +5,31 @@ /// import { taskName } from '../../support/const_canvas3d'; + // Firefox does not yet support WebGL in headless mode: https://bugzilla.mozilla.org/show_bug.cgi?id=1375585 (disabled in the cypress_cron_type.json) context('Canvas 3D functionality. Basic actions.', () => { const caseId = '56'; const screenshotsPath = 'cypress/screenshots/canvas3d_functionality/case_56_canvas3d_functionality_basic_actions.js'; - function compareImages(imgBefore, imgAfter) { - cy.compareImages(`${screenshotsPath}/${imgBefore}`, `${screenshotsPath}/${imgAfter}`).then((diffPercent) => { - expect(diffPercent).to.be.gt(0); - }); - } - function testPerspectiveChangeOnKeyPress(key, screenshotNameBefore, screenshotNameAfter) { cy.get('.cvat-canvas3d-perspective').trigger('mouseover').screenshot(screenshotNameBefore); cy.get('body').type(`{alt}${key}`); cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameAfter); - compareImages(`${screenshotNameBefore}.png`, `${screenshotNameAfter}.png`); + cy.compareImagesAndCheckResult( + `${screenshotsPath}/${screenshotNameBefore}.png`, + `${screenshotsPath}/${screenshotNameAfter}.png`, + ); } function testPerspectiveChangeOnArrowKeyPress(key, screenshotNameBefore, screenshotNameAfter) { cy.get('.cvat-canvas3d-perspective').trigger('mouseover').screenshot(screenshotNameBefore); cy.get('body').type(key); cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameAfter); - compareImages(`${screenshotNameBefore}.png`, `${screenshotNameAfter}.png`); + cy.compareImagesAndCheckResult( + `${screenshotsPath}/${screenshotNameBefore}.png`, + `${screenshotsPath}/${screenshotNameAfter}.png`, + ); } function testPerspectiveChangeOnWheel(screenshotNameBefore, screenshotNameAfter) { @@ -37,7 +38,10 @@ context('Canvas 3D functionality. Basic actions.', () => { cy.get('.cvat-canvas3d-perspective').trigger('wheel', { deltaY: -50 }); } cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameAfter); - compareImages(`${screenshotNameBefore}.png`, `${screenshotNameAfter}.png`); + cy.compareImagesAndCheckResult( + `${screenshotsPath}/${screenshotNameBefore}.png`, + `${screenshotsPath}/${screenshotNameAfter}.png`, + ); } function testTopSideFrontChangeOnWheel(element, screenshotNameBefore, screenshotNameAfter) { @@ -46,7 +50,10 @@ context('Canvas 3D functionality. Basic actions.', () => { cy.get(element).trigger('wheel', { deltaY: -100 }); } cy.get(element).find('.cvat-canvas3d-fullsize').screenshot(screenshotNameAfter); - compareImages(`${screenshotNameBefore}.png`, `${screenshotNameAfter}.png`); + cy.compareImagesAndCheckResult( + `${screenshotsPath}/${screenshotNameBefore}.png`, + `${screenshotsPath}/${screenshotNameAfter}.png`, + ); } function testContextImage() { diff --git a/tests/cypress/integration/canvas3d_functionality/case_63_canvas3d_functionality_control_button_mouse_interaction.js b/tests/cypress/integration/canvas3d_functionality/case_63_canvas3d_functionality_control_button_mouse_interaction.js new file mode 100644 index 00000000..34c6845d --- /dev/null +++ b/tests/cypress/integration/canvas3d_functionality/case_63_canvas3d_functionality_control_button_mouse_interaction.js @@ -0,0 +1,78 @@ +// Copyright (C) 2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +import { taskName } from '../../support/const_canvas3d'; + +context('Canvas 3D functionality. Control button. Mouse interaction.', () => { + const caseId = '63'; + const screenshotsPath = + 'cypress/screenshots/canvas3d_functionality/case_63_canvas3d_functionality_control_button_mouse_interaction.js'; + + function testPerspectiveChangeOnButtonClick( + button, + expectedTooltipText, + screenshotNameBefore, + screenshotNameAfter, + arrow, + ) { + cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameBefore); + arrow ? cy.get(button).click() : cy.contains('button', new RegExp(`^${button}$`)).click(); + cy.contains(expectedTooltipText).should('exist').and('be.visible'); // Check tooltip + arrow + ? 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.compareImagesAndCheckResult( + `${screenshotsPath}/${screenshotNameBefore}.png`, + `${screenshotsPath}/${screenshotNameAfter}.png`, + ); + } + + before(() => { + cy.openTaskJob(taskName); + cy.get('.cvat-contextImage-show').should('be.visible'); + }); + + describe(`Testing case "${caseId}"`, () => { + it('Testing perspective visual regressions by clicking on the buttons with the mouse.', () => { + testPerspectiveChangeOnButtonClick( + '[aria-label="arrow-up"]', + 'Arrow Up', + 'before_click_uparrow', + 'after_click_uparrow', + true, + ); + testPerspectiveChangeOnButtonClick( + '[aria-label="arrow-down"]', + 'Arrow Bottom', + 'before_click_bottomarrow', + 'after_click_bottomarrow', + true, + ); + testPerspectiveChangeOnButtonClick( + '[aria-label="arrow-left"]', + 'Arrow Left', + 'before_click_leftarrow', + 'after_click_leftarrow', + true, + ); + testPerspectiveChangeOnButtonClick( + '[aria-label="arrow-right"]', + 'Arrow Right', + 'before_click_rightarrow', + 'after_click_rightarrow', + true, + ); + testPerspectiveChangeOnButtonClick('U', 'Alt+U', 'before_click_move_up', 'after_click_move_up'); + testPerspectiveChangeOnButtonClick('O', 'Alt+O', 'before_click_move_down', 'after_click_move_down'); + testPerspectiveChangeOnButtonClick('I', 'Alt+I', 'before_click_zoom_in', 'after_click_zoom_in'); + testPerspectiveChangeOnButtonClick('K', 'Alt+K', 'before_click_zoom_out', 'after_click_zoom_out'); + testPerspectiveChangeOnButtonClick('J', 'Alt+J', 'before_click_move_left', 'after_click_move_left'); + testPerspectiveChangeOnButtonClick('L', 'Alt+L', 'before_click_move_right', 'after_click_move_right'); + }); + }); +}); diff --git a/tests/cypress/support/commands_canvas3d.js b/tests/cypress/support/commands_canvas3d.js new file mode 100644 index 00000000..3b14638c --- /dev/null +++ b/tests/cypress/support/commands_canvas3d.js @@ -0,0 +1,11 @@ +// Copyright (C) 2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +Cypress.Commands.add('compareImagesAndCheckResult', (baseImage, afterImage) => { + cy.compareImages(baseImage, afterImage).then((diffPercent) => { + expect(diffPercent).to.be.gt(0); + }); +}); diff --git a/tests/cypress/support/index.js b/tests/cypress/support/index.js index f05ba743..91de8794 100644 --- a/tests/cypress/support/index.js +++ b/tests/cypress/support/index.js @@ -1,10 +1,11 @@ -// Copyright (C) 2020 Intel Corporation +// Copyright (C) 2020-2021 Intel Corporation // // SPDX-License-Identifier: MIT require('./commands'); require('./commands_projects'); require('./commands_review_pipeline'); +require('./commands_canvas3d'); require('@cypress/code-coverage/support'); require('cypress-plugin-tab');