✅[QA REGRESSION PASSED]: Ready to Merge into MAIN

.github/workflows/CI-Suite.yml

@@ -54,7 +54,7 @@ jobs:
               with:
                   browser: chrome
                   command: | #EDITAR AQUÍ EL ARCHIVO SUITE A EJECUTAR:
-                      yarn file cypress/e2e/Tests/Suites/GX-22811-DynamicProps.cy.js
+                      yarn file cypress/e2e/Tests/Widgets/GX-22346-Dropdown.cy.js
 
             - name: ✅Import Test Results to Xray
               if: always()
@@ -64,7 +64,7 @@ jobs:
                   password: ${{secrets.XRAY_CLIENT_SECRET}}
                   testFormat: 'junit' #OPCIONES PARA CAMBIAR: 'junit' (para xml) o 'cucumber' (para json)
                   testPaths: 'reports/test-results.xml' #OPCIONES: '/test-results.xml' o 'cucumber-report.json'
-                  testExecKey: 'GX-22811' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
+                  testExecKey: 'GX-22348' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
                   projectKey: 'GX' #EDITAR EN CASO DE TRABAJAR CON OTRO PROYECTO.
 
             - name: 🔔Slack Notification of Done

cypress/e2e/Tests/Widgets/GX-22346-Dropdown.cy.js

@@ -0,0 +1,96 @@
+import { removeLogs } from '@helper/RemoveLogs';
+removeLogs();
+
+import { dropDownSelector } from '@pages/Widgets/GX-22346-Dropdown.Page';
+
+describe('✅ToolsQA | Widgets | Dropdown - Select Menu', () => {
+	beforeEach('user is located in the Sut', () => {
+		cy.visit('/select-menu');
+	});
+	it('22347 | TC01: Validar la selección de Una opción Aleatoria en Select Value', () => {
+		dropDownSelector
+			.SelectValueDropDownOptions()
+			.invoke('text')
+			.then(values => {
+				cy.log(values);
+				dropDownSelector.get.selectOption().should('have.text', values);
+			});
+	});
+	it('22347 | TC02: Validar que al escribir Una parte de la opción valida en el Dropdown Select Value se visualice la opción escrita', () => {
+		cy.fixture('data/GX-22346-Dropdown').then(the => {
+			dropDownSelector.SelectValueDropDownInput(the.SelectValue.data.valid);
+			dropDownSelector.get.dropdownMenu().should('contain.text', the.SelectValue.data.valid);
+		});
+	});
+	it('22347 | TC03: Validar que al escribir Una opción NO valida en el Dropdown Select Value NO se visualice dicha opción escrita', () => {
+		cy.fixture('data/GX-22346-Dropdown').then(the => {
+			dropDownSelector.SelectValueDropDownInput(the.SelectValue.data.invalid);
+			dropDownSelector.get.dropdownMenu().should('contain.text', the.Incorrect);
+		});
+	});
+	it('22347 | TC04: Validar la selección de Una opción Aleatoria del Dropdown Select One', () => {
+		dropDownSelector
+			.SelectOneDropDownOptions()
+			.invoke('text')
+			.then(values => {
+				cy.log(values);
+				dropDownSelector.get.selectOption().should('have.text', values);
+			});
+	});
+	it('22347 | TC05: Validar que al escribir Una parte de la opción valida en el Dropdown Select One se visualice la opción escrita', () => {
+		cy.fixture('data/GX-22346-Dropdown').then(the => {
+			dropDownSelector.SelectOneDropDownInput(the.SelectOne.data.valid);
+			dropDownSelector.get.dropdownMenu().should('contain.text', the.SelectOne.data.valid);
+		});
+	});
+	it('22347 | TC06: Validar que al escribir Una opción NO valida en el Dropdown Select One NO se visualice dicha opción escrita', () => {
+		cy.fixture('data/GX-22346-Dropdown').then(the => {
+			dropDownSelector.SelectOneDropDownInput(the.SelectOne.data.invalid);
+			dropDownSelector.get.dropdownMenu().should('contain.text', the.Incorrect);
+		});
+	});
+	it('22347 | TC07: Validar la selección de Una opción Aleatoria del Dropdown Old Style Select Menu', () => {
+		dropDownSelector.OldSelectMenuDropDownOptions();
+		dropDownSelector.get.OldSelectMenuDropDown().then(the => {
+			expect(the.text()).to.contain(Cypress.env('colorSelect'));
+		});
+	});
+	it('22347 | TC08: Validar que la selección del Dropdown Old Style Select Menu NO puede ser vacío', () => {
+		dropDownSelector.get.OldSelectMenuDropDown().should('not.be.empty');
+	});
+	it('22347 | TC09: Validar la selección de Una opción Aleatoria del Dropdown  Multiselect drop down', () => {
+		dropDownSelector
+			.MultiselectDropDownOptions()
+			.invoke('text')
+			.then(values => {
+				cy.log(values);
+				dropDownSelector.get.selectMultiOption().should('contain.text', values);
+			});
+	});
+	it('22347 | TC10: Validar la selección de Todas las opciones del Dropdown Multiselect drop down', () => {
+		cy.fixture('data/GX-22346-Dropdown').then(the => {
+			dropDownSelector.SelectAllMultiselectDropDown();
+			dropDownSelector.get.dropdownMenu().should('contain.text', the.Incorrect);
+		});
+	});
+	it('22347 | TC11: Validar que al escribir Una parte de la opción valida en el Dropdown Multiselect drop down se visualice la opción escrita', () => {
+		cy.fixture('data/GX-22346-Dropdown').then(the => {
+			dropDownSelector.MultiselectDropDownInput(the.MultiselectDropDown.data.valid);
+			dropDownSelector.get.dropdownMenu().should('contain.text', the.MultiselectDropDown.data.valid);
+		});
+	});
+	it('22347 | TC12: Validar que al escribir Una opción NO valida en el Dropdown Multiselect drop down NO se visualice dicha opción escrita', () => {
+		cy.fixture('data/GX-22346-Dropdown').then(the => {
+			dropDownSelector.MultiselectDropDownInput(the.MultiselectDropDown.data.invalid);
+			dropDownSelector.get.dropdownMenu().should('contain.text', the.Incorrect);
+		});
+	});
+	it('22347 | TC13: Validar la selección de Una opción Aleatoria de Standard multi select', () => {
+		dropDownSelector.StandardMultiSelectOptions();
+		dropDownSelector.StandardMultiSelectPosition().should('have.css', 'background-color', 'rgb(30, 144, 255)');
+	});
+	it('22347 | TC14: Validar la selección de Todas las opciones de Standard multi select', () => {
+		dropDownSelector.SelectAllStandardMultiSelectOptions();
+		dropDownSelector.get.positionMenu2().should('have.css', 'background-color', 'rgb(30, 144, 255)');
+	});
+});

