Cypress test. Label constructor. Color label. (#2568)
* Cypress test. Label constructor. Color label. One test adaptation. * Fix test case22. Disable checking tag name. * Some fix. * Add css classes. Update cypress command. * Version updated * Some rework case22 Co-authored-by: Kruchinin <dmitryx.kruchinin@intel.com>main
Dmitry Kruchinin
5 years ago
committed by
GitHub
parent
48b6da9361
commit
e6e6be94f9
@ -0,0 +1,129 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
/// <reference types="cypress" />
|
||||
|
||||
import { taskName } from '../../support/const';
|
||||
|
||||
context('Label constructor. Color label.', () => {
|
||||
const caseId = '31';
|
||||
const labelColor = {
|
||||
redHex: 'ff0000',
|
||||
greenHex: '00ff00',
|
||||
blueHex: '0000ff',
|
||||
yellowHex: 'fcbe03',
|
||||
redRgb: '255, 0, 0',
|
||||
greenRgb: '0, 255, 0',
|
||||
blueRgb: '0, 0, 255',
|
||||
yellowRgb: '252, 190, 3',
|
||||
};
|
||||
const colorRed = 'Color red';
|
||||
const colorGreen = 'Color green';
|
||||
const colorBlue = 'Color blue';
|
||||
const labelAdditionalAttrs = false;
|
||||
|
||||
const createRectangleShape2Points = {
|
||||
points: 'By 2 Points',
|
||||
type: 'Shape',
|
||||
labelName: colorRed,
|
||||
firstX: 100,
|
||||
firstY: 350,
|
||||
secondX: 200,
|
||||
secondY: 450,
|
||||
};
|
||||
const createRectangleShape2PointsSecond = {
|
||||
points: createRectangleShape2Points.points,
|
||||
type: createRectangleShape2Points.type,
|
||||
labelName: colorGreen,
|
||||
firstX: createRectangleShape2Points.firstX + 150,
|
||||
firstY: createRectangleShape2Points.firstY,
|
||||
secondX: createRectangleShape2Points.secondX + 150,
|
||||
secondY: createRectangleShape2Points.secondY,
|
||||
};
|
||||
|
||||
const createRectangleShape2PointsThird = {
|
||||
points: createRectangleShape2Points.points,
|
||||
type: createRectangleShape2Points.type,
|
||||
labelName: colorBlue,
|
||||
firstX: createRectangleShape2PointsSecond.firstX + 150,
|
||||
firstY: createRectangleShape2PointsSecond.firstY,
|
||||
secondX: createRectangleShape2PointsSecond.secondX + 150,
|
||||
secondY: createRectangleShape2PointsSecond.secondY,
|
||||
};
|
||||
|
||||
before(() => {
|
||||
cy.openTask(taskName);
|
||||
});
|
||||
|
||||
after('Remove annotation and save job.', () => {
|
||||
cy.removeAnnotations();
|
||||
cy.saveJob();
|
||||
});
|
||||
|
||||
describe(`Testing case "${caseId}"`, () => {
|
||||
it('To add multiple labels with a color change.', () => {
|
||||
cy.addNewLabel(colorRed, labelAdditionalAttrs, labelColor.redHex);
|
||||
cy.addNewLabel(colorGreen, labelAdditionalAttrs, labelColor.greenHex);
|
||||
cy.addNewLabel(colorBlue, labelAdditionalAttrs, labelColor.blueHex);
|
||||
});
|
||||
|
||||
it('Check color for created labels.', () => {
|
||||
cy.get('.cvat-constructor-viewer-item').then((label) => {
|
||||
for (let i = 0; i < label.length; i++) {
|
||||
if (label[i].textContent === colorRed) {
|
||||
cy.get(label[i]).should('have.attr', 'style').and('contain', labelColor.redRgb);
|
||||
} else if (label[i].textContent === colorGreen) {
|
||||
cy.get(label[i]).should('have.attr', 'style').and('contain', labelColor.greenRgb);
|
||||
} else if (label[i].textContent === colorBlue) {
|
||||
cy.get(label[i]).should('have.attr', 'style').and('contain', labelColor.blueRgb);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('Open the job. Create an objects.', () => {
|
||||
cy.openJob();
|
||||
cy.createRectangle(createRectangleShape2Points);
|
||||
cy.createRectangle(createRectangleShape2PointsSecond);
|
||||
cy.createRectangle(createRectangleShape2PointsThird);
|
||||
});
|
||||
|
||||
it('Created objects and objects on the side panel should have the same solor as label.', () => {
|
||||
cy.get('#cvat_canvas_shape_1').should('have.attr', 'stroke', `#${labelColor.redHex}`);
|
||||
cy.get('#cvat_canvas_shape_2').should('have.attr', 'stroke', `#${labelColor.greenHex}`);
|
||||
cy.get('#cvat_canvas_shape_3').should('have.attr', 'stroke', `#${labelColor.blueHex}`);
|
||||
cy.get('#cvat-objects-sidebar-state-item-1')
|
||||
.should('have.attr', 'style')
|
||||
.and('contain', `background-color: rgba(${labelColor.redRgb}`);
|
||||
cy.get('#cvat-objects-sidebar-state-item-2')
|
||||
.should('have.attr', 'style')
|
||||
.and('contain', `background-color: rgba(${labelColor.greenRgb}`);
|
||||
cy.get('#cvat-objects-sidebar-state-item-3')
|
||||
.should('have.attr', 'style')
|
||||
.and('contain', `background-color: rgba(${labelColor.blueRgb}`);
|
||||
});
|
||||
|
||||
it('Save job and change color for a label.', () => {
|
||||
cy.saveJob();
|
||||
cy.goToTaskList();
|
||||
cy.openTask(taskName);
|
||||
cy.contains('.cvat-constructor-viewer-item', colorRed).within(() => {
|
||||
cy.get('[data-icon="edit"]').click();
|
||||
});
|
||||
cy.get('.cvat-change-task-label-color-button').click();
|
||||
cy.changeColorViaBadge(labelColor.yellowHex);
|
||||
cy.contains('button', 'Done').click();
|
||||
});
|
||||
|
||||
it('Open the job. Existing objects with this label have changed their color.', () => {
|
||||
cy.openJob();
|
||||
cy.getObjectIdNumberByLabelName(colorRed).then((objectId) => {
|
||||
cy.get(`#cvat_canvas_shape_${objectId}`).should('have.attr', 'stroke', `#${labelColor.yellowHex}`);
|
||||
cy.get(`#cvat-objects-sidebar-state-item-${objectId}`)
|
||||
.should('have.attr', 'style')
|
||||
.and('contain', `background-color: rgba(${labelColor.yellowRgb}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue