Skip to content

Commit a69220c

Browse files
2 parents 5c84b05 + eb7b8cc commit a69220c

14 files changed

+400
-8
lines changed

.github/workflows/CI-Suite.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ jobs:
5454
with:
5555
browser: chrome
5656
command: | #EDITAR AQUÍ EL ARCHIVO SUITE A EJECUTAR:
57-
yarn file cypress/e2e/Tests/Elements/GX-23192-download-and-upload.cy.js
57+
yarn file cypress/e2e/Tests/Interactions/GX2-4365-Droppable.cy.js
5858
5959
- name: ✅Import Test Results to Xray
6060
if: always()
@@ -64,8 +64,8 @@ jobs:
6464
password: ${{secrets.XRAY_CLIENT_SECRET}}
6565
testFormat: 'junit' #OPCIONES PARA CAMBIAR: 'junit' (para xml) o 'cucumber' (para json)
6666
testPaths: 'reports/test-results.xml' #OPCIONES: '/test-results.xml' o 'cucumber-report.json'
67-
testExecKey: 'GX-23194' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
68-
projectKey: 'GX' #EDITAR EN CASO DE TRABAJAR CON OTRO PROYECTO.
67+
testExecKey: 'GX2-4367' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
68+
projectKey: 'GX2' #EDITAR EN CASO DE TRABAJAR CON OTRO PROYECTO.
6969

7070
- name: 🔔Slack Notification of Done
7171
if: always()

cypress.config.js

