diff --git a/tests/cart.spec.js b/tests/cart.spec.js
new file mode 100644
index 00000000..e356e66f
--- /dev/null
+++ b/tests/cart.spec.js
@@ -0,0 +1,64 @@
+const { test, expect } = require('@playwright/test');
+
+
+test('Check header elements exist', async ({ page }) => {
+    await page.goto('http://localhost:8081/cart');
+  
+    const header = page.locator('app-header#header');
+    await expect(header).toBeVisible();
+  
+    // Check if the logo exists
+    const logo = header.locator('.logo a[aria-label="SHOP Home"]');
+    await expect(logo).toBeVisible();
+    await expect(logo).toHaveText('SHOP');
+  
+    // Check if the shopping cart button exists
+    const cartButton = header.locator('.cart-btn-container paper-icon-button[icon="shopping-cart"]');
+    await expect(cartButton).toBeVisible();
+  });
+
+
+test('Check if product details exist on the page', async ({ page }) => {
+  await page.goto('http://localhost:8081/detail/mens_outerwear/Tri-blend+Full-Zip+Hoodie');
+
+  // Check if the <h1> title with the product name exists
+  const productName = page.locator('h1:has-text("Tri-blend Full-Zip Hoodie")');
+  await expect(productName).toBeVisible();
+
+  // Check if the price element exists and has the correct value
+  const price = page.locator('.price');
+  await expect(price).toHaveText('$52.20');
+
+  // Check if the size select element exists
+  const sizeSelect = page.locator('#sizeSelect');
+  await expect(sizeSelect).toBeVisible();
+
+  // Check if the quantity select element exists
+  const quantitySelect = page.locator('#quantitySelect');
+  await expect(quantitySelect).toBeVisible();
+
+  // Check if the description exists and contains the correct text
+  const description = page.locator('#desc');
+  await expect(description).toHaveText(/Comfy cool/); // Partial match for the description text
+
+  // Check if the "Add to Cart" button exists
+  const addToCartButton = page.locator('button[aria-label="Add this item to cart"]');
+  await expect(addToCartButton).toBeVisible();
+});
+
+
+
+
+test('Check existence of cart elements', async ({ page }) => {
+
+  await page.goto('http://localhost:8081/cart');
+ 
+  const linkLocator = page.locator('a[href="/detail/mens_outerwear/Tri-blend+Full-Zip+Hoodie"][title="Tri-blend Full-Zip Hoodie"]');
+  
+  // Verify that the anchor tag is visible
+  await expect(linkLocator).toBeVisible();
+  
+  // Verify that the <shop-image> child element exists within the <a> tag
+  const shopImageLocator = linkLocator.locator('shop-image');
+  await expect(shopImageLocator).toBeVisible();
+});
diff --git a/tests/checkout.spec.js b/tests/checkout.spec.js
new file mode 100644
index 00000000..3bfabbe5
--- /dev/null
+++ b/tests/checkout.spec.js
@@ -0,0 +1,90 @@
+const { test, expect } = require('@playwright/test');
+
+test('should check if elements exist in checkout page', async ({ page }) => {
+    await page.goto('http://localhost:8081/checkout');
+  
+    //  frame existence
+    const mainFrame = page.locator('.main-frame');
+    await expect(mainFrame).toBeVisible();
+  
+    // id "pages"
+    const ironPages = page.locator('#pages');
+    await expect(ironPages).toBeVisible();
+  
+    // Checkout header
+    const checkoutHeader = page.locator('header.subsection h1');
+    await expect(checkoutHeader).toHaveText('Checkout');
+  
+    //  Account Information header
+    const accountInfoHeading = page.locator('#accountInfoHeading');
+    await expect(accountInfoHeading).toHaveText('Account Information');
+  
+    const emailInput = page.locator('input#accountEmail');
+    const count = await emailInput.count();
+    console.log(`Element count: ${count}`); // Should be 1 if the element exists
+    
+    //  phone number input
+    const phoneInput = page.locator('input#accountPhone');
+    const PhoneCount = await phoneInput.count();
+    console.log(`Phone input count: ${PhoneCount}`); // Should be 1 if the element exists
+    
+  
+    const shipAddressInput = page.locator('input#shipAddress');
+    const shipAddressCount = await shipAddressInput.count();
+    console.log(`Shipping address input count: ${shipAddressCount}`);
+    
+    // city input
+    const shipCityInput = page.locator('input#shipCity');
+    const shipCityCount = await shipCityInput.count();
+    console.log(`City input count: ${shipCityCount}`);
+    
+    //state input
+    const shipStateInput = page.locator('input#shipState');
+    const shipStateCount = await shipStateInput.count();
+    console.log(`State input count: ${shipStateCount}`);
+    
+    //zip code input
+    const shipZipInput = page.locator('input#shipZip');
+    const shipZipCount = await shipZipInput.count();
+    console.log(`Zip code input count: ${shipZipCount}`);
+    
+    // country dropdown
+    const countryDropdown = page.locator('select#shipCountry');
+    const countryDropdownCount = await countryDropdown.count();
+    console.log(`Country dropdown count: ${countryDropdownCount}`);
+    
+    //  billing address checkbox
+    const billingCheckbox = page.locator('input#setBilling');
+    const billingCheckboxCount = await billingCheckbox.count();
+    console.log(`Billing address checkbox count: ${billingCheckboxCount}`);
+    
+    //cardholder name input
+    const ccNameInput = page.locator('input#ccName');
+    const ccNameCount = await ccNameInput.count();
+    console.log(`Cardholder name input count: ${ccNameCount}`);
+    
+    // card number input
+    const ccNumberInput = page.locator('input#ccNumber');
+    const ccNumberCount = await ccNumberInput.count();
+    console.log(`Card number input count: ${ccNumberCount}`);
+  
+    //  expiry month dropdown
+    const ccExpMonthDropdown = page.locator('select#ccExpMonth');
+    const ccExpMonthDropdownCount = await ccExpMonthDropdown.count();
+    console.log(`ccNumberCount: ${ccExpMonthDropdownCount}`);
+  
+    // CVV
+    const ccCVVInput = page.locator('input#ccCVV');
+    const ccCVVInputCount = await ccCVVInput.count();
+    console.log(`ccCVVInput: ${ccCVVInputCount}`);
+    // await expect(ccCVVInput).toBeVisible();
+  
+    const totalAmount = page.locator('.row.total-row .flex');
+    const totalAmountCount = await totalAmount.count();
+    console.log(`Total amount element count: ${totalAmountCount}`);
+
+    // place order button
+    const placeOrderButton = page.locator('shop-button#submitBox input[type="button"]');
+    const placeOrderButtonCount = await placeOrderButton.count();
+    console.log(`Place Order button count: ${placeOrderButtonCount}`);
+  });
\ No newline at end of file
diff --git a/tests/example.spec.js b/tests/example.spec.js
new file mode 100644
index 00000000..40eddb86
--- /dev/null
+++ b/tests/example.spec.js
@@ -0,0 +1,19 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});
diff --git a/tests/home.spec.js b/tests/home.spec.js
new file mode 100644
index 00000000..cf92d539
--- /dev/null
+++ b/tests/home.spec.js
@@ -0,0 +1,183 @@
+const { test, expect } = require('@playwright/test');
+
+test('has title', async ({ page }) => {
+    await page.goto('https://playwright.dev/');
+  
+    // Expect a title "to contain" a substring.
+    await expect(page).toHaveTitle(/Playwright/);
+  });
+
+  test('content container element exists', async ({ page }) => {
+    await page.goto('localhost:8081');
+  
+    // Check if the content container element exists
+    const contentContainer = page.locator('#contentContainer');
+    await expect(contentContainer).toBeTruthy();
+  
+    // Check if the slot element exists inside the content container
+    const slot = contentContainer.locator('#slot');
+    await expect(slot).toBeTruthy();
+  });
+
+  test('click on link redirects to mens outerwear page', async ({ page }) => {
+    await page.goto('localhost:8081');
+  
+    // Click on the link
+    const link = page.locator('a.image-link[href="/list/mens_outerwear"]');
+    await link.click();
+  
+    // Check if the page redirects to the expected URL
+    await expect(page.url()).toContain('/list/mens_outerwear');
+  });
+
+  test('click on shop now button redirects to mens outerwear page', async ({ page }) => {
+    await page.goto('localhost:8081');
+  
+    // Click on the shop now button
+    const button = page.locator('shop-button a[href="/list/mens_outerwear"]');
+    await button.click();
+  
+    // Check if the page redirects to the expected URL
+    await expect(page.url()).toContain('/list/mens_outerwear');
+  });
+
+  test('ladies outerwear item is displayed correctly', async ({ page }) => {
+    await page.goto('localhost:8081');
+  
+    // Get the item element
+    const item = page.locator('.item');
+  
+    // Verify the image link
+    const imageLink = item.getByRole('link', { name: 'Ladies Outerwear', exact: true });
+    await expect(imageLink).toHaveAttribute('href', '/list/ladies_outerwear');
+  
+    // Verify the image source
+    const image = item.getByRole('link', { name: 'Ladies Outerwear', exact: true });
+    const imageUrl = await image.getAttribute('style');
+
+    // Verify the heading text
+    const heading = item.getByRole('heading', { name: 'Ladies Outerwear' });
+    await expect(heading).toHaveText('Ladies Outerwear');
+  
+    // Verify the shop button link
+    const shopButton = item.getByLabel('Ladies Outerwear Shop Now');
+    await expect(shopButton).toHaveAttribute('href', '/list/ladies_outerwear');
+    await expect(shopButton).toHaveText('Shop Now');
+  });
+
+  test("men's t-shirts item is displayed correctly", async ({ page }) => {
+    await page.goto('localhost:8081');
+  
+    // Get the item element
+    const item = page.locator('.item');
+  
+    // Verify the image link
+    const imageLink = item.getByRole('link', { name: 'Ments T-Shirts', exact: true });
+  
+    // Verify the image source
+    const image = item.getByRole('link', { name: 'Men\'s T-Shirts', exact: true });
+    const imageUrl = await image.getAttribute('style');
+
+    // Verify the heading text
+    const heading = item.getByRole('heading', { name: 'Men\'s T-Shirts' });
+    await expect(heading).toHaveText("Men's T-Shirts");
+  
+    // Verify the shop button link
+    const shopButton = item.getByLabel('Men\'s T-Shirts Shop Now');
+    await expect(shopButton).toHaveAttribute('href', '/list/mens_tshirts');
+    await expect(shopButton).toHaveText('Shop Now');
+  });
+
+ 
+test.describe('Check all links exist and verify redirection', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('localhost:8081');
+  });
+
+  test('Check Men\'s Outerwear link and redirection', async ({ page }) => {
+    const link = page.getByRole('link', { name: 'Men\'s Outerwear', exact: true });
+    
+    // Check the link exists and has correct text
+    await expect(link).toBeVisible();
+
+    // Click and verify redirection
+    await link.click();
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('http://localhost:8081/list/mens_outerwear');
+
+    // Go back to the original page
+    await page.goBack();
+  });
+
+  test('Check Ladies Outerwear link and redirection', async ({ page }) => {
+    const link = page.getByRole('link', { name: 'Ladies Outerwear', exact: true });
+    
+    // Check the link exists and has correct text
+    await expect(link).toBeVisible();
+   // await expect(link).toHaveText("Ladies Outerwear");
+
+    // Click and verify redirection
+    await link.click();
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('http://localhost:8081/list/ladies_outerwear');
+
+    // Go back to the original page
+    await page.goBack();
+  });
+
+  test('Check Men\'s T-Shirts link and redirection', async ({ page }) => {
+    const link = page.getByRole('link', { name: 'Men\'s T-Shirts', exact: true });
+    
+    // Check the link exists and has correct text
+    await expect(link).toBeVisible();
+   // await expect(link).toHaveText("Men's T-Shirts");
+
+    // Click and verify redirection
+    await link.click();
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('http://localhost:8081/list/mens_tshirts');
+
+    // Go back to the original page
+    await page.goBack();
+  });
+
+  test('Check Ladies T-Shirts link and redirection', async ({ page }) => {
+    const link = page.getByRole('link', { name: 'Ladies T-Shirts', exact: true });
+    
+    // Check the link exists and has correct text
+    await expect(link).toBeVisible();
+
+    // Click and verify redirection
+    await link.click();
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('http://localhost:8081/list/ladies_tshirts');
+
+    // Go back to the original page
+    await page.goBack();
+  });
+
+});
+
+
+test.describe('Check cart link and redirection', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('localhost:8081');
+  });
+
+  test('Check cart link and redirect to cart page', async ({ page }) => {
+    const cartLink = page.locator('a[href="/cart"]');
+
+    // Check that the cart link is visible
+    await expect(cartLink).toBeVisible();
+
+    await cartLink.click();
+
+    // Wait for the navigation to complete
+    await page.waitForLoadState('networkidle');
+
+    // Assert that the URL contains '/cart'
+    await expect(page).toHaveURL('http://localhost:8081/cart');
+  });
+});
\ No newline at end of file
diff --git a/tests/product.spec.js b/tests/product.spec.js
new file mode 100644
index 00000000..d321eb44
--- /dev/null
+++ b/tests/product.spec.js
@@ -0,0 +1,233 @@
+const { test, expect } = require('@playwright/test');
+
+test('header element exists', async ({ page }) => {
+    await page.goto('http://localhost:8081/list/mens_outerwear');
+  
+    const header = await page.$('header');
+    expect(header).not.toBeNull();
+  
+    const h1 = await page.$('header > h1');
+    expect(h1).not.toBeNull();
+  
+    //  text content of the h1 element is correct
+    const h1Text = await h1.textContent();
+    expect(h1Text).toBe('Men\'s Outerwear');
+  
+    //the span element exists within the header
+    const span = await page.$('header > span');
+    expect(span).not.toBeNull();
+  
+    //text content of the span element is correct
+    const spanText = await span.textContent();
+    expect(spanText).toBe('(16 items)');
+  });
+
+  
+  test('first 5 elements exist', async ({ page }) => {
+    await page.goto('http://localhost:8081/list/mens_outerwear');
+  
+    //the ul element exists
+    const ul = await page.$('ul.grid');
+    expect(ul).not.toBeNull();
+  
+    //the first 5 li elements exist
+    const liElements = await page.$$('ul.grid > li');
+    expect(liElements.length).toBeGreaterThan(5);
+  
+    // Check if the first 5 li elements contain a and shop-list-item elements
+    expect(await liElements[0].$$('a > shop-list-item')).not.toBeNull();
+    expect(await liElements[1].$$('a > shop-list-item')).not.toBeNull();
+    expect(await liElements[2].$$('a > shop-list-item')).not.toBeNull();
+    expect(await liElements[3].$$('a > shop-list-item')).not.toBeNull();
+    expect(await liElements[4].$$('a > shop-list-item')).not.toBeNull();
+  });
+
+
+test('image exists', async ({ page }) => {
+    await page.goto('http://localhost:8081/list/mens_outerwear');
+  
+    const image = page.getByRole('img', { name: 'Men\'s Outerwear' });
+
+    // Assert that the image is visible on the page
+    await expect(image).toBeVisible();
+  });
+
+  test('check header tabs exist', async ({ page }) => {
+    await page.goto('http://localhost:8081/list/mens_outerwear');
+  
+    // #tabContainer exists
+    const tabContainer = page.locator('#tabContainer');
+    await expect(tabContainer).toBeVisible();
+  
+    // "Men's Outerwear" tab exists
+    const mensOuterwearTab = tabContainer.locator('a[href="/list/mens_outerwear"]');
+    await expect(mensOuterwearTab).toBeVisible();
+  
+    //  "Ladies Outerwear" tab exists
+    const ladiesOuterwearTab = tabContainer.locator('a[href="/list/ladies_outerwear"]');
+    await expect(ladiesOuterwearTab).toBeVisible();
+  
+    // "Men's T-Shirts" tab exists
+    const mensTshirtsTab = tabContainer.locator('a[href="/list/mens_tshirts"]');
+    await expect(mensTshirtsTab).toBeVisible();
+  
+    //  "Ladies T-Shirts" tab exists
+    const ladiesTshirtsTab = tabContainer.locator('a[href="/list/ladies_tshirts"]');
+    await expect(ladiesTshirtsTab).toBeVisible();
+  });
+
+    test('should check if the Ladies Outerwear image exists', async ({ page }) => {
+      await page.goto('http://localhost:8081/list/ladies_outerwear'); 
+  
+      // Check if the image exists
+      const image = await page.getByRole('img', { name: 'Ladies Outerwear' });
+    
+      //image is visible
+      await expect(image).toBeVisible();
+    
+      await expect(image).toHaveAttribute('src', 'images/ladies_outerwear.jpg');
+    });
+
+
+test('should check if the header for Ladies Outerwear exists', async ({ page }) => {
+  await page.goto('http://localhost:8081/list/ladies_outerwear'); 
+  
+  //  text "Ladies Outerwear"
+  const headerTitle = await page.locator('header h1');
+  await expect(headerTitle).toHaveText('Ladies Outerwear');
+
+  //  "(6 items)"
+  const headerItems = await page.locator('header span');
+  await expect(headerItems).toHaveText('(6 items)');
+});
+
+
+test('should check if specific list items in the grid exist', async ({ page }) => {
+  await page.goto('http://localhost:8081/list/ladies_outerwear'); 
+  
+  // Check if the <ul> with class 'grid' exists
+  const ulGrid = await page.locator('ul.grid');
+  await expect(ulGrid).toBeVisible();
+
+  // Check each individual list item and its link
+  const firstItem = await page.locator('ul.grid li a[href="/detail/ladies_outerwear/Ladies+Modern+Stretch+Full+Zip"]');
+  await expect(firstItem).toBeVisible();
+
+  const secondItem = await page.locator('ul.grid li a[href="/detail/ladies_outerwear/Ladies+Colorblock+Wind+Jacket"]');
+  await expect(secondItem).toBeVisible();
+
+  const thirdItem = await page.locator('ul.grid li a[href="/detail/ladies_outerwear/Ladies+Voyage+Fleece+Jacket"]');
+  await expect(thirdItem).toBeVisible();
+
+  const fourthItem = await page.locator('ul.grid li a[href="/detail/ladies_outerwear/Ladies+Pullover+L+S+Hood"]');
+  await expect(fourthItem).toBeVisible();
+
+  const fifthItem = await page.locator('ul.grid li a[href="/detail/ladies_outerwear/Ladies+Sonoma+Hybrid+Knit+Jacket"]');
+  await expect(fifthItem).toBeVisible();
+
+  const sixthItem = await page.locator('ul.grid li a[href="/detail/ladies_outerwear/Ladies+Yerba+Knit+Quarter+Zip"]');
+  await expect(sixthItem).toBeVisible();
+});
+
+
+test('Check link existence, click, and redirection', async ({ page }) => {
+  await page.goto('http://localhost:8081/list/mens_outerwear');
+
+  // Locate the link 
+  const link = page.locator('a[href="/detail/mens_outerwear/Men+s+Tech+Shell+Full-Zip"]');
+  
+  // link is visible
+  await expect(link).toBeVisible();
+
+  await link.click();
+
+  // Wait for navigation after the click
+  await page.waitForURL('http://localhost:8081/detail/mens_outerwear/Men+s+Tech+Shell+Full-Zip');
+
+  // Verify that the current URL is correct after redirection
+  await expect(page).toHaveURL('http://localhost:8081/detail/mens_outerwear/Men+s+Tech+Shell+Full-Zip');
+});
+
+
+test('Check image existence and visibility', async ({ page }) => {
+  await page.goto('http://localhost:8081/detail/mens_outerwear/Men+s+Tech+Shell+Full-Zip');
+
+  //  image element by its id
+  const image = page.getByRole('img', { name: 'Men\'s Tech Shell Full-Zip' });
+
+  //  image is visible on the page
+  await expect(image).toBeVisible();
+
+  await expect(image).toHaveAttribute('src', 'data/images/10-15068A.jpg');
+});
+
+
+test('Check product detail elements exist', async ({ page }) => {
+  await page.goto('http://localhost:8081/detail/mens_outerwear/Men+s+Tech+Shell+Full-Zip');
+  
+  // product title exists
+  const productTitle = page.locator('div.detail h1');
+  await expect(productTitle).toBeVisible();
+  await expect(productTitle).toHaveText("Men's Tech Shell Full-Zip");
+
+  //  price exists
+  const price = page.locator('div.detail .price');
+  await expect(price).toBeVisible();
+  await expect(price).toHaveText('$50.20');
+
+  // the size select dropdown exists
+  const sizeSelect = page.locator('select#sizeSelect');
+  await expect(sizeSelect).toBeVisible();
+  await expect(sizeSelect).toHaveValue('M'); //'M' is selected
+
+  //quantity select dropdown exists
+  const quantitySelect = page.locator('select#quantitySelect');
+  await expect(quantitySelect).toBeVisible();
+  await expect(quantitySelect).toHaveValue('1');
+
+  //  description exists
+  const description = page.locator('div.detail .description p#desc');
+  await expect(description).toBeVisible();
+  await expect(description).toContainText('A versatile full-zip that you can wear all day long');
+
+  // "Add to Cart" button exists
+  const addToCartButton = page.locator('shop-button button[aria-label="Add this item to cart"]');
+  await expect(addToCartButton).toBeVisible();
+});
+
+
+test('check first three shop list items exist', async ({ page }) => {
+  // Navigate to the page containing the list
+  await page.goto('http://localhost:8081/list/ladies_tshirts'); 
+
+  const firstItem = page.locator('ul.grid > li:nth-of-type(1) > a');
+  const secondItem = page.locator('ul.grid > li:nth-of-type(2) > a');
+  const thirdItem = page.locator('ul.grid > li:nth-of-type(3) > a');
+
+  // Define locators for titles and prices within each item
+  const firstItemTitle = firstItem.locator('shop-list-item >> .title'); 
+  const firstItemPrice = firstItem.locator('shop-list-item >> .price'); 
+
+  const secondItemTitle = secondItem.locator('shop-list-item >> .title'); 
+  const secondItemPrice = secondItem.locator('shop-list-item >> .price');
+
+  const thirdItemTitle = thirdItem.locator('shop-list-item >> .title'); 
+  const thirdItemPrice = thirdItem.locator('shop-list-item >> .price'); 
+
+  // Check that each of the first three items is visible
+  await expect(firstItem).toBeVisible();
+  await expect(secondItem).toBeVisible();
+  await expect(thirdItem).toBeVisible();
+
+  // Verify the title and price for the first item
+  await expect(firstItemTitle).toHaveText('Ladies Chrome T-Shirt'); 
+  await expect(firstItemPrice).toHaveText('$13.30'); 
+
+  // Verify the title and price for the second item
+  await expect(secondItemTitle).toHaveText('Ladies Google New York T-Shirt');
+  await expect(secondItemPrice).toHaveText('$18.35'); 
+
+  // Verify the title and price for the third item
+  await expect(thirdItemTitle).toHaveText('Ladies Gmail T-Shirt'); 
+  await expect(thirdItemPrice).toHaveText('$16.40'); 
+});
\ No newline at end of file