PLaywright tests

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();
+});

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}`);
+  });

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();
+});

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');
+  });
+});