-3
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,5 @@ export default defineConfig({
5555
allure: true,
5656
allureReuseAfterSpec: true,
5757
allureResultsPath: 'reports/allure-results',
58-
endpoint: {
59-
textBox: "/text-box/",
60-
}
6158
},
6259
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import { droppable } from '@pages/Interactions/GX2-4365-Droppable.page';
2+
import { removeLogs } from '@helper/RemoveLogs';
3+
import data from '../../../fixtures/data/GX2-4365-Droppable.Page.json';
4+
5+
describe('This is your test project title', () => {
6+
beforeEach(() => {
7+
droppable.visit();
8+
droppable.tabSimple().should('have.attr', 'aria-selected', 'true');
9+
});
10+
11+
it('4366 | TC 1: Validate Tabs “Simple must be shown', () => {
12+
droppable.SeleccionarSimple();
13+
droppable.tabSimple().should('have.attr', 'aria-selected', 'true');
14+
droppable.tabAccept().should('have.attr', 'aria-selected', 'false');
15+
droppable.tabPropogation().should('have.attr', 'aria-selected', 'false');
16+
droppable.tabRevert().should('have.attr', 'aria-selected', 'false');
17+
});
18+
19+
it('4366 | TC 2: Validate tab “Accept” must be shown', () => {
20+
droppable.SeleccionarAccept();
21+
droppable.tabAccept().should('have.attr', 'aria-selected', 'true');
22+
droppable.tabPropogation().should('have.attr', 'aria-selected', 'false');
23+
droppable.tabRevert().should('have.attr', 'aria-selected', 'false');
24+
droppable.tabSimple().should('have.attr', 'aria-selected', 'false');
25+
});
26+
27+
it('4366 | TC 3: Validate Tabs “Prevent Propagation” must be shown', () => {
28+
droppable.SeleccionarPropogation();
29+
droppable.tabPropogation().should('have.attr', 'aria-selected', 'true');
30+
droppable.tabRevert().should('have.attr', 'aria-selected', 'false');
31+
droppable.tabSimple().should('have.attr', 'aria-selected', 'false');
32+
droppable.tabAccept().should('have.attr', 'aria-selected', 'false');
33+
});
34+
35+
it('4366 | TC 4: Validate Tabs “Revert Draggable” must be shown', () => {
36+
droppable.SeleccionarRevert();
37+
droppable.tabRevert().should('have.attr', 'aria-selected', 'true');
38+
droppable.tabSimple().should('have.attr', 'aria-selected', 'false');
39+
droppable.tabAccept().should('have.attr', 'aria-selected', 'false');
40+
droppable.tabPropogation().should('have.attr', 'aria-selected', 'false');
41+
});
42+
43+
it('4366 | TC 5: Validate tab "Simple” is displayed by default', () => {
44+
droppable.visit();
45+
droppable.tabSimple().should('have.attr', 'aria-selected', 'true');
46+
});
47+
48+
it('4366 | TC 6: Validate on tab simple “Drag me” dashed area must be displayed.', () => {
49+
droppable.SeleccionarSimple();
50+
droppable.draggable().should('exist');
51+
});
52+
53+
it('4366 | TC 7: Validate on tab simple “Drop here” bordered area must be displayed.', () => {
54+
droppable.SeleccionarSimple();
55+
droppable.droppable().should('exist').should('have.text', data.drophere);
56+
});
57+
58+
it('4366 | TC 8: Validate on tab simple when “Drag me” area is dropped on the “Drop here” area the “Drop here” area changes the background color to blue.', () => {
59+
droppable.SeleccionarSimple();
60+
droppable.draggable().drag(data.Droppable, {
61+
force: true,
62+
});
63+
droppable.droppable().should('have.css', 'background-color', data.azul);
64+
});
65+
66+
it('4366 | TC 9: Validate when “Drag me” area is dropped on the “Drop here” area, text “Dropped!” is displayed', () => {
67+
droppable.SeleccionarSimple();
68+
cy.contains('p', 'Drop here');
69+
droppable.draggable().drag(data.Droppable, {
70+
force: true,
71+
});
72+
droppable.droppable().find('p').should('contain', data.dropped);
73+
});
74+
75+
it('4366 | TC 10: Validate “Acceptable” dashed area must be displayed.', () => {
76+
droppable.SeleccionarAccept();
77+
droppable.acceptable().should('exist').should('have.text', data.Acceptable);
78+
});
79+
80+
it('4366 | TC 11: Validate “Not Acceptable” dashed area must be displayed.', () => {
81+
droppable.SeleccionarAccept();
82+
droppable.notAcceptable().should('exist').should('have.text', data.NotAcceptable);
83+
});
84+
85+
it('4366 | TC 12: Validate “Drop here” bordered area must be displayed.', () => {
86+
droppable.SeleccionarAccept();
87+
droppable.droppable().should('exist').should('have.text', data.drophere);
88+
});
89+
90+
it('4366 | TC 13: Validate if “Acceptable” area is dragged then“Drop here” area changes the background color to Green.', () => {
91+
droppable.SeleccionarAccept();
92+
droppable.acceptable().trigger('mousedown', { which: 1 });
93+
droppable.accept().trigger('mousemove');
94+
droppable.accept().should('have.css', 'background-color', data.verdeclaro);
95+
});
96+
97+
it('4366 | TC 14: Validate if “Acceptable” area is dropped in the “Drop here” area then “Drop here” area changes the background color to Blue and text “Dropped!” is displayed.', () => {
98+
droppable.SeleccionarAccept();
99+
droppable.acceptable().drag(data.DatoAccept, { force: true });
100+
droppable.accept().should('have.css', 'background-color', data.azul).should('contain', 'Dropped!');
101+
});
102+
103+
it('4366 | TC 15: Validate “Drag me” dashed area must be displayed..', () => {
104+
droppable.SeleccionarAccept();
105+
droppable.droppable().should('exist').should('have.text', data.drophere);
106+
});
107+
108+
it('4366 | TC 16: Validate “Outer Droppable” bordered area must be displayed and contains “Inner droppable (not greedy)” area inside.', () => {
109+
droppable.SeleccionarPropogation();
110+
droppable.notGreedyInnerDropBox().should('exist').should('have.text', data.TextInnerDroppable);
111+
droppable.notGreedyDropBox().should('include.text', data.Outerdroppable);
112+
});
113+
114+
it('4366 | TC 17: Validate “Outer Droppable” bordered area must be displayed and contains “Inner droppable (greedy)” area inside.', () => {
115+
droppable.SeleccionarPropogation();
116+
droppable.greedyDropBoxInner().should('exist').should('have.text', data.Innerdroppablegreedy);
117+
droppable.greedyDropBox().should('include.text', data.Outerdroppable);
118+
});
119+
120+
it('4366 | TC 18: Validate on the first “Outer Droppable” area, if “Drag me” area is dragged then “Outer Droppable” area changes the background color to Green and Inner droppable (not greedy) area changes the background color to light Green.', () => {
121+
droppable.SeleccionarPropogation();
122+
droppable.draggable().trigger('mousedown', { which: 1, force: true });
123+
droppable.notGreedyInnerDropBox().trigger('mousemove');
124+
droppable.notGreedyInnerDropBox().should('have.css', 'background-color', data.verde);
125+
droppable.notGreedyDropBox().trigger('mousemove', { which: 1, force: true });
126+
droppable.notGreedyDropBox().should('have.css', 'background-color', data.verde);
127+
});
128+
129+
it('4366 | TC 19: Validate on the second "Outer Droppable" área if “Drag me” area is dragged to “Inner droppable (greedy)” area then the “Inner droppable (greedy)” area changes the background color to Light Green and "Outer Droppable" area changes the background color to green', () => {
130+
droppable.SeleccionarPropogation();
131+
droppable.draggable().trigger('mousedown', { which: 1, force: true });
132+
droppable.greedyDropBoxInner().trigger('mousemove', { which: 1, force: true });
133+
droppable.greedyDropBoxInner().should('have.css', 'background-color', data.verde);
134+
droppable.greedyDropBox().trigger('mousemove', { which: 1, force: true });
135+
droppable.greedyDropBox().should('have.css', 'background-color', data.verdeclaro);
136+
});
137+
138+
it('4366 | TC 20: Validate on “Revert Draggable” tab,“Will Revert” dashed area must be displayed.', () => {
139+
droppable.SeleccionarRevert();
140+
droppable.revert().should('exist').should('have.text', data.WillRevert);
141+
});
142+
143+
it('4366 | TC 21: Validate on “Revert Draggable” tab,“Not Revert” dashed area must be displayed.', () => {
144+
droppable.SeleccionarRevert();
145+
droppable.notRevert().should('exist').should('have.text', data.NotRevert);
146+
});
147+
148+
it('4366 | TC 22: Validate on “Revert Draggable” tab,“Drop here” bordered area must be displayed.', () => {
149+
droppable.SeleccionarRevert();
150+
droppable.droppable().should('exist').should('have.text', data.drophere);
151+
});
152+
153+
it('4366 | TC 23: Validate on “Drop here” if “Will Revert” area is dragged then “Drop here” area changes the background color to Green.', () => {
154+
droppable.SeleccionarRevert();
155+
droppable.revert().trigger('mousedown', { which: 1 });
156+
droppable.revertDrop().trigger('mousemove');
157+
droppable.revertDrop().should('have.css', 'background-color', data.verde);
158+
});
159+
160+
it('4366 | TC 24: Validate on “Drop here” if “Not Revert” area is dragged then “Drop here” area changes the background color to Green.', () => {
161+
droppable.SeleccionarRevert();
162+
droppable.notRevert().trigger('mousedown', { which: 1 });
163+
droppable.revertDrop().trigger('mousemove');
164+
droppable.revertDrop().should('have.css', 'background-color', data.verde);
165+
});
166+
167+
it('4366 | TC 25: Validate if “Will Revert” area is dropped on the “Drop here” area then “Will Revert” area goes back to the initial position and “Drop here” area changes the background color to Blue and text “Dropped” is displayed.', () => {
168+
droppable.SeleccionarRevert();
169+
droppable.revert().drag(data.DatoRevert, { force: true });
170+
droppable.revertDrop().should('have.css', 'background-color', data.azul).should('contain', data.dropped);
171+
droppable.revert().should('have.css', 'position', 'relative').and('have.css', 'left', '0px').and('have.css', 'top', '0px');
172+
});
173+
174+
it('4366 | TC 26: Validate on “Drop here” if “Not Revert” area is dropped on the “Drop here” area then “Not Revert” area cant be removed from the “Drop here” area and “Drop here” area changes the background color to Blue and text “Dropped” is displayed', () => {
175+
droppable.SeleccionarRevert();
176+
droppable.notRevert().drag(data.DatoRevert, { force: true });
177+
droppable.revertDrop().should('have.css', 'background-color', data.azul).should('contain', data.dropped);
178+
droppable.notRevert().should('have.css', 'position', 'relative').and('have.css', 'left', '353px');
179+
});
180+
});
181+
182+
removeLogs();

cypress/fixtures/data/GX-22038-TextBox.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,4 @@
2727
}
2828
}
2929
}
30-
}
30+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"DatoAccept": "[id=acceptDropContainer] [class*=drop-box]",
3+
"Droppable": "#droppable",
4+
"TextInnerDroppable": "Inner droppable (not greedy)",
5+
"DatoRevert": "[id=revertableDropContainer] [class*=drop-box]",
6+
"dropped": "Dropped!",
7+
"drophere": "Drop here",
8+
"NotRevert": "Not Revert",
9+
"WillRevert": "Will Revert",
10+
"Outerdroppable": "Outer droppable",
11+
"Innerdroppablegreedy": "Inner droppable (greedy)",
12+
"NotAcceptable": "Not Acceptable",
13+
"Acceptable": "Acceptable",
14+
"verde": "rgb(143, 188, 143)",
15+
"azul": "rgb(70, 130, 180)",
16+
"Innerdroppable": "Inner droppable",
17+
"verdeclaro": "rgb(60, 179, 113)"
18+
}

