Cypress test. Canvas 3D functionality. Basic actions (#2921)
* Add .pcd files to testing functional. Add cypress test. * Add plugin to compare images. * Add const file for testing canvas3d * Add canvas3d folder to testing via cypress * Add compare images to cypress. * Some rework. * Disable the test for Firefox. * Disable the test in the cypress_cron_type.json (the record removed). * Apply comments. * Added click() as workaround for excluding wait() * Try to click on the disabled workspace selectors. For exluding check ant* class. * Regenerate .pcd. Add loop to wheel top/side/front * Loop for wheel for perspective also.main
parent
b42d4b0e3d
commit
c9830d201e
Binary file not shown.
@ -0,0 +1,179 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
/// <reference types="cypress" />
|
||||
|
||||
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`);
|
||||
}
|
||||
|
||||
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`);
|
||||
}
|
||||
|
||||
function testPerspectiveChangeOnWheel(screenshotNameBefore, screenshotNameAfter) {
|
||||
cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameBefore);
|
||||
for (let i = 0; i < 5; i++) {
|
||||
cy.get('.cvat-canvas3d-perspective').trigger('wheel', { deltaY: -200 });
|
||||
}
|
||||
cy.get('.cvat-canvas3d-perspective').screenshot(screenshotNameAfter);
|
||||
compareImages(`${screenshotNameBefore}.png`, `${screenshotNameAfter}.png`);
|
||||
}
|
||||
|
||||
function testTopSideFrontChangeOnWheel(element, deltaY, screenshotNameBefore, screenshotNameAfter) {
|
||||
cy.get(element).screenshot(screenshotNameBefore);
|
||||
for (let i = 0; i < 10; i++) {
|
||||
cy.get(element).trigger('wheel', { deltaY: deltaY });
|
||||
}
|
||||
cy.get(element).screenshot(screenshotNameAfter);
|
||||
compareImages(`${screenshotNameBefore}.png`, `${screenshotNameAfter}.png`);
|
||||
}
|
||||
|
||||
before(() => {
|
||||
cy.openTaskJob(taskName);
|
||||
});
|
||||
|
||||
after(() => {
|
||||
cy.goToTaskList();
|
||||
cy.deleteTask(taskName);
|
||||
});
|
||||
|
||||
describe(`Testing case "${caseId}"`, () => {
|
||||
it('Check existing of elements.', () => {
|
||||
cy.get('.cvat-canvas3d-perspective')
|
||||
.should('exist')
|
||||
.and('be.visible')
|
||||
.within(() => {
|
||||
cy.get('.cvat-canvas3d-perspective-arrow-directions')
|
||||
.should('exist')
|
||||
.and('be.visible')
|
||||
.within(() => {
|
||||
cy.get('[aria-label="arrow-up"]').should('exist').and('be.visible');
|
||||
cy.get('[aria-label="arrow-left"]').should('exist').and('be.visible');
|
||||
cy.get('[aria-label="arrow-down"]').should('exist').and('be.visible');
|
||||
cy.get('[aria-label="arrow-right"]').should('exist').and('be.visible');
|
||||
});
|
||||
cy.get('.cvat-canvas3d-perspective-directions')
|
||||
.should('exist')
|
||||
.and('be.visible')
|
||||
.within(() => {
|
||||
cy.contains('button', 'U').should('exist').and('be.visible');
|
||||
cy.contains('button', 'I').should('exist').and('be.visible');
|
||||
cy.contains('button', 'O').should('exist').and('be.visible');
|
||||
cy.contains('button', 'J').should('exist').and('be.visible');
|
||||
cy.contains('button', 'K').should('exist').and('be.visible');
|
||||
cy.contains('button', 'L').should('exist').and('be.visible');
|
||||
});
|
||||
});
|
||||
cy.get('.cvat-canvas3d-topview').should('exist').and('be.visible');
|
||||
cy.get('.cvat-canvas3d-sideview').should('exist').and('be.visible');
|
||||
cy.get('.cvat-canvas3d-frontview').should('exist').and('be.visible');
|
||||
cy.get('.cvat-canvas-controls-sidebar')
|
||||
.should('exist')
|
||||
.and('be.visible')
|
||||
.within(() => {
|
||||
cy.get('.cvat-move-control').should('exist').and('be.visible');
|
||||
cy.get('.cvat-cursor-control').should('exist').and('be.visible');
|
||||
cy.get('.cvat-draw-cuboid-control').should('exist').and('be.visible');
|
||||
cy.get('[aria-label="camera"]').should('exist').and('be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
it('Check workspace selector.', () => {
|
||||
// Try to click on the disabled workspace selectors. The value of the selector should not changed.
|
||||
cy.get('.cvat-workspace-selector').should('contain.text', 'Standard 3D').click();
|
||||
for (const dropdownItems of [
|
||||
'[title="Attribute annotation"]',
|
||||
'[title="Tag annotation"]',
|
||||
'[title="Review"]',
|
||||
]) {
|
||||
cy.get('.cvat-workspace-selector-dropdown')
|
||||
.not('.ant-select-dropdown-hidden')
|
||||
.within(() => {
|
||||
cy.get(dropdownItems).click();
|
||||
});
|
||||
cy.get('.cvat-workspace-selector').should('contain.text', 'Standard 3D');
|
||||
}
|
||||
});
|
||||
|
||||
it('Interaction with the frame change buttons.', () => {
|
||||
cy.get('.cvat-player-last-button').click();
|
||||
cy.checkFrameNum(2);
|
||||
cy.get('.cvat-player-filename-wrapper').should('contain.text', 'generated_pcd_50000_points.pcd');
|
||||
cy.get('.cvat-player-first-button').click();
|
||||
cy.checkFrameNum(0);
|
||||
cy.get('.cvat-player-filename-wrapper').should('contain.text', 'generated_pcd_100000_points.pcd');
|
||||
cy.get('.cvat-player-forward-button').click();
|
||||
cy.checkFrameNum(2);
|
||||
cy.get('.cvat-player-filename-wrapper').should('contain.text', 'generated_pcd_50000_points.pcd');
|
||||
cy.get('.cvat-player-backward-button').click();
|
||||
cy.checkFrameNum(0);
|
||||
cy.get('.cvat-player-filename-wrapper').should('contain.text', 'generated_pcd_100000_points.pcd');
|
||||
cy.get('.cvat-player-next-button').click();
|
||||
cy.checkFrameNum(1);
|
||||
cy.get('.cvat-player-filename-wrapper').should('contain.text', 'generated_pcd_10000_points.pcd');
|
||||
cy.get('.cvat-player-previous-button').click();
|
||||
cy.checkFrameNum(0);
|
||||
cy.get('.cvat-player-filename-wrapper').should('contain.text', 'generated_pcd_100000_points.pcd');
|
||||
cy.get('.cvat-player-play-button').click();
|
||||
cy.checkFrameNum(2);
|
||||
cy.get('.cvat-player-filename-wrapper').should('contain.text', 'generated_pcd_50000_points.pcd');
|
||||
cy.get('.cvat-player-first-button').click(); // Return to first frame
|
||||
});
|
||||
|
||||
it('Testing perspective visual regressions.', () => {
|
||||
testPerspectiveChangeOnWheel('perspective_before_wheel', 'perspective_after_wheel');
|
||||
testPerspectiveChangeOnKeyPress('u', 'before_press_altU', 'after_press_altU');
|
||||
testPerspectiveChangeOnKeyPress('o', 'before_press_altO', 'after_press_altO');
|
||||
testPerspectiveChangeOnKeyPress('i', 'before_press_altI', 'after_press_altI');
|
||||
testPerspectiveChangeOnKeyPress('k', 'before_press_altK', 'after_press_altK');
|
||||
testPerspectiveChangeOnKeyPress('j', 'before_press_altJ', 'after_press_altJ');
|
||||
testPerspectiveChangeOnKeyPress('l', 'before_press_altL', 'after_press_altL');
|
||||
testPerspectiveChangeOnArrowKeyPress('{uparrow}', 'before_press_uparrow', 'after_press_uparrow');
|
||||
testPerspectiveChangeOnArrowKeyPress('{downarrow}', 'before_press_downarrow', 'after_press_downarrow');
|
||||
testPerspectiveChangeOnArrowKeyPress('{leftarrow}', 'before_press_leftarrow', 'after_press_leftarrow');
|
||||
testPerspectiveChangeOnArrowKeyPress('{rightarrow}', 'before_press_rightarrow', 'after_press_rightarrow');
|
||||
});
|
||||
|
||||
it('Testing top/side/front views visual regressions.', () => {
|
||||
testTopSideFrontChangeOnWheel(
|
||||
'.cvat-canvas3d-topview',
|
||||
-1000,
|
||||
'topview_before_wheel',
|
||||
'topview_after_wheel',
|
||||
);
|
||||
testTopSideFrontChangeOnWheel(
|
||||
'.cvat-canvas3d-sideview',
|
||||
-1000,
|
||||
'sideview_before_wheel',
|
||||
'sideview_after_wheel',
|
||||
);
|
||||
testTopSideFrontChangeOnWheel(
|
||||
'.cvat-canvas3d-frontview',
|
||||
-1000,
|
||||
'frontview_before_wheel',
|
||||
'frontview_after_wheel',
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
exports.compareImages = compareImages;
|
||||
|
||||
const Jimp = require('jimp');
|
||||
|
||||
async function compareImages(args) {
|
||||
const imgBase = await Jimp.read(args.imgBase);
|
||||
const imgAfterChanges = await Jimp.read(args.imgAfterChanges);
|
||||
const diff = Jimp.diff(imgBase, imgAfterChanges);
|
||||
|
||||
return diff.percent;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
Cypress.Commands.add('compareImages', function (imgBase, imgAfterChanges) {
|
||||
return cy.task('compareImages', {
|
||||
imgBase: imgBase,
|
||||
imgAfterChanges: imgAfterChanges,
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,40 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
/// <reference types="cypress" />
|
||||
|
||||
export const labelName = `points cloud`;
|
||||
export const taskName = `Canvas 3D functionality`;
|
||||
export const pcdPngZipArr = '../../cypress/integration/canvas3d_functionality/assets/test_canvas3d.zip';
|
||||
export const attrName = `Attr for ${labelName}`;
|
||||
export const textDefaultValue = 'Some default value for type Text';
|
||||
export const advancedConfigurationParams = false;
|
||||
export const multiAttrParams = false;
|
||||
|
||||
it('Prepare to testing', () => {
|
||||
cy.visit('/');
|
||||
cy.login();
|
||||
cy.get('.cvat-tasks-page').should('exist');
|
||||
let listItems = [];
|
||||
cy.document().then((doc) => {
|
||||
const collection = Array.from(doc.querySelectorAll('.cvat-item-task-name'));
|
||||
for (let i = 0; i < collection.length; i++) {
|
||||
listItems.push(collection[i].innerText);
|
||||
}
|
||||
if (listItems.indexOf(taskName) === -1) {
|
||||
cy.task('log', "A task doesn't exist. Creating.");
|
||||
cy.createAnnotationTask(
|
||||
taskName,
|
||||
labelName,
|
||||
attrName,
|
||||
textDefaultValue,
|
||||
pcdPngZipArr,
|
||||
multiAttrParams,
|
||||
advancedConfigurationParams,
|
||||
);
|
||||
} else {
|
||||
cy.task('log', 'The task exist. Skipping creation.');
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue