From 1efd21ab77ee6bf9294d58b9e0c6fc2f1c4878d6 Mon Sep 17 00:00:00 2001
From: Dmitry Kruchinin <33020454+dvkruchinin@users.noreply.github.com>
Date: Wed, 24 Mar 2021 16:53:10 +0300
Subject: [PATCH] Cypress test. Canvas 3D. Control button mouse interaction.
(#3003)
* Case 56 remove after()
* Cypress test. Canvas 3D. Control buttom mouse interaction.
* Restart CI
* Add different command file for canvas3d feature.
* Update index.js
* Update the copyright year
* Tests adaptations
---
...56_canvas3d_functionality_basic_actions.js | 27 ++++---
...nality_control_button_mouse_interaction.js | 78 +++++++++++++++++++
tests/cypress/support/commands_canvas3d.js | 11 +++
tests/cypress/support/index.js | 3 +-
4 files changed, 108 insertions(+), 11 deletions(-)
create mode 100644 tests/cypress/integration/canvas3d_functionality/case_63_canvas3d_functionality_control_button_mouse_interaction.js
create mode 100644 tests/cypress/support/commands_canvas3d.js
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');