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
main
Dmitry Kruchinin 4 years ago committed by GitHub
parent ced1bc8cb3
commit e3c6daec03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -4,7 +4,10 @@
/// <reference types="cypress" /> /// <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 caseID = '95';
const task = { const task = {
name: `Case ${caseID}`, name: `Case ${caseID}`,

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

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

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

@ -18,11 +18,9 @@ context('Canvas 3D functionality. "Move the image" button interaction.', () => {
cy.openJob(); cy.openJob();
cy.wait(1000); // Waiting for the point cloud to display cy.wait(1000); // Waiting for the point cloud to display
cy.create3DCuboid(cuboidCreationParams); 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) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_after_add_cuboid`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`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', 300, 200); // Interacting with the canvas before interacting with the cuboid.
cy.get('.cvat-canvas3d-perspective').trigger('mousemove'); 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-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) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_move_the_image_clicked`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`canvas3d_${view}_move_the_image_clicked`);
}); });
cy.compareImagesAndCheckResult( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_after_add_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_after_add_cuboid.png`,

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

@ -28,7 +28,7 @@ context('Canvas 3D functionality. Filters.', () => {
cy.wait(1000); // Waiting for the point cloud to display cy.wait(1000); // Waiting for the point cloud to display
cy.create3DCuboid(firstCuboidCreationParams); cy.create3DCuboid(firstCuboidCreationParams);
cy.create3DCuboid(secondCuboidCreationParams); 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}"`, () => { 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-1').should('exist');
cy.get('#cvat-objects-sidebar-state-item-2').should('not.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( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_after_add_cuboids.png`, `${screenshotsPath}/canvas3d_perspective_after_add_cuboids.png`,
`${screenshotsPath}/canvas3d_perspective_set_filter_label.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-1').should('not.exist');
cy.get('#cvat-objects-sidebar-state-item-2').should('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( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_set_filter_objectid.png`, `${screenshotsPath}/canvas3d_perspective_set_filter_objectid.png`,
`${screenshotsPath}/canvas3d_perspective_set_filter_label.png`, `${screenshotsPath}/canvas3d_perspective_set_filter_label.png`,

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

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

@ -17,24 +17,22 @@ context('Canvas 3D functionality. Add cuboid.', () => {
before(() => { before(() => {
cy.openTaskJob(taskName); cy.openTaskJob(taskName);
// Prepare screenshots to compare // 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) => { ['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}"`, () => { describe(`Testing case "${caseId}"`, () => {
it('Add cuboid.', () => { it('Add cuboid.', () => {
cy.create3DCuboid(cuboidCreationParams); 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( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_before_all.png`, `${screenshotsPath}/canvas3d_perspective_before_all.png`,
`${screenshotsPath}/canvas3d_perspective_after_add_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_after_add_cuboid.png`,
); );
['topview', 'sideview', 'frontview'].forEach((view) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_add_cuboid`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`canvas3d_${view}_add_cuboid`);
}); });
[ [
['canvas3d_topview_before_all.png', 'canvas3d_topview_add_cuboid.png'], ['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.', () => { 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').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) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_deactivate_cuboid`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`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', 300, 200); // Interacting with the canvas before interacting with the cuboid.
cy.get('.cvat-canvas3d-perspective').trigger('mousemove'); // Move cursor to 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.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( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_deactivate_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_deactivate_cuboid.png`,
`${screenshotsPath}/canvas3d_perspective_after_cursor_movements_to_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_after_cursor_movements_to_cuboid.png`,
); );
['topview', 'sideview', 'frontview'].forEach((view) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_move_cursor_to_cuboid`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`canvas3d_${view}_move_cursor_to_cuboid`);
}); });
[ [
['canvas3d_topview_deactivate_cuboid.png', 'canvas3d_topview_move_cursor_to_cuboid.png'], ['canvas3d_topview_deactivate_cuboid.png', 'canvas3d_topview_move_cursor_to_cuboid.png'],

@ -20,11 +20,9 @@ context('Canvas 3D functionality. Interaction with cuboid via sidebar.', () => {
cy.addNewLabel(secondLabel); cy.addNewLabel(secondLabel);
cy.openJob(); cy.openJob();
cy.wait(1000); // Waiting for the point cloud to display 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) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_before_all`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`canvas3d_${view}_before_all`);
}); });
cy.create3DCuboid(cuboidCreationParams); cy.create3DCuboid(cuboidCreationParams);
}); });
@ -35,15 +33,13 @@ context('Canvas 3D functionality. Interaction with cuboid via sidebar.', () => {
.trigger('mouseover') .trigger('mouseover')
.should('have.class', 'cvat-objects-sidebar-state-active-item') .should('have.class', 'cvat-objects-sidebar-state-active-item')
.wait(1000); //Wating for cuboid activation .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( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_before_all.png`, `${screenshotsPath}/canvas3d_perspective_before_all.png`,
`${screenshotsPath}/canvas3d_perspective_after_activating_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_after_activating_cuboid.png`,
); );
['topview', 'sideview', 'frontview'].forEach((view) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_activating_cuboid`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`canvas3d_${view}_activating_cuboid`);
}); });
[ [
['canvas3d_topview_before_all.png', 'canvas3d_topview_activating_cuboid.png'], ['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') cy.get('#cvat-objects-sidebar-state-item-1')
.find('.cvat-objects-sidebar-state-item-label-selector') .find('.cvat-objects-sidebar-state-item-label-selector')
.type(`${secondLabel}{Enter}`); .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( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_after_activating_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_after_activating_cuboid.png`,
`${screenshotsPath}/canvas3d_perspective_after_change_label_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_after_change_label_cuboid.png`,
); );
['topview', 'sideview', 'frontview'].forEach((view) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_change_label_cuboid`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`canvas3d_${view}_change_label_cuboid`);
}); });
[ [
['canvas3d_topview_activating_cuboid.png', 'canvas3d_topview_change_label_cuboid.png'], ['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 .click({force: true}); // Lock the cubiod
cy.get('.cvat-object-item-button-lock-enabled').should('exist'); cy.get('.cvat-object-item-button-lock-enabled').should('exist');
['topview', 'sideview', 'frontview'].forEach((view) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_lock_cuboid`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`canvas3d_${view}_lock_cuboid`);
}); });
[ [
['canvas3d_topview_change_label_cuboid.png', 'canvas3d_topview_lock_cuboid.png'], ['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]) => { ].forEach(([viewAfterCubiodChangeLabel, viewAfterCubiodLock]) => {
cy.compareImagesAndCheckResult(`${screenshotsPath}/${viewAfterCubiodChangeLabel}`, `${screenshotsPath}/${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'); cy.get('.cvat-object-item-button-lock').should('exist').trigger('mouseout');
['topview', 'sideview', 'frontview'].forEach((view) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_unlock_cuboid`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`canvas3d_${view}_unlock_cuboid`);
}); });
[ [
['canvas3d_topview_lock_cuboid.png', 'canvas3d_topview_unlock_cuboid.png'], ['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.', () => { 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') cy.get('#cvat-objects-sidebar-state-item-1')
.find('.cvat-object-item-button-occluded') .find('.cvat-object-item-button-occluded')
.click(); // Switch occluded property .click({force: true}); // Switch occluded property
cy.get('.cvat-object-item-button-occluded-enabled').should('exist').trigger('mouseout'); cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_enable_occlud_cuboid');
cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_enable_occlud_cuboid');
cy.compareImagesAndCheckResult( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_after_activating_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_after_activating_cuboid.png`,
`${screenshotsPath}/canvas3d_perspective_enable_occlud_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-enabled').click({force: true}); // Switch occluded property again
cy.get('.cvat-object-item-button-occluded').should('exist').trigger('mouseout'); cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_disable_occlud_cuboid');
cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_disable_occlud_cuboid');
cy.compareImagesAndCheckResult( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_enable_occlud_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_enable_occlud_cuboid.png`,
`${screenshotsPath}/canvas3d_perspective_disable_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.', () => { 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') cy.get('#cvat-objects-sidebar-state-item-1')
.find('.cvat-object-item-button-hidden') .find('.cvat-object-item-button-hidden')
.click(); // Hide the cuboid .click({force: true}); // Hide the cuboid
cy.get('.cvat-object-item-button-hidden-enabled').should('exist').trigger('mouseout'); cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_hide_cuboid');
cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_hide_cuboid');
cy.compareImagesAndCheckResult( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_disable_occlud_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_disable_occlud_cuboid.png`,
`${screenshotsPath}/canvas3d_perspective_hide_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_hide_cuboid.png`,
); );
['topview', 'sideview', 'frontview'].forEach((view) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_hide_cuboid`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`canvas3d_${view}_hide_cuboid`);
}); });
[ [
['canvas3d_topview_unlock_cuboid.png', 'canvas3d_topview_hide_cuboid.png'], ['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]) => { ].forEach(([viewAfterCubiodUnlock, viewAfterCubiodHide]) => {
cy.compareImagesAndCheckResult(`${screenshotsPath}/${viewAfterCubiodUnlock}`, `${screenshotsPath}/${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-enabled').click({force: true}); // Unhide the cuboid
cy.get('.cvat-object-item-button-hidden').should('exist').trigger('mouseout'); cy.customScreenshot('.cvat-canvas3d-perspective', 'canvas3d_perspective_unhide_cuboid');
cy.get('.cvat-canvas3d-perspective').screenshot('canvas3d_perspective_unhide_cuboid');
cy.compareImagesAndCheckResult( cy.compareImagesAndCheckResult(
`${screenshotsPath}/canvas3d_perspective_hide_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_hide_cuboid.png`,
`${screenshotsPath}/canvas3d_perspective_unhide_cuboid.png`, `${screenshotsPath}/canvas3d_perspective_unhide_cuboid.png`,
); );
['topview', 'sideview', 'frontview'].forEach((view) => { ['topview', 'sideview', 'frontview'].forEach((view) => {
cy.get(`.cvat-canvas3d-${view}`) cy.customScreenshot(`.cvat-canvas3d-${view}`, `canvas3d_${view}_unhide_cuboid`);
.find('.cvat-canvas3d-fullsize')
.screenshot(`canvas3d_${view}_unhide_cuboid`);
}); });
[ [
['canvas3d_topview_hide_cuboid.png', 'canvas3d_topview_unhide_cuboid.png'], ['canvas3d_topview_hide_cuboid.png', 'canvas3d_topview_unhide_cuboid.png'],

@ -11,6 +11,8 @@ context('Canvas 3D functionality. Make a copy.', () => {
const secondLabel = 'car'; const secondLabel = 'car';
const cuboidCreationParams = { const cuboidCreationParams = {
labelName: labelName, labelName: labelName,
x: 480,
y: 160,
}; };
before(() => { before(() => {
@ -29,7 +31,7 @@ context('Canvas 3D functionality. Make a copy.', () => {
.trigger('mouseout'); .trigger('mouseout');
cy.get('#cvat-objects-sidebar-state-item-1').find('[aria-label="more"]').click(); 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('.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') cy.get('#cvat-objects-sidebar-state-item-1')
.invoke('attr', 'style') .invoke('attr', 'style')
.then((bgColor) => { .then((bgColor) => {
@ -38,9 +40,9 @@ context('Canvas 3D functionality. Make a copy.', () => {
}); });
it('Make a copy via hot keys.', () => { 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('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) => { cy.get('.cvat-objects-sidebar-state-item').then((sideBarItems) => {
expect(sideBarItems.length).to.be.equal(3); 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.', () => { 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('#cvat-objects-sidebar-state-item-2').should('have.class', 'cvat-objects-sidebar-state-active-item');
cy.get('body').type('{Ctrl}c'); cy.get('body').type('{Ctrl}c');
cy.get('.cvat-player-next-button').click().wait(1000); cy.get('.cvat-player-next-button').click().wait(1000);
cy.get('body').type('{Ctrl}v'); 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) => { cy.get('.cvat-objects-sidebar-state-item').then((sideBarItems) => {
expect(sideBarItems.length).to.be.equal(1); expect(sideBarItems.length).to.be.equal(1);
}); });
cy.get('.cvat-player-previous-button').click().wait(1000);
}); });
}); });
}); });

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

@ -15,9 +15,11 @@ Uncaught (in promise) Error: . "{\"detail\":\"Authentication credentials were no
at Object.getData (server-proxy.js:841) 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. 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 issueId = '1823';
const labelName = `Issue ${issueId}`; const labelName = `Issue ${issueId}`;
const taskName = `New annotation task for ${labelName}`; const taskName = `New annotation task for ${labelName}`;

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

@ -6,7 +6,7 @@
Cypress.Commands.add('compareImagesAndCheckResult', (baseImage, afterImage, noChangesExpected) => { Cypress.Commands.add('compareImagesAndCheckResult', (baseImage, afterImage, noChangesExpected) => {
cy.compareImages(baseImage, afterImage).then((diffPercent) => { 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.wait(1000); // Waiting for a cuboid creation
cy.get('.cvat-draw-cuboid-popover').should('be.hidden'); 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});
});

Loading…
Cancel
Save