Gx 41632 ✅ tools qa widgets dropdown select menu #524
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| import { faker } from '@faker-js/faker'; | ||
| import data from '@data/Widgets/GX-41632-Dropdown-selectMenu.json'; | ||
| import { selectMenuPage } from '@pages/Widgets/GX-41632-Dropdown-selectMenu.page'; | ||
|
|
||
| describe('GX-41632|ToolsQA | Widgets | Dropdown - Select Menu', () => { | ||
| beforeEach('PRC: visitar la pagina de ToolsQA-Select Menu', () => { | ||
| cy.visit('/select-menu'); | ||
| cy.url().should('contain', 'select-menu'); | ||
| }); | ||
|
|
||
| it('41632 | TC1: validar la funcionalidad del dropdown Select Value.', () => { | ||
| const randomSelectValue = faker.datatype.number({ min: 1, max: 4 }); | ||
| const randomValue = faker.datatype.number({ min: 1, max: 2 }); | ||
| selectMenuPage.clickSelectValue(); | ||
| if (randomSelectValue === 1) { | ||
| if (randomValue == 1) { | ||
| selectMenuPage.selectValueGroup1Option1(); | ||
| selectMenuPage.get.selectValue().should('contain', data.selectValue.group1Option1); | ||
| } else { | ||
| selectMenuPage.selectValueGroup1Option2(); | ||
| selectMenuPage.get.selectValue().should('contain', data.selectValue.group1Option2); | ||
| } | ||
| } | ||
| if (randomSelectValue === 2) { | ||
| if (randomValue == 1) { | ||
| selectMenuPage.selectValueGroup2Option1(); | ||
| selectMenuPage.get.selectValue().should('contain', data.selectValue.group2Option1); | ||
| } else { | ||
| selectMenuPage.selectValueGroup2Option2(); | ||
| selectMenuPage.get.selectValue().should('contain', data.selectValue.group2Option2); | ||
| } | ||
| } | ||
| if (randomSelectValue === 3) { | ||
| selectMenuPage.selectValueRootOption(); | ||
| selectMenuPage.get.selectValue().should('contain', data.selectValue.rootOption); | ||
| } | ||
| if (randomSelectValue === 4) { | ||
| selectMenuPage.selectValueAnotherRootOption(); | ||
| selectMenuPage.get.selectValue().should('contain', data.selectValue.anotherRootOption); | ||
| } | ||
| }); | ||
| it('41632 | TC2: validar la funcionalidad del dropdown Select One.', () => { | ||
| const randomDropdownSelectOne = faker.datatype.number({ min: 0, max: 5 }); | ||
| selectMenuPage.clickSelectOne(); | ||
| if (randomDropdownSelectOne === 0) { | ||
| selectMenuPage.selectOneDr(); | ||
| selectMenuPage.get.selectOne().should('contain', data.selectOne.Dr); | ||
| } | ||
| if (randomDropdownSelectOne === 1) { | ||
| selectMenuPage.selectOneMr(); | ||
| selectMenuPage.get.selectOne().should('contain', data.selectOne.Mr); | ||
| } | ||
| if (randomDropdownSelectOne === 2) { | ||
| selectMenuPage.selectOneMrs(); | ||
| selectMenuPage.get.selectOne().should('contain', data.selectOne.Mrs); | ||
| } | ||
| if (randomDropdownSelectOne === 3) { | ||
| selectMenuPage.selectOneMs(); | ||
| selectMenuPage.get.selectOne().should('contain', data.selectOne.Ms); | ||
| } | ||
| if (randomDropdownSelectOne === 4) { | ||
| selectMenuPage.selectOneProf(); | ||
| selectMenuPage.get.selectOne().should('contain', data.selectOne.Prof); | ||
| } | ||
| if (randomDropdownSelectOne === 5) { | ||
| selectMenuPage.selectOneOther(); | ||
| selectMenuPage.get.selectOne().should('contain', data.selectOne.Other); | ||
| } | ||
| }); | ||
| it('41632 | TC3: validar la funcionalidad del dropdown Old Style Select Menu', () => { | ||
| const randomOldSelectMenu = faker.datatype.number({ min: 0, max: 10 }); | ||
| selectMenuPage.clickOldSelectMenu(randomOldSelectMenu); | ||
| selectMenuPage.get.selectOldMenu().should('contain', data.oldStyleMenu[randomOldSelectMenu]); | ||
| }); | ||
| it('41632 | TC4: validar la funcionalidad del Multiselect dropdown', () => { | ||
|
There was a problem hiding this comment. Me gusta que el código sea iterable, pero creo que pudimos mejorarlo de alguna manera. |
||
| const randomMultiSelect = faker.datatype.number({ min: 0, max: 12 }); | ||
| selectMenuPage.clickMultiSelectDropdown(); | ||
| if (randomMultiSelect === 0) { | ||
| selectMenuPage.multiSelectGreen(); | ||
| cy.get('[class$="multiValue"]').eq(2).should('contain', data.multiSelectDropdown.green); | ||
| } | ||
| if (randomMultiSelect === 1) { | ||
| selectMenuPage.multiSelectBlue(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.blue); | ||
| } | ||
| if (randomMultiSelect === 2) { | ||
| selectMenuPage.multiSelectBlack(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.black); | ||
| } | ||
| if (randomMultiSelect === 3) { | ||
| selectMenuPage.multiSelectRed(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.red); | ||
| } | ||
| if (randomMultiSelect === 4) { | ||
| selectMenuPage.multiSelectGreen(); | ||
| selectMenuPage.multiSelectBlue(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.green) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.blue); | ||
| } | ||
| if (randomMultiSelect === 5) { | ||
| selectMenuPage.multiSelectGreen(); | ||
| selectMenuPage.multiSelectBlack(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.green) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.back); | ||
| } | ||
| if (randomMultiSelect === 6) { | ||
| selectMenuPage.multiSelectGreen(); | ||
| selectMenuPage.multiSelectRed(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.green) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.red); | ||
| } | ||
| if (randomMultiSelect === 7) { | ||
| selectMenuPage.multiSelectBlue(); | ||
| selectMenuPage.multiSelectBlack(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.blue) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.black); | ||
| } | ||
| if (randomMultiSelect === 8) { | ||
| selectMenuPage.multiSelectBlue(); | ||
| selectMenuPage.multiSelectRed(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.blue) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.red); | ||
| } | ||
| if (randomMultiSelect === 9) { | ||
| selectMenuPage.multiSelectGreen(); | ||
| selectMenuPage.multiSelectBlue(); | ||
| selectMenuPage.multiSelectBlack(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.green) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.blue) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.black); | ||
| } | ||
| if (randomMultiSelect === 10) { | ||
| selectMenuPage.multiSelectBlue(); | ||
| selectMenuPage.multiSelectBlack(); | ||
| selectMenuPage.multiSelectRed(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.blue) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.black) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.red); | ||
| } | ||
| if (randomMultiSelect === 11) { | ||
| selectMenuPage.multiSelectGreen(); | ||
| selectMenuPage.multiSelectRed(); | ||
| selectMenuPage.multiSelectBlack(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.green) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.red) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.black); | ||
| } | ||
| if (randomMultiSelect === 12) { | ||
| selectMenuPage.multiSelectGreen(); | ||
| selectMenuPage.multiSelectBlue(); | ||
| selectMenuPage.multiSelectBlack(); | ||
| selectMenuPage.multiSelectRed(); | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.green) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.blue) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.black) && | ||
| cy.get('[class$="multiValue"]').should('contain', data.multiSelectDropdown.red); | ||
| } | ||
| }); | ||
| it('41632 | TC5: validar la funcionalidad de Standard multi select', () => { | ||
| const randomStandarMultiSelect = faker.datatype.number({ min: 0, max: 3 }); | ||
| selectMenuPage.clickStandarMultiSelect(randomStandarMultiSelect); | ||
| selectMenuPage.get.standarMultiSelect().should('contain', data.standarMultiSelect[randomStandarMultiSelect]); | ||
| }); | ||
| }); | ||
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,26 @@ | ||
| { | ||
|
There was a problem hiding this comment. Me gusta esta data! la estructura |
||
| "selectValue": { | ||
| "group1Option1": "Group 1, option 1", | ||
| "group1Option2": "Group 1, option 2", | ||
| "group2Option1": "Group 2, option 1", | ||
| "group2Option2": "Group 2, option 2", | ||
| "rootOption": "A root option", | ||
| "anotherRootOption": "Another root option" | ||
| }, | ||
| "selectOne": { | ||
| "Dr": "Dr.", | ||
| "Mr": "Mr.", | ||
| "Mrs": "Mrs.", | ||
| "Ms": "Ms.", | ||
| "Prof": "Prof.", | ||
| "Other": "Other" | ||
| }, | ||
| "oldStyleMenu": ["Red", "Blue", "Green", "Yellow", "Purple", "Black", "White", "Voilet", "Indigo", "Magenta", "Aqua"], | ||
| "multiSelectDropdown": { | ||
| "green": "Green", | ||
| "blue": "Blue", | ||
| "black": "Black", | ||
| "red": "Red" | ||
| }, | ||
| "standarMultiSelect": ["Volvo", "Saab", "Opel", "Audi"] | ||
| } | ||
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,90 @@ | ||
| class SelectMenu { | ||
| get = { | ||
|
There was a problem hiding this comment. Esto es lo que te decía de tener un montón de selectores con diferentes opciones de un Dropdown. Yo aprobaría todo este hermoso código y esfuerzo, pero buscaría mejorarla escalabilidad del código, en tener que usar métodos que puedan ser más flexibles. Pero podemos verlo en llamada! recuerda que puedo continuar contigo como Tutor por el siguiente Sprint, y ahora que sos Mod, puedes tener más de un tutor si quieres jaja (no tan literal) |
||
| selectValue: () => cy.get('#withOptGroup'), | ||
| selectValueGroup1Option1: () => cy.get('#react-select-2-option-0-0'), | ||
| selectValueGroup1Option2: () => cy.get('#react-select-2-option-0-1'), | ||
| selectValueGroup2Option1: () => cy.get('#react-select-2-option-1-0'), | ||
| selectValueGroup2Option2: () => cy.get('#react-select-2-option-1-1'), | ||
| selectValueRootOption: () => cy.get('#react-select-2-option-2'), | ||
| selectValueAnotherRootOption: () => cy.get('#react-select-2-option-2'), | ||
| selectOne: () => cy.get('#selectOne'), | ||
| selectOneDr: () => cy.get('#react-select-3-option-0-0'), | ||
| selectOneMr: () => cy.get('#react-select-3-option-0-1'), | ||
| selectOneMrs: () => cy.get('#react-select-3-option-0-2'), | ||
| selectOneMs: () => cy.get('#react-select-3-option-0-3'), | ||
| selectOneProf: () => cy.get('#react-select-3-option-0-4'), | ||
| selectOneOther: () => cy.get('#react-select-3-option-0-5'), | ||
| selectOldMenu: () => cy.get('#oldSelectMenu'), | ||
| multiSelectDropdown: () => cy.get('[class$="indicatorContainer"]'), | ||
| multiSelectGreen: () => cy.get('#react-select-4-option-0'), | ||
| multiSelectBlue: () => cy.get('#react-select-4-option-1'), | ||
| multiSelectBlack: () => cy.get('#react-select-4-option-2'), | ||
| multiSelectRed: () => cy.get('#react-select-4-option-3'), | ||
| standarMultiSelect: () => cy.get('#cars'), | ||
| }; | ||
| clickSelectValue() { | ||
| this.get.selectValue().click(); | ||
| } | ||
| selectValueGroup1Option1() { | ||
| this.get.selectValueGroup1Option1().click(); | ||
| } | ||
| selectValueGroup1Option2() { | ||
| this.get.selectValueGroup1Option2().click(); | ||
| } | ||
| selectValueGroup2Option1() { | ||
| this.get.selectValueGroup2Option1().click(); | ||
| } | ||
| selectValueGroup2Option2() { | ||
| this.get.selectValueGroup2Option2().click(); | ||
| } | ||
| selectValueRootOption() { | ||
| this.get.selectValueRootOption().click(); | ||
| } | ||
| selectValueAnotherRootOption() { | ||
| this.get.selectValueAnotherRootOption().click(); | ||
| } | ||
| clickSelectOne() { | ||
| this.get.selectOne().click(); | ||
| } | ||
| selectOneDr() { | ||
| this.get.selectOneDr().click(); | ||
| } | ||
| selectOneMr() { | ||
| this.get.selectOneMr().click(); | ||
| } | ||
| selectOneMrs() { | ||
| this.get.selectOneMrs().click(); | ||
| } | ||
| selectOneMs() { | ||
| this.get.selectOneMs().click(); | ||
| } | ||
| selectOneProf() { | ||
| this.get.selectOneProf().click(); | ||
| } | ||
| selectOneOther() { | ||
| this.get.selectOneOther().click(); | ||
| } | ||
| clickOldSelectMenu(randomOldSelectMenu) { | ||
| this.get.selectOldMenu().select(randomOldSelectMenu); | ||
| } | ||
| clickMultiSelectDropdown() { | ||
| this.get.multiSelectDropdown().eq(2).click(); | ||
| } | ||
| multiSelectGreen() { | ||
| this.get.multiSelectGreen().click(); | ||
| } | ||
| multiSelectBlue() { | ||
| this.get.multiSelectBlue().click(); | ||
| } | ||
| multiSelectBlack() { | ||
| this.get.multiSelectBlack().click(); | ||
| } | ||
| multiSelectRed() { | ||
| this.get.multiSelectRed().click(); | ||
| } | ||
| clickStandarMultiSelect(randomStandarMultiSelect) { | ||
| this.get.selectOldMenu().select(randomStandarMultiSelect); | ||
| } | ||
| } | ||
|
|
||
| export const selectMenuPage = new SelectMenu(); | ||
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,49 @@ | ||
| Descripción Scope de la US: | ||
|
|
||
| QA Deberá de validar la funcionalidad de los dropdown. | ||
|
|
||
| Realizará el test a su criterio, con uso de las herramientas que conoce. | ||
|
|
||
| Nota: Validar una funcionalidad, requiere una aserción final del test realizado | ||
|
|
||
| Objetivo del test: | ||
|
|
||
| Obtener e interactuar con elementos dentro de otros elementos; | ||
|
|
||
| Realizar aserciones; | ||
|
|
||
| ✅ACCEPTANCE CRITERIA | ||
|
|
||
| (This feature doesn’t need BDD AC - Please take a look into the BRS tab) | ||
|
|
||
| 🚩BUSINESS RULES SPEC | ||
|
|
||
| Dropdowns: Select Value: | ||
|
|
||
| It’s a Dropdown with grouped options: Group 1 and Group 2 – to select one option | ||
|
|
||
| Select One: | ||
|
|
||
| It’s a simple React Dropdown – to select one option | ||
|
|
||
| Old Style Select Menu: | ||
|
|
||
| It’s an old Dropdown – to select one option | ||
|
|
||
| Multiselect drop down: | ||
|
|
||
| it’s a multiple selection; up to 4 options: | ||
|
|
||
| Green | ||
|
|
||
| Blue | ||
|
|
||
| Black | ||
|
|
||
| Red | ||
|
|
||
| IF all of the options are selected, “No Options” attribute should be displayed in the dropdown. | ||
|
|
||
| Standard multi select: | ||
|
|
||
| it’s a simple combo-box (Slots) that can be selected more than one. |
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.
Me gusta como validación exhaustiva pero sería bueno ver cómo seleccionarías una opció sin especificar que sea del grupo y opción, es decir no tener un selector por cada opción del dropdown.
Qué pasaría si hubieran 245 opciones del Dropdown? harías una para cada una? La idea es crear como una partición, una función que solo seleccione una opción del que pases por parámetro. Esto sería el mejor enfoque para una selección de Dropdown... SIN EMBARGO, considero esto que hiciste válido ya que buscaste validar cada opción como creo que indica la US.