Skip to content

Commit 01a7dd4

Browse files
ZwitterKanedaZwitterKaneda
authored
Merge pull request #410 from upex-galaxy/GX-23427-✅-tools-qa-forms-practice-form
Merge GX-23427 into QA
2 parents b16b867 + c09580e commit 01a7dd4

File tree

6 files changed

+375
-27
lines changed

6 files changed

+375
-27
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/Interactions/GX2-5137-selectable.cy.js
57+
yarn file cypress/e2e/Tests/Suites/GX-23427-PracticeForm.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: 'GX2-5139' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
68-
projectKey: 'GX2' #EDITAR EN CASO DE TRABAJAR CON OTRO PROYECTO.
67+
testExecKey: 'GX-23429' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
68+
projectKey: 'GX' #EDITAR EN CASO DE TRABAJAR CON OTRO PROYECTO.
6969

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

‎cypress/e2e/Tests/Suites/GX-23427-PracticeForm.cy.js

+195
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import { removeLogs } from '@helper/RemoveLogs';
2+
removeLogs();
3+
import { faker } from '@faker-js/faker';
4+
import dayjs from 'dayjs';
5+
import { form } from '@pages/Forms/GX-23427-PracticeForm.page';
6+
import { email, file, field, mobileNumber } from '../../../fixtures/data/GX-23427-PracticeForm';
7+
8+
describe('US GX-23427 | ToolsQA | Forms | Practice Form', () => {
9+
beforeEach('PRC: Usuario debe ubicarse en Practice Form', () => {
10+
cy.visit('https://demoqa.com/automation-practice-form');
11+
});
12+
13+
it('23428 | TC01: Validar enviar formulario al ingresar datos válidos', () => {
14+
//valido los input texts
15+
const fakeFirstname = faker.name.firstName();
16+
const fakeLastname = faker.name.lastName();
17+
const fakePhone = faker.datatype.number({ min: 1100000000, max: 1199999999 });
18+
const fakeAddress = faker.address.streetAddress();
19+
const fakeEmail = faker.internet.email();
20+
form.typeFirstname(fakeFirstname);
21+
form.typeLastname(fakeLastname);
22+
form.typeEmail(fakeEmail);
23+
form.typeMobileNumber(fakePhone);
24+
form.typeAddress(fakeAddress);
25+
26+
//#################
27+
//elije genero de manera aleatoria
28+
const randomGender = Cypress._.random(0, 2);
29+
form.selectGender(randomGender);
30+
31+
//fecha por defecto del input-date sea igual a fecha actual
32+
const currentDate = dayjs().format('DD/MMM/YYYY').split('/').join(' ');
33+
form.currentDateSelector().should('be.equal', currentDate);
34+
35+
//valida que se despliegue un menu al clickear sobre el input-date
36+
form.get
37+
.datepicker()
38+
.click()
39+
.then(t => {
40+
cy.wrap(t).get('.react-datepicker').should('be.visible');
41+
cy.wrap(t).get('.react-datepicker').click();
42+
});
43+
44+
//seleccion de materias random
45+
const matching = faker.random.alpha({ count: 1, casing: 'lower', bannedChars: ['f', 'j', 'k', 'ñ', 'q', 'w', 'x', 'z'] });
46+
form.subjectsSelector(matching);
47+
48+
//checkbox
49+
const randomCheck = Cypress._.random(0, 2);
50+
form.hobbieChecker(randomCheck);
51+
52+
//agregar archivo
53+
form.uploadFile(file.upex_logo);
54+
55+
//elige ciudad y estado
56+
const randomLocationByState = Cypress._.random(0, 3);
57+
form.stateSelector(randomLocationByState);
58+
form.citySelector();
59+
60+
//#################
61+
form.submitForm();
62+
63+
cy.get('.modal-content').should('be.visible');
64+
cy.get('tr').eq(1).should('contain', fakeFirstname);
65+
cy.get('tr').eq(1).should('contain', fakeLastname);
66+
cy.get('tr').eq(2).should('contain', fakeEmail);
67+
form.get
68+
.genderTag()
69+
.eq(randomGender)
70+
.invoke('text')
71+
.then(element => {
72+
cy.get('tr').eq(3).should('contain', element);
73+
});
74+
75+
cy.get('tr').eq(4).should('contain', fakePhone);
76+
77+
//tomo el valor de los subjects
78+
cy.get('[class*="subjects-auto-complete__multi-value__label"]')
79+
.invoke('text')
80+
.then(label => {
81+
cy.get('tr').eq(6).should('contain', label);
82+
});
83+
84+
form.get
85+
.checkboxTagnames()
86+
.eq(randomCheck)
87+
.invoke('text')
88+
.then(element => {
89+
cy.get('tr').eq(7).should('contain', element);
90+
});
91+
92+
cy.get('tr').eq(8).should('contain', file.name);
93+
cy.get('tr').eq(9).should('contain', fakeAddress);
94+
95+
//validate state on popup
96+
cy.get('.css-1uccc91-singleValue')
97+
.eq(0)
98+
.invoke('text')
99+
.then(txt => {
100+
cy.get('tr').eq(10).should('contain', txt);
101+
});
102+
103+
//validate city on popup
104+
cy.get('.css-1uccc91-singleValue')
105+
.eq(1)
106+
.invoke('text')
107+
.then(txt => {
108+
cy.get('tr').eq(10).should('contain', txt);
109+
});
110+
111+
//valido color de bordes con datos válidos
112+
form.get.firstname().should('have.css', 'border-color', field.greenBorder);
113+
form.get.lastname().should('have.css', 'border-color', field.greenBorder);
114+
form.get.email().should('have.css', 'border-color', field.greenBorder);
115+
form.get.genderTag().eq(randomGender).should('have.css', 'color', field.greenBorder);
116+
form.get.mobilenumber().should('have.css', 'border-color', field.greenBorder);
117+
form.get.datepicker().should('have.css', 'border-color', field.greenBorder);
118+
form.get.checkboxTagnames().eq(randomCheck).should('have.css', 'color', field.greenBorder);
119+
form.get.address().should('have.css', 'border-color', field.greenBorder);
120+
});
121+
122+
it.skip('23428 | TC02: Validar NO enviar formulario al ingresar datos inválidos', () => {
123+
form.typeEmail(email.invalid.noMinimChar.afterAtSign);
124+
form.typeMobileNumber(mobileNumber.insufficientDigits);
125+
126+
form.submitForm();
127+
128+
//campos que contienen datos no permitidos
129+
form.get.firstname().should('have.css', 'border-color', field.redBorder);
130+
form.get.lastname().should('have.css', 'border-color', field.redBorder);
131+
form.get.email().should('have.css', 'border-color', field.redBorder);
132+
form.get.mobilenumber().should('have.css', 'border-color', field.redBorder);
133+
form.get.genderTag().eq(1).should('have.css', 'color', field.redBorder);
134+
135+
//campos que admiten no contener datos
136+
form.get.checkboxTagnames().eq(1).should('have.css', 'color', field.greenBorder);
137+
form.get.address().should('have.css', 'border-color', field.greenBorder);
138+
});
139+
140+
it('23428 | TC03: Validar NO enviar formulario cuando email no contiene @', () => {
141+
const fakeFirstname = faker.name.firstName();
142+
const fakeLastname = faker.name.lastName();
143+
const randomGender = Cypress._.random(0, 2);
144+
form.typeFirstname(fakeFirstname);
145+
form.typeLastname(fakeLastname);
146+
form.typeEmail(email.invalid.noAtSign);
147+
form.typeMobileNumber(mobileNumber.valid);
148+
form.selectGender(randomGender);
149+
150+
form.submitForm();
151+
form.get.email().should('have.css', 'border-color', field.redBorder);
152+
});
153+
154+
it('23428 | TC04: Validar NO enviar formulario cuando email no contiene 1 caracter alfanumérico antes del @', () => {
155+
const fakeFirstname = faker.name.firstName();
156+
const fakeLastname = faker.name.lastName();
157+
const randomGender = Cypress._.random(0, 2);
158+
form.typeFirstname(fakeFirstname);
159+
form.typeLastname(fakeLastname);
160+
form.typeEmail(email.invalid.noMinimChar.beforeAtSign);
161+
form.typeMobileNumber(mobileNumber.valid);
162+
form.selectGender(randomGender);
163+
164+
form.submitForm();
165+
form.get.email().should('have.css', 'border-color', field.redBorder);
166+
});
167+
168+
it('23428 | TC05: Validar NO enviar formulario cuando email no contiene "punto" luego de 1 caracter alfanumérico después del @', () => {
169+
const fakeFirstname = faker.name.firstName();
170+
const fakeLastname = faker.name.lastName();
171+
const randomGender = Cypress._.random(0, 2);
172+
form.typeFirstname(fakeFirstname);
173+
form.typeLastname(fakeLastname);
174+
form.typeEmail(email.invalid.noDot);
175+
form.typeMobileNumber(mobileNumber.valid);
176+
form.selectGender(randomGender);
177+
178+
form.submitForm();
179+
form.get.email().should('have.css', 'border-color', field.redBorder);
180+
});
181+
182+
it('23428 | TC06: Validar NO enviar formulario cuando email no contiene 2 caracteres alfanuméricos después del "punto"', () => {
183+
const fakeFirstname = faker.name.firstName();
184+
const fakeLastname = faker.name.lastName();
185+
const randomGender = Cypress._.random(0, 2);
186+
form.typeFirstname(fakeFirstname);
187+
form.typeLastname(fakeLastname);
188+
form.typeEmail(email.invalid.noMinimChar.afterDot);
189+
form.typeMobileNumber(mobileNumber.valid);
190+
form.selectGender(randomGender);
191+
192+
form.submitForm();
193+
form.get.email().should('have.css', 'border-color', field.redBorder);
194+
});
195+
});

