Merge pull request #5 from destrutoyt/dev

Add "Add to Cart" test according to Test Plan

Author: destrutoyt

docs/test-plan.md

@@ -1,6 +1,6 @@
 # Test Plan for AutomationPractice by Miguel Garces
 *Project Owner: Miguel Garces*  
-*Latest Revision: 8/12/2025*
+*Latest Revision: 8/13/2025*
 
 ## Project Overview
 This project performs end-to-end testing to the demo website [Automation Exercise](https://automationexercise.com/). It extensively covers major user flows such as login/registration, product filtering, checkout, and API functionality.
@@ -32,7 +32,7 @@ This project performs end-to-end testing to the demo website [Automation Exercis
 | User Login/Logout | UI + Session Handling | ✅ | Check for session persistence |
 | Product Search & Filters | UI | ✅ | Filter by category and other options available |
 | Product Preview | UI | ✅ | Verifies product information is matches with listing |
-| Add to Cart | UI + Validation | 🔄 | Validates product is in the cart |
+| Add to Cart | UI + Validation | ✅ | Validates product is in the cart |
 | Checkout Process | UI | 🔄 | N/A |
 | Purchase Confirmation | UI + Validation | 🔄 | Ensure successful purchase and verify product is found in "Orders" |
 | Contact Form | UI + Form Validation | ⏳ | N/A |

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "qa-automation-automationexercise",
-	"version": "2.2",
+	"version": "2.3",
 	"description": "QA automation project showcasing UI, API, and visual tests for AutomationExercise. Integrated with Docker, Allure, and CI/CD pipelines.",
 	"main": "index.js",
 	"directories": {
@@ -10,8 +10,9 @@
 		"test": "npx playwright test",
 		"test:headed": "npx playwright test --headed",
 		"test:debug": "npx playwright test --debug",
-		"test:auth": "npx playwright test tests/auth-flow.spec.ts",
-		"test:product": "npx playwright test tests/product-interactions.spec.ts",
+		"test:auth": "npx playwright test --grep @AUTH",
+		"test:product": "npx playwright test --grep @PRODUCT",
+		"test:cart": "npx playwright test --grep @CART",
 		"test:allure": "rimraf allure-results && npx playwright test && npx allure generate allure-results --clean -o allure-report && npx allure open allure-report"
 	},
 	"repository": {

tests/cart-checkout.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+import { UserLogin } from '../page-objects/Login'
+import { ProductTypes } from '../utils/types/productTypes'
+import products from '../utils/fixtures/productData.json'
+
+const productData: ProductTypes[] = products.products
+
+test.beforeEach(async ({ page }) => {
+	const userLogin = new UserLogin(page)
+	await userLogin.autoLogin() // Uses predefined credentials from loginData.json. Manual login with provided credentials is available.
+	await page.goto('/products')
+})
+
+test.only('@CART - Add product to cart and validate it', async ({ page }) => {
+	
+    const cartTable = page.locator('#cart_info_table tbody');
+    let productID : number = productData[0].id;
+    console.log(productID)
+
+    // Add X product to the cart and verify confirmation msg
+    await page.click(`[data-product-id="${productID}"]`)
+    await expect(page.locator('.modal-content .modal-header h4')).toHaveText('Added!')
+
+    // Goes to "View Cart" and confirms product is in cart
+    await page.click('.modal-content a[href="/view_cart"]')
+    await expect(cartTable.locator(`tr#product-${productID}`)).toBeVisible() // getByText() can cause issues if one or more items are named "Blue Top"
+})

utils/fixtures/productData.json

@@ -1,6 +1,7 @@
 {
     "products": [
-        {
+        {   
+            "id": 1,
             "name": "Blue Top",
             "price": "Rs. 500",
             "category": "Women > Tops",
@@ -10,6 +11,7 @@
             "detailsUrl": "/product_details/1"
         },
         {
+            "id": 24,
             "name": "Colour Blocked Shirt – Sky Blue",
             "price": "Rs. 849",
             "category": "Kids > Tops & Shirts",
@@ -19,6 +21,7 @@
             "detailsUrl": "/product_details/24"
         },
         {
+            "id": 43,
             "name": "GRAPHIC DESIGN MEN T SHIRT - BLUE",
             "price": "Rs. 1389",
             "category": "Men > Tshirts",

utils/types/productTypes.d.ts

@@ -1,4 +1,5 @@
 export interface ProductTypes {
+    id: number;
     name: string;
     price: string;
     category: string;