Playwright-Cucumber-Assessment-ParthRamani

features/login.feature

@@ -4,9 +4,8 @@ Feature: Login Feature
     Given I open the "https://www.saucedemo.com/" page
 
   Scenario: Validate the login page title
-    # TODO: Fix this failing scenario
-    Then I should see the title "Labs Swag"
+    Then I should see the title "Swag Labs"
 
   Scenario: Validate login error message
     Then I will login as 'locked_out_user'
-    # TODO: Add a step to validate the error message received
+    Then I should see error message "Epic sadface: Sorry, this user has been locked out."

features/product.feature

@@ -3,11 +3,12 @@ Feature: Product Feature
   Background:
     Given I open the "https://www.saucedemo.com/" page
 
-  # Create a datatable to validate the Price (high to low) and Price (low to high) sort options (top-right) using a Scenario Outline
-  Scenario Outline:  Validate product sort by price <sort>
-  Then I will login as 'standard_user'
-    # TODO: Sort the items by <sort>
-    # TODO: Validate all 6 items are sorted correctly by price
+  Scenario Outline: Validate product sort by price <sort>
+    Then I will login as 'standard_user'
+    Then I sort items by "<sort>"
+    Then products should be sorted "<order>"
+
   Examples:
-    # TODO: extend the datatable to paramterize this test
-    | sort |
+    | sort                | order      |
+    | Price (low to high) | ascending  |
+    | Price (high to low) | descending |

features/purchase.feature

@@ -6,9 +6,9 @@ Feature: Purchase Feature
   Scenario:  Validate successful purchase text
   Then I will login as 'standard_user'
   Then I will add the backpack to the cart
-    # TODO: Select the cart (top-right)
-    # TODO: Select Checkout
-    # TODO: Fill in the First Name, Last Name, and Zip/Postal Code
-    # TODO: Select Continue
-    # TODO: Select Finish
-    # TODO: Validate the text 'Thank you for your order!'
+  Then I open the cart
+  Then I proceed to checkout
+  Then I enter checkout details "Parth" "Ramani" "400001"
+  Then I continue checkout
+  Then I finish checkout
+  Then I should see text "Thank you for your order!"

pages/login.page.ts

@@ -23,4 +23,4 @@ export class Login {
         await this.page.locator(this.passwordField).fill(this.password)
         await this.page.locator(this.loginButton).click()
     }
-}
+}

pages/product.page.ts

@@ -2,7 +2,18 @@ import { Page } from "@playwright/test"
 
 export class Product {
     private readonly page: Page
+
     private readonly addToCart: string = 'button[id="add-to-cart-sauce-labs-backpack"]'
+    private readonly cartIcon: string = '.shopping_cart_link'
+    private readonly checkoutBtn: string = '#checkout'
+    private readonly firstName: string = '#first-name'
+    private readonly lastName: string = '#last-name'
+    private readonly postalCode: string = '#postal-code'
+    private readonly continueBtn: string = '#continue'
+    private readonly finishBtn: string = '#finish'
+    private readonly successMessage: string = '.complete-header'
+    private readonly sortDropdown: string = '.product_sort_container'
+    private readonly priceList: string = '.inventory_item_price'
 
     constructor(page: Page) {
         this.page = page;
@@ -11,4 +22,41 @@ export class Product {
     public async addBackPackToCart() {
         await this.page.locator(this.addToCart).click()
     }
-}
+
+    public async openCart() {
+        await this.page.locator(this.cartIcon).click()
+    }
+
+
+    public async clickCheckout() {
+        await this.page.locator(this.checkoutBtn).click()
+    }
+
+    public async fillCheckoutDetails(fname: string, lname: string, zip: string) {
+        await this.page.locator(this.firstName).fill(fname)
+        await this.page.locator(this.lastName).fill(lname)
+        await this.page.locator(this.postalCode).fill(zip)
+    }
+
+    public async clickContinue() {
+        await this.page.locator(this.continueBtn).click()
+    }
+
+    public async clickFinish() {
+        await this.page.locator(this.finishBtn).click()
+    }
+
+    public async getSuccessText() {
+        return this.page.locator(this.successMessage)
+    }
+
+    public async sortBy(option: string) {
+        await this.page.selectOption(this.sortDropdown, { label: option })
+    }
+
+    public async getAllPrices() {
+        return this.page.$$eval(this.priceList, items =>
+            items.map(el => parseFloat(el.textContent!.replace('$', '')))
+        )
+    }
+}

steps/login.steps.ts

@@ -1,11 +1,17 @@
 import { Then } from '@cucumber/cucumber';
 import { getPage } from '../playwrightUtilities';
 import { Login } from '../pages/login.page';
+import { expect } from '@playwright/test';
 
 Then('I should see the title {string}', async (expectedTitle) => {
   await new Login(getPage()).validateTitle(expectedTitle);
 });
 
 Then('I will login as {string}', async (userName) => {
   await new Login(getPage()).loginAsUser(userName);
-});
+});
+
+Then('I should see error message {string}', async (message) => {
+  const page = getPage();
+  await expect(page.locator('[data-test="error"]')).toHaveText(message);
+});

steps/product.steps.ts

@@ -1,7 +1,22 @@
 import { Then } from '@cucumber/cucumber';
 import { getPage } from '../playwrightUtilities';
 import { Product } from '../pages/product.page';
+import { expect } from '@playwright/test';
 
 Then('I will add the backpack to the cart', async () => {
   await new Product(getPage()).addBackPackToCart();
-});
+});
+
+Then('I sort items by {string}', async (sortOption) => {
+  await new Product(getPage()).sortBy(sortOption);
+});
+
+Then('products should be sorted {string}', async (order) => {
+  const prices = await new Product(getPage()).getAllPrices();
+
+  const sorted = [...prices].sort((a, b) =>
+    order === 'ascending' ? a - b : b - a
+  );
+
+  expect(prices).toEqual(sorted);
+});

steps/purchase.steps.ts

@@ -0,0 +1,29 @@
+import { Then } from '@cucumber/cucumber';
+import { getPage } from '../playwrightUtilities';
+import { Product } from '../pages/product.page';
+import { expect } from '@playwright/test';
+
+Then('I open the cart', async () => {
+  await new Product(getPage()).openCart();
+});
+
+Then('I proceed to checkout', async () => {
+  await new Product(getPage()).clickCheckout();
+});
+
+Then('I enter checkout details {string} {string} {string}', async (fname, lname, zip) => {
+  await new Product(getPage()).fillCheckoutDetails(fname, lname, zip);
+});
+
+Then('I continue checkout', async () => {
+  await new Product(getPage()).clickContinue();
+});
+
+Then('I finish checkout', async () => {
+  await new Product(getPage()).clickFinish();
+});
+
+Then('I should see text {string}', async (text) => {
+  const successText = await new Product(getPage()).getSuccessText();
+  await expect(successText).toHaveText(text);
+});