‎cypress/fixtures/data/GX-23427-PracticeForm.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"email": {
3+
"invalid": {
4+
"noAtSign": "valid_emailgmail.com",
5+
"noMinimChar": {
6+
"beforeAtSign": "@gmail.com",
7+
"afterAtSign": "invalid_email@",
8+
"afterDot": "[email protected]"
9+
},
10+
"noDot": "invalid_email@gmailcom"
11+
}
12+
},
13+
14+
"file": {
15+
"upex_logo": "cypress/fixtures/images/upexlogo.png",
16+
"name": "upexlogo"
17+
},
18+
19+
"field": {
20+
"greenBorder": "rgb(40, 167, 69)",
21+
"redBorder": "rgb(220, 53, 69)"
22+
},
23+
24+
"mobileNumber": {
25+
"insufficientDigits": "112345678",
26+
"valid": "1123456789"
27+
}
28+
29+
}

‎cypress/support/pages/Elements/GX-22038-TextBox.Page.js

+23-24
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
//Elementos
22
class form {
3-
get = {
4-
fullnameImput: () => cy.get("#userName"),
5-
EmailInput: () => cy.get("#userEmail"),
6-
currentAddressInput: () => cy.get("#currentAddress"),
7-
permanentAddressInput: () => cy.get("#permanentAddress"),
8-
submitBtn: () => cy.get("#submit"),
9-
textBox: () => cy.get('.mb-1'),
10-
redBorder: () => cy.get('.field-error'),
11-
}
12-
// Accionables de cypress
13-
enterName(value) {
14-
this.get.fullnameImput().type(value);
15-
}
16-
enterEmail(value) {
17-
this.get.EmailInput().type(value);
18-
}
19-
enterCurrentAddress(value) {
20-
this.get.currentAddressInput().type(value)
21-
}
22-
enterPermanentAddress(value) {
23-
this.get.permanentAddressInput().type(value)
24-
}
25-
3+
get = {
4+
fullnameImput: () => cy.get('#userName'),
5+
EmailInput: () => cy.get('#userEmail'),
6+
currentAddressInput: () => cy.get('#currentAddress'),
7+
permanentAddressInput: () => cy.get('#permanentAddress'),
8+
submitBtn: () => cy.get('#submit'),
9+
textBox: () => cy.get('.mb-1'),
10+
redBorder: () => cy.get('.field-error'),
11+
};
12+
// Accionables de cypress
13+
enterName(value) {
14+
this.get.fullnameImput().type(value);
15+
}
16+
enterEmail(value) {
17+
this.get.EmailInput().type(value);
18+
}
19+
enterCurrentAddress(value) {
20+
this.get.currentAddressInput().type(value);
21+
}
22+
enterPermanentAddress(value) {
23+
this.get.permanentAddressInput().type(value);
24+
}
2625
}
27-
export const textForm = new form()
26+
export const textForm = new form();