cypress/support/pages/Interactions/GX2-4027-PageDraggable.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,4 @@ class Draggable {
6767
}
6868
}
6969

70-
export const draggable = new Draggable();
70+
export const draggable = new Draggable();
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
class Droppable {
2+
elements = {
3+
draggable: () => cy.get('#draggable'),
4+
droppable: () => cy.get('#droppable'),
5+
droppable1: () => cy.get('#droppable')[1],
6+
tabSimple: () => cy.get('#droppableExample-tab-simple'),
7+
tabAccept: () => cy.get('#droppableExample-tab-accept'),
8+
acceptable: () => cy.get('#acceptable'),
9+
notAcceptable: () => cy.get('#notAcceptable'),
10+
dragBox: () => cy.get('#dragBox'),
11+
tabPropogation: () => cy.get('#droppableExample-tab-preventPropogation'),
12+
notGreedyDropBox: () => cy.get('#notGreedyDropBox'),
13+
notGreedyInnerDropBox: () => cy.get('#notGreedyInnerDropBox'),
14+
greedyDropBox: () => cy.get('#greedyDropBox'),
15+
greedyDropBoxInner: () => cy.get('#greedyDropBoxInner'),
16+
tabRevert: () => cy.get('#droppableExample-tab-revertable'),
17+
revert: () => cy.get('#revertable'),
18+
notRevert: () => cy.get('#notRevertable'),
19+
contenedorDropSimple: () => cy.get('#simpleDropContainer'),
20+
accept: () => cy.get('[id=acceptDropContainer] [class*=drop-box]'),
21+
revertDrop: () => cy.get('[id=revertableDropContainer] [class*=drop-box]'),
22+
};
23+
notgreedy() {
24+
return this.elements.notgreedy();
25+
}
26+
revertDrop() {
27+
return this.elements.revertDrop();
28+
}
29+
accept() {
30+
return this.elements.accept();
31+
}
32+
visit() {
33+
cy.visit('https://demoqa.com/droppable');
34+
}
35+
draggable() {
36+
return this.elements.draggable();
37+
}
38+
droppable() {
39+
return this.elements.droppable();
40+
}
41+
droppable1() {
42+
return this.elements.droppable1();
43+
}
44+
tabSimple() {
45+
return this.elements.tabSimple();
46+
}
47+
tabAccept() {
48+
return this.elements.tabAccept();
49+
}
50+
tabRevert() {
51+
return this.elements.tabRevert();
52+
}
53+
tabPropogation() {
54+
return this.elements.tabPropogation();
55+
}
56+
57+
acceptable() {
58+
return this.elements.acceptable();
59+
}
60+
notAcceptable() {
61+
return this.elements.notAcceptable();
62+
}
63+
dragBox() {
64+
return this.dragBox();
65+
}
66+
contenedorDropSimple() {
67+
return this.elements.contenedorDropSimple();
68+
}
69+
70+
notGreedyDropBox() {
71+
return this.elements.notGreedyDropBox();
72+
}
73+
notGreedyInnerDropBox() {
74+
return this.elements.notGreedyInnerDropBox();
75+
}
76+
greedyDropBox() {
77+
return this.elements.greedyDropBox();
78+
}
79+
greedyDropBoxInner() {
80+
return this.elements.greedyDropBoxInner();
81+
}
82+
revert() {
83+
return this.elements.revert();
84+
}
85+
notRevert() {
86+
return this.elements.notRevert();
87+
}
88+
getRandomNumber(min, max) {
89+
return Cypress._.random(min, max);
90+
}
91+
92+
SeleccionarSimple() {
93+
this.elements.tabSimple().click();
94+
}
95+
SeleccionarAccept() {
96+
this.elements.tabAccept().click();
97+
}
98+
SeleccionarPropogation() {
99+
this.elements.tabPropogation().click();
100+
}
101+
SeleccionarRevert() {
102+
this.elements.tabRevert().click();
103+
}
104+
}
105+
106+
export const droppable = new Droppable();

0 commit comments

Comments
 (0)