Gx 23427 ✅ tools qa forms practice form #410
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| import { removeLogs } from '@helper/RemoveLogs'; | ||
| removeLogs(); | ||
| import { faker } from '@faker-js/faker'; | ||
| import dayjs from 'dayjs'; | ||
| import { form } from '@pages/Forms/GX-23427-PracticeForm.page'; | ||
| import { email, file, field, mobileNumber } from '../../../fixtures/data/GX-23427-PracticeForm'; | ||
|
|
||
| describe('US GX-23427 | ToolsQA | Forms | Practice Form', () => { | ||
| beforeEach('PRC: Usuario debe ubicarse en Practice Form', () => { | ||
| cy.visit('https://demoqa.com/automation-practice-form'); | ||
| }); | ||
|
|
||
| it('23428 | TC01: Validar enviar formulario al ingresar datos válidos', () => { | ||
| //valido los input texts | ||
| const fakeFirstname = faker.name.firstName(); | ||
| const fakeLastname = faker.name.lastName(); | ||
| const fakePhone = faker.datatype.number({ min: 1100000000, max: 1199999999 }); | ||
| const fakeAddress = faker.address.streetAddress(); | ||
| const fakeEmail = faker.internet.email(); | ||
| form.typeFirstname(fakeFirstname); | ||
| form.typeLastname(fakeLastname); | ||
| form.typeEmail(fakeEmail); | ||
| form.typeMobileNumber(fakePhone); | ||
| form.typeAddress(fakeAddress); | ||
|
|
||
| //################# | ||
| //elije genero de manera aleatoria | ||
| const randomGender = Cypress._.random(0, 2); | ||
| form.selectGender(randomGender); | ||
|
|
||
| //fecha por defecto del input-date sea igual a fecha actual | ||
| const currentDate = dayjs().format('DD/MMM/YYYY').split('/').join(' '); | ||
| form.currentDateSelector().should('be.equal', currentDate); | ||
|
|
||
| //valida que se despliegue un menu al clickear sobre el input-date | ||
| form.get | ||
| .datepicker() | ||
| .click() | ||
| .then(t => { | ||
| cy.wrap(t).get('.react-datepicker').should('be.visible'); | ||
| cy.wrap(t).get('.react-datepicker').click(); | ||
| }); | ||
|
|
||
| //seleccion de materias random | ||
| const matching = faker.random.alpha({ count: 1, casing: 'lower', bannedChars: ['f', 'j', 'k', 'ñ', 'q', 'w', 'x', 'z'] }); | ||
| form.subjectsSelector(matching); | ||
|
|
||
| //checkbox | ||
| const randomCheck = Cypress._.random(0, 2); | ||
| form.hobbieChecker(randomCheck); | ||
|
|
||
| //agregar archivo | ||
| form.uploadFile(file.upex_logo); | ||
|
|
||
| //elige ciudad y estado | ||
| const randomLocationByState = Cypress._.random(0, 3); | ||
| form.stateSelector(randomLocationByState); | ||
| form.citySelector(); | ||
|
|
||
| //################# | ||
| form.submitForm(); | ||
|
|
||
| cy.get('.modal-content').should('be.visible'); | ||
| cy.get('tr').eq(1).should('contain', fakeFirstname); | ||
| cy.get('tr').eq(1).should('contain', fakeLastname); | ||
| cy.get('tr').eq(2).should('contain', fakeEmail); | ||
| form.get | ||
| .genderTag() | ||
| .eq(randomGender) | ||
| .invoke('text') | ||
| .then(element => { | ||
| cy.get('tr').eq(3).should('contain', element); | ||
| }); | ||
|
|
||
| cy.get('tr').eq(4).should('contain', fakePhone); | ||
|
|
||
| //tomo el valor de los subjects | ||
| cy.get('[class*="subjects-auto-complete__multi-value__label"]') | ||
| .invoke('text') | ||
| .then(label => { | ||
| cy.get('tr').eq(6).should('contain', label); | ||
| }); | ||
|
|
||
| form.get | ||
| .checkboxTagnames() | ||
| .eq(randomCheck) | ||
| .invoke('text') | ||
| .then(element => { | ||
| cy.get('tr').eq(7).should('contain', element); | ||
| }); | ||
|
|
||
| cy.get('tr').eq(8).should('contain', file.name); | ||
| cy.get('tr').eq(9).should('contain', fakeAddress); | ||
|
|
||
| //validate state on popup | ||
| cy.get('.css-1uccc91-singleValue') | ||
| .eq(0) | ||
| .invoke('text') | ||
| .then(txt => { | ||
| cy.get('tr').eq(10).should('contain', txt); | ||
| }); | ||
|
|
||
| //validate city on popup | ||
| cy.get('.css-1uccc91-singleValue') | ||
| .eq(1) | ||
| .invoke('text') | ||
| .then(txt => { | ||
| cy.get('tr').eq(10).should('contain', txt); | ||
| }); | ||
|
|
||
| //valido color de bordes con datos válidos | ||
| form.get.firstname().should('have.css', 'border-color', field.greenBorder); | ||
| form.get.lastname().should('have.css', 'border-color', field.greenBorder); | ||
| form.get.email().should('have.css', 'border-color', field.greenBorder); | ||
| form.get.genderTag().eq(randomGender).should('have.css', 'color', field.greenBorder); | ||
| form.get.mobilenumber().should('have.css', 'border-color', field.greenBorder); | ||
| form.get.datepicker().should('have.css', 'border-color', field.greenBorder); | ||
| form.get.checkboxTagnames().eq(randomCheck).should('have.css', 'color', field.greenBorder); | ||
| form.get.address().should('have.css', 'border-color', field.greenBorder); | ||
| }); | ||
|
|
||
| it.skip('23428 | TC02: Validar NO enviar formulario al ingresar datos inválidos', () => { | ||
| form.typeEmail(email.invalid.noMinimChar.afterAtSign); | ||
| form.typeMobileNumber(mobileNumber.insufficientDigits); | ||
|
|
||
| form.submitForm(); | ||
|
|
||
| //campos que contienen datos no permitidos | ||
| form.get.firstname().should('have.css', 'border-color', field.redBorder); | ||
| form.get.lastname().should('have.css', 'border-color', field.redBorder); | ||
| form.get.email().should('have.css', 'border-color', field.redBorder); | ||
| form.get.mobilenumber().should('have.css', 'border-color', field.redBorder); | ||
| form.get.genderTag().eq(1).should('have.css', 'color', field.redBorder); | ||
|
|
||
| //campos que admiten no contener datos | ||
| form.get.checkboxTagnames().eq(1).should('have.css', 'color', field.greenBorder); | ||
| form.get.address().should('have.css', 'border-color', field.greenBorder); | ||
| }); | ||
|
|
||
| it('23428 | TC03: Validar NO enviar formulario cuando email no contiene @', () => { | ||
| const fakeFirstname = faker.name.firstName(); | ||
| const fakeLastname = faker.name.lastName(); | ||
| const randomGender = Cypress._.random(0, 2); | ||
| form.typeFirstname(fakeFirstname); | ||
| form.typeLastname(fakeLastname); | ||
| form.typeEmail(email.invalid.noAtSign); | ||
| form.typeMobileNumber(mobileNumber.valid); | ||
| form.selectGender(randomGender); | ||
|
|
||
| form.submitForm(); | ||
| form.get.email().should('have.css', 'border-color', field.redBorder); | ||
| }); | ||
|
|
||
| it('23428 | TC04: Validar NO enviar formulario cuando email no contiene 1 caracter alfanumérico antes del @', () => { | ||
| const fakeFirstname = faker.name.firstName(); | ||
| const fakeLastname = faker.name.lastName(); | ||
| const randomGender = Cypress._.random(0, 2); | ||
| form.typeFirstname(fakeFirstname); | ||
| form.typeLastname(fakeLastname); | ||
| form.typeEmail(email.invalid.noMinimChar.beforeAtSign); | ||
| form.typeMobileNumber(mobileNumber.valid); | ||
| form.selectGender(randomGender); | ||
|
|
||
| form.submitForm(); | ||
| form.get.email().should('have.css', 'border-color', field.redBorder); | ||
| }); | ||
|
|
||
| it('23428 | TC05: Validar NO enviar formulario cuando email no contiene "punto" luego de 1 caracter alfanumérico después del @', () => { | ||
| const fakeFirstname = faker.name.firstName(); | ||
| const fakeLastname = faker.name.lastName(); | ||
| const randomGender = Cypress._.random(0, 2); | ||
| form.typeFirstname(fakeFirstname); | ||
| form.typeLastname(fakeLastname); | ||
| form.typeEmail(email.invalid.noDot); | ||
| form.typeMobileNumber(mobileNumber.valid); | ||
| form.selectGender(randomGender); | ||
|
|
||
| form.submitForm(); | ||
| form.get.email().should('have.css', 'border-color', field.redBorder); | ||
| }); | ||
|
|
||
| it('23428 | TC06: Validar NO enviar formulario cuando email no contiene 2 caracteres alfanuméricos después del "punto"', () => { | ||
| const fakeFirstname = faker.name.firstName(); | ||
| const fakeLastname = faker.name.lastName(); | ||
| const randomGender = Cypress._.random(0, 2); | ||
| form.typeFirstname(fakeFirstname); | ||
| form.typeLastname(fakeLastname); | ||
| form.typeEmail(email.invalid.noMinimChar.afterDot); | ||
| form.typeMobileNumber(mobileNumber.valid); | ||
| form.selectGender(randomGender); | ||
|
|
||
| form.submitForm(); | ||
| form.get.email().should('have.css', 'border-color', field.redBorder); | ||
| }); | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| { | ||
| "email": { | ||
| "invalid": { | ||
| "noAtSign": "valid_emailgmail.com", | ||
| "noMinimChar": { | ||
|
There was a problem hiding this comment. Te recuerdo por si acaso el formato de un mail:
|
||
| "beforeAtSign": "@gmail.com", | ||
| "afterAtSign": "invalid_email@", | ||
| "afterDot": "[email protected]" | ||
| }, | ||
| "noDot": "invalid_email@gmailcom" | ||
| } | ||
| }, | ||
|
|
||
| "file": { | ||
| "upex_logo": "cypress/fixtures/images/upexlogo.png", | ||
| "name": "upexlogo" | ||
| }, | ||
|
|
||
| "field": { | ||
| "greenBorder": "rgb(40, 167, 69)", | ||
| "redBorder": "rgb(220, 53, 69)" | ||
| }, | ||
|
|
||
| "mobileNumber": { | ||
| "insufficientDigits": "112345678", | ||
| "valid": "1123456789" | ||
| } | ||
|
|
||
| } | ||
|
There was a problem hiding this comment. Se cambiaron las comillas dobles a simples por configuración del repositorio |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,26 @@ | ||
| //Elementos | ||
| class form { | ||
| get = { | ||
| fullnameImput: () => cy.get('#userName'), | ||
| EmailInput: () => cy.get('#userEmail'), | ||
| currentAddressInput: () => cy.get('#currentAddress'), | ||
| permanentAddressInput: () => cy.get('#permanentAddress'), | ||
| submitBtn: () => cy.get('#submit'), | ||
| textBox: () => cy.get('.mb-1'), | ||
| redBorder: () => cy.get('.field-error'), | ||
| }; | ||
| // Accionables de cypress | ||
| enterName(value) { | ||
| this.get.fullnameImput().type(value); | ||
| } | ||
| enterEmail(value) { | ||
| this.get.EmailInput().type(value); | ||
| } | ||
| enterCurrentAddress(value) { | ||
| this.get.currentAddressInput().type(value); | ||
| } | ||
| enterPermanentAddress(value) { | ||
| this.get.permanentAddressInput().type(value); | ||
| } | ||
| } | ||
| export const textForm = new form(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| class Form { | ||
| //getters | ||
| get = { | ||
| firstname: () => cy.get('#firstName'), | ||
| lastname: () => cy.get('#lastName'), | ||
| email: () => cy.get('#userEmail'), | ||
| gender: () => cy.get('.custom-control.custom-radio.custom-control-inline'), | ||
| genderRadio: () => this.get.gender().find('[id*="gender-radio"]'), //arreglo de tres posiciones -> male - female - other | ||
| genderTag: () => this.get.gender().find('.custom-control-label'), | ||
| mobilenumber: () => cy.get('#userNumber'), | ||
| datepicker: () => cy.get('#dateOfBirthInput'), | ||
| subjectsInput: () => cy.get('#subjectsInput'), | ||
| subjectOptions: () => cy.get('[id^="react-select-2-option"]'), | ||
| hobbieCheckbox: () => cy.get('.custom-control.custom-checkbox.custom-control-inline'), //arreglo de tres posiciones -> sports - reading - music | ||
| checkboxButton: () => this.get.hobbieCheckbox().find('[type="checkbox"]'), | ||
| checkboxTagnames: () => this.get.hobbieCheckbox().find('.custom-control-label'), | ||
| pictureButton: () => cy.get('[type="file"]'), | ||
| address: () => cy.get('#currentAddress'), | ||
| stateButton: () => cy.get('#state .css-tlfecz-indicatorContainer'), | ||
| cityButton: () => cy.get('#city .css-tlfecz-indicatorContainer'), | ||
| statesAndCities: () => cy.get('[class$=-option]'), | ||
| submitButton: () => cy.get('#submit'), | ||
| }; | ||
|
|
||
| //actions - methods | ||
| typeFirstname(randomFirst) { | ||
| this.get.firstname().type(randomFirst); | ||
| } | ||
|
|
||
| typeLastname(randomLast) { | ||
| this.get.lastname().type(randomLast); | ||
| } | ||
|
|
||
| typeEmail(randomEmail) { | ||
| this.get.email().type(randomEmail); | ||
| } | ||
|
|
||
| //selecciona un género de manera aleatoria | ||
| selectGender(randomGender) { | ||
| this.get.genderRadio().eq(randomGender).click({ force: true }); | ||
| } | ||
|
|
||
| typeMobileNumber(number) { | ||
| this.get.mobilenumber().type(number); | ||
| } | ||
|
|
||
| //Nos da una fecha aleatoria del date picker | ||
| currentDateSelector() { | ||
| return this.get.datepicker().invoke('val'); | ||
| } | ||
|
|
||
| //seleccionar un elemento de un dropdown list dinámico | ||
| subjectsSelector(matching) { | ||
|
There was a problem hiding this comment. Muy buena la manera de seleccionar las opciones de este elemento ✨ |
||
| this.get.subjectsInput().type(matching); | ||
| this.get.subjectOptions().then(i => { | ||
| const r = Cypress._.random(0, i.length - 1); | ||
| cy.wrap(i).eq(r).click(); | ||
| }); | ||
| } | ||
|
|
||
| hobbieChecker(randomCheck) { | ||
| this.get.checkboxButton().eq(randomCheck).check({ force: true }); | ||
| } | ||
|
|
||
| uploadFile(file) { | ||
| this.get.pictureButton().selectFile(file); | ||
| } | ||
|
|
||
| typeAddress(text) { | ||
| this.get.address().type(text); | ||
| } | ||
|
|
||
| //DropDown Estático:: Selecciona un estado y luego una ciudad | ||
| stateSelector(randomLocationByState) { | ||
| this.get.stateButton().click(); | ||
| this.get.statesAndCities().eq(randomLocationByState).click({ force: true }); | ||
| } | ||
|
|
||
| citySelector() { | ||
| this.get.cityButton().click(); | ||
| this.get.statesAndCities().then(cityList => { | ||
| const position = Cypress._.random(0, cityList.length - 1); | ||
| cy.wrap(cityList).eq(position).click({ force: true }); | ||
| }); | ||
| } | ||
|
|
||
| submitForm() { | ||
| this.get.submitButton().click(); | ||
| } | ||
| } | ||
|
|
||
| export const form = new Form(); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Por aquí falto la validación de subject, entiendo que en el SUT no pasa que al fallar pero los criterios indican que este campo no debe estar vacío
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No, es lo que estaba por reportar de este bug antes del mantenimiento. El error me lo trae el input Mobile, este campo no puede tener menos de 10 dígitos y en la página de DemoQA me lo marca así, pero al ejecutar el test en Cypress esta prueba no pasa porque el campo me lo toma como correcto si la cantidad de dígitos está entre 1 y 9.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Perfecto ,me parece correcto que sea bug. Lo que te comentaba era por que no estas validando que el campo subject este en rojo ya que en los criterios de aceptacion indica que es un campo que no puede ir vacio,siguiendo esa logica su comportamiento deberia ser igual a los otros campos requeridos
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahora que lo revisé dice que ese campo no puede estar vacío aunque no menciona que se torne rojo al dejarlo así, también es distinto el comportamiento porque no se muestra de ningún color después de enviar datos. Y ahora me doy cuenta que el hecho de que se puedan enviar datos aunque este campo esté vacío también es un bug porque se especifica que no se despliega la info con los datos enviados en este caso.