Cypress test. Ellipse actions. (#4215)

* Update the commands, utils. Case 108 adaptation

* Added/updated tests for ellipse
main
Dmitry Kruchinin 4 years ago committed by GitHub
parent 3c750d4efc
commit 211ae2a789
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,4 +1,4 @@
// Copyright (C) 2020-2021 Intel Corporation // Copyright (C) 2020-2022 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -56,7 +56,15 @@ context('Object make a copy.', () => {
complete: true, complete: true,
numberOfPoints: null, numberOfPoints: null,
}; };
const countObject = 5; const createEllipseShape = {
type: 'Shape',
labelName,
cx: 550,
cy: 100,
rightX: 600,
topY: 150,
};
const countObject = 6;
function checkObjectArrSize(expectedValueShape, expectedValueSidebar) { function checkObjectArrSize(expectedValueShape, expectedValueSidebar) {
cy.get('.cvat_canvas_shape').then(($cvatCanvasShape) => { cy.get('.cvat_canvas_shape').then(($cvatCanvasShape) => {
@ -79,6 +87,9 @@ context('Object make a copy.', () => {
function compareObjectsSidebarAttr(objectSidebar1, objectSidebar2) { function compareObjectsSidebarAttr(objectSidebar1, objectSidebar2) {
cy.get(objectSidebar1).then(($cvatObjectsSidebarStateItem1) => { cy.get(objectSidebar1).then(($cvatObjectsSidebarStateItem1) => {
cy.get(objectSidebar2).then(($cvatObjectsSidebarStateItem2) => { cy.get(objectSidebar2).then(($cvatObjectsSidebarStateItem2) => {
// Check type of a shape
expect($cvatObjectsSidebarStateItem1.text().match(/[a-zA-Z]+/)[0])
.be.eq($cvatObjectsSidebarStateItem2.text().match(/[a-zA-Z]+/)[0]);
expect($cvatObjectsSidebarStateItem1.attr('style')).be.eq($cvatObjectsSidebarStateItem2.attr('style')); expect($cvatObjectsSidebarStateItem1.attr('style')).be.eq($cvatObjectsSidebarStateItem2.attr('style'));
}); });
}); });
@ -90,6 +101,7 @@ context('Object make a copy.', () => {
cy.createCuboid(createCuboidShape2Points); cy.createCuboid(createCuboidShape2Points);
cy.createPolygon(createPolygonShape); cy.createPolygon(createPolygonShape);
cy.createPolyline(createPolylinesShape); cy.createPolyline(createPolylinesShape);
cy.createEllipse(createEllipseShape);
cy.createPoint(createPointsShape); cy.createPoint(createPointsShape);
cy.createTag(labelName); cy.createTag(labelName);
}); });
@ -102,7 +114,8 @@ context('Object make a copy.', () => {
cy.get(`#cvat-objects-sidebar-state-item-${id}`).within(() => { cy.get(`#cvat-objects-sidebar-state-item-${id}`).within(() => {
cy.get('[aria-label="more"]').trigger('mouseover').wait(300); // Wait dropdown menu transition cy.get('[aria-label="more"]').trigger('mouseover').wait(300); // Wait dropdown menu transition
}); });
cy.get('.cvat-object-item-menu').last().should('be.visible').contains('button', 'Make a copy').click(); // Get the last element from cvat-object-item-menu array // Get the last element from cvat-object-item-menu array
cy.get('.cvat-object-item-menu').last().should('be.visible').contains('button', 'Make a copy').click();
cy.get('.cvat-canvas-container').click(coordX, coordY); cy.get('.cvat-canvas-container').click(coordX, coordY);
cy.get('.cvat-canvas-container').click(); cy.get('.cvat-canvas-container').click();
coordX += 100; coordX += 100;
@ -110,16 +123,16 @@ context('Object make a copy.', () => {
}); });
it('After copying via sidebar, the attributes of the objects are the same.', () => { it('After copying via sidebar, the attributes of the objects are the same.', () => {
checkObjectArrSize(10, 12); checkObjectArrSize(12, 14);
for (let id = 1; id < countObject; id++) { for (let id = 1; id < countObject; id++) {
// Parameters id 1 equal patameters id 7, 2 to 8, etc. // Parameters id 1 equal patameters id 8, 2 to 9, etc.
compareObjectsAttr(`#cvat_canvas_shape_${id}`, `#cvat_canvas_shape_${id + countObject + 1}`); compareObjectsAttr(`#cvat_canvas_shape_${id}`, `#cvat_canvas_shape_${id + countObject + 1}`);
} }
for (let idSidebar = 1; idSidebar < 7; idSidebar++) { for (let idSidebar = 1; idSidebar < 7; idSidebar++) {
compareObjectsSidebarAttr( compareObjectsSidebarAttr(
`#cvat-objects-sidebar-state-item-${idSidebar}`, `#cvat-objects-sidebar-state-item-${idSidebar}`,
`#cvat-objects-sidebar-state-item-${idSidebar + countObject + 1}`, `#cvat-objects-sidebar-state-item-${idSidebar + countObject + 1}`,
); // Parameters sidebar id 1 equal patameters sidebar id 7, 2 to 8, etc. ); // Parameters sidebar id 1 equal patameters sidebar id 8, 2 to 9, etc.
} }
}); });
@ -140,7 +153,8 @@ context('Object make a copy.', () => {
.find('[aria-label="more"]') .find('[aria-label="more"]')
.trigger('mouseover') .trigger('mouseover')
.wait(300); // Wait dropdown menu transition; .wait(300); // Wait dropdown menu transition;
cy.get('.cvat-object-item-menu').last().should('be.visible').contains('button', 'Make a copy').click(); // Get the last element from cvat-object-item-menu array // Get the last element from cvat-object-item-menu array
cy.get('.cvat-object-item-menu').last().should('be.visible').contains('button', 'Make a copy').click();
cy.get('.cvat-canvas-container').click(coordX, coordY); cy.get('.cvat-canvas-container').click(coordX, coordY);
cy.get('.cvat-canvas-container').click(); // Deactivate all objects and hide context menu cy.get('.cvat-canvas-container').click(); // Deactivate all objects and hide context menu
coordX += 100; coordX += 100;
@ -151,16 +165,16 @@ context('Object make a copy.', () => {
'After copying via object context menu, the attributes of the objects are the same.', 'After copying via object context menu, the attributes of the objects are the same.',
{ browser: '!firefox' }, { browser: '!firefox' },
() => { () => {
checkObjectArrSize(14, 16); // The point and tag was not copied via the object's context menu checkObjectArrSize(17, 19); // The point and tag was not copied via the object's context menu
for (let id = 1; id < countObject; id++) { for (let id = 1; id < countObject; id++) {
// Parameters id 1 equal patameters id 13, 2 to 14, etc. // Parameters id 1 equal patameters id 13, 2 to 14, etc.
compareObjectsAttr(`#cvat_canvas_shape_${id}`, `#cvat_canvas_shape_${id + countObject + 7}`); compareObjectsAttr(`#cvat_canvas_shape_${id}`, `#cvat_canvas_shape_${id + countObject + 8}`);
} }
for (let idSidebar = 1; idSidebar < 6; idSidebar++) { for (let idSidebar = 1; idSidebar < 6; idSidebar++) {
compareObjectsSidebarAttr( compareObjectsSidebarAttr(
`#cvat-objects-sidebar-state-item-${idSidebar}`, `#cvat-objects-sidebar-state-item-${idSidebar}`,
`#cvat-objects-sidebar-state-item-${idSidebar + countObject + 6}`, `#cvat-objects-sidebar-state-item-${idSidebar + countObject + 8}`,
); // Parameters sidebar id 1 equal patameters sidebar id 13, 2 to 14, etc. ); // Parameters sidebar id 1 equal patameters sidebar id 15, 2 to 16, etc.
} }
}, },
); );

@ -1,10 +1,11 @@
// Copyright (C) 2021 Intel Corporation // Copyright (C) 2021-2022 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
/// <reference types="cypress" /> /// <reference types="cypress" />
import { labelName, taskName } from '../../support/const'; import { labelName, taskName } from '../../support/const';
import { decomposeMatrix } from '../../support/utils';
context('Rotated bounding boxes.', () => { context('Rotated bounding boxes.', () => {
const caseId = '108'; const caseId = '108';
@ -27,42 +28,6 @@ context('Rotated bounding boxes.', () => {
secondY: createRectangleShape2Points.secondY - 150, secondY: createRectangleShape2Points.secondY - 150,
}; };
function deltaTransformPoint(matrix, point) {
const dx = point.x * matrix.a + point.y * matrix.c;
const dy = point.x * matrix.b + point.y * matrix.d;
return { x: dx, y: dy };
}
function decomposeMatrix(matrix) {
const px = deltaTransformPoint(matrix, { x: 0, y: 1 });
const skewX = ((180 / Math.PI) * Math.atan2(px.y, px.x) - 90).toFixed(1);
return skewX;
}
function testShapeRotate(shape, x, y, expectedRotateDeg, pressShift) {
cy.get(shape)
.trigger('mousemove')
.trigger('mouseover')
.should('have.class', 'cvat_canvas_shape_activated');
cy.get('.cvat-canvas-container')
.trigger('mousemove', x, y)
.trigger('mouseenter', x, y);
cy.get('.svg_select_points_rot').should('have.class', 'cvat_canvas_selected_point');
cy.get('.cvat-canvas-container').trigger('mousedown', x, y, { button: 0 });
if (pressShift) {
cy.get('body').type('{shift}', { release: false });
}
cy.get('.cvat-canvas-container').trigger('mousemove', x + 20, y);
cy.get(shape).should('have.attr', 'transform');
cy.document().then((doc) => {
const modShapeIDString = shape.substring(1); // Remove "#" from the shape id string
const shapeTranformMatrix = decomposeMatrix(doc.getElementById(modShapeIDString).getCTM());
cy.get('#cvat_canvas_text_content').should('contain.text', `${shapeTranformMatrix}°`);
expect(`${expectedRotateDeg}°`).to.be.equal(`${shapeTranformMatrix}°`);
});
cy.get('.cvat-canvas-container').trigger('mouseup');
}
function testCompareRotate(shape, toFrame) { function testCompareRotate(shape, toFrame) {
for (let frame = 8; frame >= toFrame; frame--) { for (let frame = 8; frame >= toFrame; frame--) {
cy.document().then((doc) => { cy.document().then((doc) => {
@ -101,13 +66,13 @@ context('Rotated bounding boxes.', () => {
describe(`Testing case "${caseId}"`, () => { describe(`Testing case "${caseId}"`, () => {
it('Check that bounding boxes can be rotated.', () => { it('Check that bounding boxes can be rotated.', () => {
testShapeRotate( cy.shapeRotate(
'#cvat_canvas_shape_1', '#cvat_canvas_shape_1',
(createRectangleShape2Points.firstX + createRectangleShape2Points.secondX) / 2, (createRectangleShape2Points.firstX + createRectangleShape2Points.secondX) / 2,
createRectangleShape2Points.firstY + 20, createRectangleShape2Points.firstY + 20,
'33.7', '33.7',
); );
testShapeRotate( cy.shapeRotate(
'#cvat_canvas_shape_2', '#cvat_canvas_shape_2',
(createRectangleTrack2Points.firstX + createRectangleTrack2Points.secondX) / 2, (createRectangleTrack2Points.firstX + createRectangleTrack2Points.secondX) / 2,
createRectangleTrack2Points.firstY + 20, createRectangleTrack2Points.firstY + 20,
@ -130,7 +95,7 @@ context('Rotated bounding boxes.', () => {
} }
}); });
testShapeRotate('#cvat_canvas_shape_2', 320, 225, '53.0'); cy.shapeRotate('#cvat_canvas_shape_2', 320, 225, '53.0');
// Comparison of the values of the shape attribute of the current frame with the previous frame // Comparison of the values of the shape attribute of the current frame with the previous frame
testCompareRotate('cvat_canvas_shape_2', 0); testCompareRotate('cvat_canvas_shape_2', 0);
@ -155,7 +120,7 @@ context('Rotated bounding boxes.', () => {
cy.get('#cvat_canvas_shape_4').should('be.visible'); cy.get('#cvat_canvas_shape_4').should('be.visible');
cy.goCheckFrameNumber(9); cy.goCheckFrameNumber(9);
testShapeRotate( cy.shapeRotate(
'#cvat_canvas_shape_4', '#cvat_canvas_shape_4',
(createRectangleShape2Points.firstX + createRectangleShape2Points.secondX) / 2, (createRectangleShape2Points.firstX + createRectangleShape2Points.secondX) / 2,
createRectangleShape2Points.firstY + 20, createRectangleShape2Points.firstY + 20,
@ -182,8 +147,8 @@ context('Rotated bounding boxes.', () => {
it('Check rotation with hold Shift button.', () => { it('Check rotation with hold Shift button.', () => {
cy.goCheckFrameNumber(0); cy.goCheckFrameNumber(0);
testShapeRotate('#cvat_canvas_shape_4', 320, 375, '60.0', true); cy.shapeRotate('#cvat_canvas_shape_4', 320, 375, '60.0', true);
testShapeRotate('#cvat_canvas_shape_4', 325, 385, '75.0', true); cy.shapeRotate('#cvat_canvas_shape_4', 325, 385, '75.0', true);
}); });
it('Copy/paste a rotated shape.', () => { it('Copy/paste a rotated shape.', () => {

@ -0,0 +1,96 @@
// Copyright (C) 2022 Intel Corporation
//
// SPDX-License-Identifier: MIT
/// <reference types="cypress" />
import { taskName, labelName } from '../../support/const';
import { decomposeMatrix } from '../../support/utils';
context('Actions on ellipse.', () => {
const caseId = '115';
const newLabelName = `Case ${caseId}`;
const createEllipseShape = {
type: 'Shape',
labelName,
cx: 250,
cy: 350,
rightX: 450,
topY: 280,
};
const createEllipseTrack = {
type: 'Track',
labelName,
cx: createEllipseShape.cx,
cy: createEllipseShape.cy - 150,
rightX: createEllipseShape.rightX,
topY: createEllipseShape.topY - 150,
};
const createEllipseShapeSwitchLabel = {
type: 'Shape',
labelName: newLabelName,
cx: createEllipseShape.cx + 250,
cy: createEllipseShape.cy,
rightX: createEllipseShape.rightX + 250,
topY: createEllipseShape.topY,
};
const createEllipseTrackSwitchLabel = {
type: 'Track',
labelName: newLabelName,
cx: createEllipseShape.cx + 250,
cy: createEllipseShape.cy - 150,
rightX: createEllipseShape.rightX + 250,
topY: createEllipseShape.topY - 150,
};
function testCompareRotate(shape, toFrame) {
for (let frame = 8; frame >= toFrame; frame--) {
cy.document().then((doc) => {
const shapeTranformMatrix = decomposeMatrix(doc.getElementById(shape).getCTM());
cy.goToPreviousFrame(frame);
cy.document().then((doc2) => {
const shapeTranformMatrix2 = decomposeMatrix(doc2.getElementById(shape).getCTM());
expect(shapeTranformMatrix).not.deep.eq(shapeTranformMatrix2);
});
});
}
}
before(() => {
cy.openTask(taskName);
cy.addNewLabel(newLabelName);
cy.openJob();
});
describe(`Testing case "${caseId}"`, () => {
it('Draw a ellipse shape, track, second label.', () => {
cy.createEllipse(createEllipseShape);
cy.createEllipse(createEllipseTrack);
cy.createEllipse(createEllipseShapeSwitchLabel);
cy.createEllipse(createEllipseTrackSwitchLabel);
});
it('Ellipse rotation/interpolation.', () => {
Cypress.config('scrollBehavior', false);
cy.get('.cvat-player-last-button').click();
cy.shapeRotate(
'#cvat_canvas_shape_4',
(createEllipseTrackSwitchLabel.rightX + createEllipseTrackSwitchLabel.cx) / 2,
createEllipseTrackSwitchLabel.topY + 20,
'53.1',
false,
false,
);
testCompareRotate('cvat_canvas_shape_4', 0);
// Rotation with shift
cy.shapeRotate(
'#cvat_canvas_shape_4',
(createEllipseTrackSwitchLabel.rightX + createEllipseTrackSwitchLabel.cx) / 2,
createEllipseTrackSwitchLabel.topY + 20,
'60.0',
true,
false,
);
});
});
});

@ -1,4 +1,4 @@
// Copyright (C) 2020-2021 Intel Corporation // Copyright (C) 2020-2022 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -67,6 +67,14 @@ context('Filters functionality.', () => {
], ],
numberOfPoints: 4, numberOfPoints: 4,
}; };
const createEllipseTrack = {
type: 'Track',
labelName: labelTrack,
cx: 250,
cy: 350,
rightX: 450,
topY: 280,
};
const cvatCanvasShapeList = []; const cvatCanvasShapeList = [];
const cvatFiltesList = []; const cvatFiltesList = [];
@ -101,6 +109,7 @@ context('Filters functionality.', () => {
cvatCanvasShapeList.push(Number($cvatCanvasShapeList[i].id.match(/\d+$/))); cvatCanvasShapeList.push(Number($cvatCanvasShapeList[i].id.match(/\d+$/)));
} }
}); });
cy.createEllipse(createEllipseTrack);
}); });
it('Filter: shape == "polygon". Only the polygon exist.', () => { it('Filter: shape == "polygon". Only the polygon exist.', () => {
@ -164,7 +173,7 @@ context('Filters functionality.', () => {
value: labelTrack, value: labelTrack,
submit: true, submit: true,
}); });
checkingFilterApplication([2, 4]); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 checkingFilterApplication([2, 4, 5]); // #cvat_canvas_shape_2,4,5, #cvat-objects-sidebar-state-item-2,4,5
cy.clearFilters(); // Clear filters cy.clearFilters(); // Clear filters
}); });
@ -182,8 +191,8 @@ context('Filters functionality.', () => {
labelAttr: 'count points', labelAttr: 'count points',
submit: true, submit: true,
}); });
// #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 // #cvat_canvas_shape_2,4,5, #cvat-objects-sidebar-state-item-2,4,5
checkingFilterApplication([2, 4]); checkingFilterApplication([2, 4, 5]);
cy.clearFilters(); // Clear filters cy.clearFilters(); // Clear filters
}); });
@ -200,8 +209,8 @@ context('Filters functionality.', () => {
value: 'Height', value: 'Height',
submit: true, submit: true,
}); });
// #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4 // #cvat_canvas_shape_1,2,3,4,5, #cvat-objects-sidebar-state-item-1,2,3,4,5
checkingFilterApplication([1, 2, 3, 4]); checkingFilterApplication([1, 2, 3, 4, 5]);
cy.clearFilters(); // Clear filters cy.clearFilters(); // Clear filters
}); });
@ -244,7 +253,7 @@ context('Filters functionality.', () => {
cy.setFilter({ cy.setFilter({
groupIndex: 2, ruleIndex: 3, field: 'Width', operator: '>', value: '60', submit: true, groupIndex: 2, ruleIndex: 3, field: 'Width', operator: '>', value: '60', submit: true,
}); });
checkingFilterApplication([2, 4]); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 checkingFilterApplication([2, 4, 5]); // #cvat_canvas_shape_2,4,5, #cvat-objects-sidebar-state-item-2,4,5
cy.clearFilters(); // Clear filters cy.clearFilters(); // Clear filters
}); });
@ -280,6 +289,22 @@ context('Filters functionality.', () => {
cy.clearFilters(); // Clear filters cy.clearFilters(); // Clear filters
}); });
it('Filter: shape == "ellipse". Only the ellipse exist.', () => {
const textFilter = 'shape == "ellipse"';
cvatFiltesList.push(textFilter);
cy.addFiltersRule(0);
cy.setFilter({
groupIndex: 0,
ruleIndex: 0,
field: 'Shape',
operator: '==',
value: 'ellipse',
submit: true,
});
checkingFilterApplication([5]); // #cvat_canvas_shape_5, #cvat-objects-sidebar-state-item-5
cy.clearFilters(); // Clear filters
});
it('Verify to show all filters', () => { it('Verify to show all filters', () => {
cy.сheckFiltersModalOpened(); cy.сheckFiltersModalOpened();
cy.get('.recently-used-wrapper').trigger('mouseover'); cy.get('.recently-used-wrapper').trigger('mouseover');

@ -1,9 +1,11 @@
// Copyright (C) 2020-2021 Intel Corporation // Copyright (C) 2020-2022 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
/// <reference types="cypress" /> /// <reference types="cypress" />
import { decomposeMatrix } from './utils';
require('cypress-file-upload'); require('cypress-file-upload');
require('../plugins/imageGenerator/imageGeneratorCommand'); require('../plugins/imageGenerator/imageGeneratorCommand');
require('../plugins/createZipArchive/createZipArchiveCommand'); require('../plugins/createZipArchive/createZipArchiveCommand');
@ -799,3 +801,30 @@ Cypress.Commands.add('exportTask', ({
cy.get('.cvat-notification-notice-export-task-start').should('be.visible'); cy.get('.cvat-notification-notice-export-task-start').should('be.visible');
cy.closeNotification('.cvat-notification-notice-export-task-start'); cy.closeNotification('.cvat-notification-notice-export-task-start');
}); });
// FIXME: remove "checkText" after implementstion for ellipse
Cypress.Commands.add('shapeRotate', (shape, x, y, expectedRotateDeg, pressShift, checkText = true) => {
cy.get(shape)
.trigger('mousemove')
.trigger('mouseover')
.should('have.class', 'cvat_canvas_shape_activated');
cy.get('.cvat-canvas-container')
.trigger('mousemove', x, y)
.trigger('mouseenter', x, y);
cy.get('.svg_select_points_rot').should('have.class', 'cvat_canvas_selected_point');
cy.get('.cvat-canvas-container').trigger('mousedown', x, y, { button: 0 });
if (pressShift) {
cy.get('body').type('{shift}', { release: false });
}
cy.get('.cvat-canvas-container').trigger('mousemove', x + 20, y);
cy.get(shape).should('have.attr', 'transform');
cy.document().then((doc) => {
const modShapeIDString = shape.substring(1); // Remove "#" from the shape id string
const shapeTranformMatrix = decomposeMatrix(doc.getElementById(modShapeIDString).getCTM());
if (checkText) {
cy.get('#cvat_canvas_text_content').should('contain.text', `${shapeTranformMatrix}°`);
}
expect(`${expectedRotateDeg}°`).to.be.equal(`${shapeTranformMatrix}°`);
});
cy.get('.cvat-canvas-container').trigger('mouseup');
});

@ -1,4 +1,4 @@
// Copyright (C) 2021 Intel Corporation // Copyright (C) 2021-2022 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -9,3 +9,15 @@ export function generateString(countPointsToMove, arrow) {
} }
return action; return action;
} }
function deltaTransformPoint(matrix, point) {
const dx = point.x * matrix.a + point.y * matrix.c;
const dy = point.x * matrix.b + point.y * matrix.d;
return { x: dx, y: dy };
}
export function decomposeMatrix(matrix) {
const px = deltaTransformPoint(matrix, { x: 0, y: 1 });
const skewX = ((180 / Math.PI) * Math.atan2(px.y, px.x) - 90).toFixed(1);
return skewX;
}

Loading…
Cancel
Save