cypress/fixtures/data/GX-22346-Dropdown.json

@@ -0,0 +1,21 @@
+{
+	"SelectValue": {
+		"data": {
+			"valid": "Grou",
+			"invalid": "InvalidData"
+		}
+	},
+	"SelectOne": {
+		"data": {
+			"valid": "M",
+			"invalid": "InvalidData"
+		}
+	},
+	"MultiselectDropDown": {
+		"data": {
+			"valid": "B",
+			"invalid": "InvalidData"
+		}
+	},
+	"Incorrect": "No options"
+}

cypress/support/pages/Widgets/GX-22346-Dropdown.Page.js

@@ -0,0 +1,80 @@
+class DropDownSelector {
+	get = {
+		SelectValueDropDown: () => cy.get('[id="withOptGroup"]'),
+		SelectOneDropDown: () => cy.get('#selectOne'),
+		OldSelectMenuDropDown: () => cy.get('#oldSelectMenu'),
+		MultiselectDropDown: () => cy.get('[class=" css-yk16xz-control"]').eq(2),
+		StandardMultiSelect: () => cy.get('#cars'),
+		dropdownMenu: () => cy.get('[class$=menu]'),
+		optionMenu: () => cy.get('[id*=react-select][id*=option]'),
+		selectOption: () => cy.get('[class$="singleValue"]'),
+		selectMultiOption: () => cy.get('[class="css-1rhbuit-multiValue"]'),
+		closeMultiOption: () => cy.get('[class=" css-1wy0on6"]').eq(2),
+		positionMenu: () => cy.get('#cars > option:nth-child(' + Cypress.env('position') + ')'), // STandarMultiSelect Aleatorio
+		positionMenu2: () => cy.get('#cars>option'),
+	};
+
+	SelectValueDropDownInput(type) {
+		this.get.SelectValueDropDown().type(type);
+	}
+
+	SelectValueDropDownOptions() {
+		const option = Math.floor(Math.random() * 6);
+		this.get.SelectValueDropDown().click();
+		this.get.dropdownMenu().should('be.visible');
+		return this.get.optionMenu().eq(option).click();
+	}
+
+	SelectOneDropDownInput(type) {
+		this.get.SelectOneDropDown().type(type);
+	}
+
+	SelectOneDropDownOptions() {
+		const option = Math.floor(Math.random() * 6);
+		this.get.SelectOneDropDown().click();
+		this.get.dropdownMenu().should('be.visible');
+		return this.get.optionMenu().eq(option).click();
+	}
+
+	OldSelectMenuDropDownOptions() {
+		const option = Math.floor(Math.random() * 10);
+		const color = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Black', 'White', 'Voilet', 'Indigo', 'Magenta', 'Aqua'];
+		this.get.OldSelectMenuDropDown().select(option);
+		Cypress.env('colorSelect', color[option]);
+	}
+
+	MultiselectDropDownInput(type) {
+		this.get.MultiselectDropDown().type(type);
+	}
+
+	MultiselectDropDownOptions() {
+		const option = Math.floor(Math.random() * 3);
+		this.get.MultiselectDropDown().click();
+		const x = this.get.optionMenu().eq(option).click();
+		this.get.closeMultiOption().click();
+		return x;
+	}
+
+	SelectAllMultiselectDropDown() {
+		this.get.MultiselectDropDown().click();
+		for (let step = 0; step < 4; step++) {
+			this.get.dropdownMenu().click();
+		}
+	}
+
+	StandardMultiSelectOptions() {
+		const option = Math.floor(Math.random() * 3);
+		Cypress.env('position', option + 1);
+		this.get.StandardMultiSelect().select(option);
+	}
+
+	StandardMultiSelectPosition() {
+		return this.get.positionMenu();
+	}
+
+	SelectAllStandardMultiSelectOptions() {
+		this.get.StandardMultiSelect().select([0, 1, 2, 3]);
+	}
+}
+
+export const dropDownSelector = new DropDownSelector();

cypress/test-plan/in-sprint/sprint-20/GX-22346.md

@@ -0,0 +1,53 @@
+Description
+
+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.