‎cypress/support/pages/Forms/GX-23427-PracticeForm.page.js

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
class Form {
2+
//getters
3+
get = {
4+
firstname: () => cy.get('#firstName'),
5+
lastname: () => cy.get('#lastName'),
6+
email: () => cy.get('#userEmail'),
7+
gender: () => cy.get('[class*="custom-radio"]'),
8+
genderRadio: () => this.get.gender().find('[id*="gender-radio"]'), //arreglo de tres posiciones -> male - female - other
9+
genderTag: () => this.get.gender().find('.custom-control-label'),
10+
mobilenumber: () => cy.get('#userNumber'),
11+
datepicker: () => cy.get('#dateOfBirthInput'),
12+
subjectsInput: () => cy.get('#subjectsInput'),
13+
subjectOptions: () => cy.get('[id^="react-select-2-option"]'),
14+
hobbieCheckbox: () => cy.get('[class*="custom-checkbox"]'), //arreglo de tres posiciones -> sports - reading - music
15+
checkboxButton: () => this.get.hobbieCheckbox().find('[type="checkbox"]'),
16+
checkboxTagnames: () => this.get.hobbieCheckbox().find('.custom-control-label'),
17+
pictureButton: () => cy.get('[type="file"]'),
18+
address: () => cy.get('#currentAddress'),
19+
stateButton: () => cy.get('#state .css-tlfecz-indicatorContainer'),
20+
cityButton: () => cy.get('#city .css-tlfecz-indicatorContainer'),
21+
statesAndCities: () => cy.get('[class$=-option]'),
22+
submitButton: () => cy.get('#submit'),
23+
};
24+
25+
//actions
26+
typeFirstname(randomFirst) {
27+
this.get.firstname().type(randomFirst);
28+
}
29+
30+
typeLastname(randomLast) {
31+
this.get.lastname().type(randomLast);
32+
}
33+
34+
typeEmail(randomEmail) {
35+
this.get.email().type(randomEmail);
36+
}
37+
38+
//selecciona un género de manera aleatoria
39+
selectGender(randomGender) {
40+
this.get.gender().eq(randomGender).click();
41+
}
42+
43+
typeMobileNumber(number) {
44+
this.get.mobilenumber().type(number);
45+
}
46+
47+
//Nos da una fecha aleatoria del date picker
48+
currentDateSelector() {
49+
return this.get.datepicker().invoke('val');
50+
}
51+
52+
//seleccionar un elemento de un dropdown list dinámico
53+
subjectsSelector(matching) {
54+
this.get.subjectsInput().type(matching);
55+
this.get.subjectOptions().then(i => {
56+
const r = Cypress._.random(0, i.length - 1);
57+
cy.wrap(i).eq(r).click();
58+
});
59+
}
60+
61+
hobbieChecker(randomCheck) {
62+
this.get.hobbieCheckbox().eq(randomCheck).click();
63+
}
64+
65+
uploadFile(file) {
66+
this.get.pictureButton().selectFile(file);
67+
}
68+
69+
typeAddress(text) {
70+
this.get.address().type(text);
71+
}
72+
73+
//DropDown Estático:: Selecciona un estado y luego una ciudad
74+
stateSelector(randomLocationByState) {
75+
this.get.stateButton().click();
76+
this.get.statesAndCities().eq(randomLocationByState).click({ force: true });
77+
}
78+
79+
citySelector() {
80+
this.get.cityButton().click();
81+
this.get.statesAndCities().then(cityList => {
82+
const position = Cypress._.random(0, cityList.length - 1);
83+
cy.wrap(cityList).eq(position).click({ force: true });
84+
});
85+
}
86+
87+
submitForm() {
88+
this.get.submitButton().click();
89+
}
90+
}
91+
92+
export const form = new Form();

0 commit comments

Comments
 (0)