Gx3 912 ⚡️ tools qa interactions selectable

.github/workflows/CI-Suite.yml

@@ -56,9 +56,10 @@ jobs:
                   browser: electron
                   command: | #EDITAR AQUÍ EL ARCHIVO SUITE A EJECUTAR:
 
-                      yarn file cypress/e2e/Tests/Elements/GX3-390-Buttons.cy.js
 
 
+                      yarn file cypress/e2e/Tests/ToolsQA-Interaction/GX3-912-Selectable.cy.js
+
             - name: ✅Import Test Results to Xray
               if: always()
               uses: mikepenz/xray-action@v2
@@ -68,7 +69,7 @@ jobs:
                   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: 'GX3-401' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
+                  testExecKey: 'GX3-919' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
 
                   projectKey: 'GX3' #EDITAR EN CASO DE TRABAJAR CON OTRO PROYECTO.
 

cypress/e2e/Tests/ToolsQA-Interaction/GX3-912-Selectable.cy.js

@@ -0,0 +1,44 @@
+import { selectablePage } from '../../../support/pages/Selectable/selectable.Page';
+
+describe('GX3-912 | ToolsQA | Interactions | Selectable', () => {
+	beforeEach('PRC: User must be at Selectable section on the web page', () => {
+		cy.visit('https://demoqa.com/selectable');
+		cy.url().should('contain', 'selectable');
+	});
+	it('GX3-913 | TC1: Validate select item from “List” tab', () => {
+		selectablePage.clickList();
+		selectablePage.selectListItem();
+	});
+	it('GX3-913 | TC2: Validate unselect item from “List” tab', () => {
+		selectablePage.clickList();
+		selectablePage.selectListItem();
+		selectablePage.UnselectListItem();
+	});
+	it('GX3-913 | TC3: Validate select multiples items from “List” tab', () => {
+		selectablePage.clickList();
+		selectablePage.selectMultipleListItems();
+	});
+	it('GX3-913 | TC4: Validate unselect multiples items from “List” tab', () => {
+		selectablePage.clickList();
+		selectablePage.selectMultipleListItems();
+		selectablePage.unselectMultipleListItems();
+	});
+	it('GX3-913 | TC5: Validate select item from “Grid” tab', () => {
+		selectablePage.clickGrid();
+		selectablePage.selectGridItem();
+	});
+	it('GX3-913 | TC6: Validate unselect item from “Grid” tab', () => {
+		selectablePage.clickGrid();
+		selectablePage.selectGridItem();
+		selectablePage.UnselectGridItem();
+	});
+	it('GX3-913 | TC7: Validate select multiples items from “Grid” tab', () => {
+		selectablePage.clickGrid();
+		selectablePage.selectMultipleGridItems();
+	});
+	it('GX3-913 | TC8: Validate unselect multiples items from “Grid” tab', () => {
+		selectablePage.clickGrid();
+		selectablePage.selectMultipleGridItems();
+		selectablePage.unselectMultipleGridItems();
+	});
+});

cypress/support/pages/Selectable/selectable.Page.js

@@ -0,0 +1,50 @@
+class selectable {
+	get = {
+		ListTab: () => cy.get('#demo-tab-list'),
+		GridTab: () => cy.get('#demo-tab-grid'),
+		ListItems: () => cy.get('#verticalListContainer li'),
+		GridItems: () => cy.get('.list-group-item.list-group-item-action'),
+	};
+	clickList() {
+		this.get.ListTab().click();
+	}
+	selectListItem() {
+		this.get.ListItems().eq(2).click();
+		this.get.ListItems().should('have.class', 'active');
+	}
+	UnselectListItem() {
+		this.get.ListItems().eq(2).click();
+	}
+	selectMultipleListItems() {
+		this.get.ListItems().eq(1).click();
+		this.get.ListItems().eq(0).click();
+		this.get.ListItems().eq(3).click();
+		this.get.ListItems().should('have.class', 'active');
+	}
+	unselectMultipleListItems() {
+		this.get.ListItems().eq(1).click();
+		this.get.ListItems().eq(0).click();
+	}
+	clickGrid() {
+		this.get.GridTab().click();
+	}
+	selectGridItem() {
+		this.get.GridItems().eq(10).click();
+		this.get.GridItems().should('have.class', 'active');
+	}
+	UnselectGridItem() {
+		this.get.GridItems().eq(10).click();
+	}
+	selectMultipleGridItems() {
+		this.get.GridItems().eq(7).click();
+		this.get.GridItems().eq(5).click();
+		this.get.GridItems().eq(12).click();
+		this.get.GridItems().should('have.class', 'active');
+	}
+	unselectMultipleGridItems() {
+		this.get.GridItems().eq(7).click();
+		this.get.GridItems().eq(12).click();
+	}
+}
+
+export const selectablePage = new selectable();

cypress/test-plan/in-sprint/sprint-32-33/GX3-912.md

@@ -0,0 +1,95 @@
+# ⚡️ToolsQA | Interactions | Selectable
+
+[GX3-912](https://upexgalaxy30.atlassian.net/browse/GX3-912) Created: 15/12/23 Updated: 15/12/23
+
+## **_Challenge para QA:_**
+
+Se requiere que realices pruebas automatizadas del SUT (Sistema bajo prueba) utilizando el patrón de diseño de Page Object Model (POM). Para esto,
+deberás utilizar cualquier tipo de selector de objetos que hayas aprendido previamente, exceptuando el uso de Xpath.
+
+Además, deberás asegurarte de que la cobertura de pruebas sea completa para el SUT.
+
+## **_Objetivo del challenge:_**
+
+El objetivo de este challenge es que puedas integrar y aplicar el patrón de diseño de Page Object Model, incluyendo su creación, uso, exportación e
+importación. Asimismo, se busca que puedas seleccionar los objetos necesarios para realizar las pruebas de manera efectiva.
+
+-   As a QA learner,
+-   I want to test:
+    -   **Selectable list is displaying and working as expected.**
+    -   **Selectable grid is displaying and working as expected.**
+-   So that I can improve my testing skills for this scenario.
+
+🔬Test Analysis
+
+For the component:
+
+The tabs “List” and “Gird” must be showing by default.
+
+The tab “List” must be opened by default showing the contained list of items.
+
+Expected behavior:
+
+Only one tab can be displayed at once.
+
+“List” and “Grid” items have to be able to be selected and deselected.
+
+Selected items have a blue background and white font.
+
+Unselected items have a white background and black font.
+
+For the “List” tab:
+
+Default List items:
+
+Cras justo odio
+
+Dapibus ac facilisis in
+
+Morbi leo risus
+
+Porta ac consectetur ac
+
+Default “List” items state: Unselected
+
+Expected behavior: all the List items have to be able to be selected or deselected as desired.
+
+WHEN: any list item is clicked
+
+AND: it’s Unselected
+
+THEN: the clicked item changes to a blue background.
+
+For the “Grid” tab:
+
+Default Grid items:
+
+One
+
+Two
+
+Three
+
+Four
+
+Five
+
+Six
+
+Seven
+
+Eight
+
+Nine
+
+Expected display: 3 x 3 grid.
+
+Expected items status: Selected.
+
+Expected behavior: List items have to be able to be deselected and selected as desired.
+
+WHEN: any grid item is clicked
+
+AND: it's Selected
+
+THEN: the clicked item changes to a white background.