add steps and snippets for the checkout feature

Author: ersu-amine

fixtures/pageFixtures.ts

@@ -3,12 +3,14 @@ import { BasePage } from "../pages/BasePage";
 import { LoginPage } from "../pages/LoginPage";
 import { RegistrationPage } from "../pages/RegistrationPage";
 import { ProductPage } from "../pages/ProductPage";
+import { CheckoutPage } from "../pages/CheckoutPage";
 
 type MyFixtures = {
   basePage: BasePage;
   loginPage: LoginPage;
   registrationPage: RegistrationPage;
   productPage: ProductPage;
+  checkoutPage: CheckoutPage;
   //add more types here
 };
 
@@ -25,5 +27,8 @@ export const test = base.extend<MyFixtures>({
   productPage: async ({ page }, use) => {
     await use(new ProductPage(page));
   },
+  checkoutPage: async ({ page }, use) => {
+    await use(new CheckoutPage(page));
+  },
   //define others similarly
 });

pages/CheckoutPage.ts

@@ -0,0 +1,12 @@
+import { Page, Locator, expect } from "@playwright/test";   
+
+export class CheckoutPage {
+readonly page: Page;
+//TODO: Define locators for checkout page elements here
+
+constructor(page: Page) {
+    this.page = page;
+  }
+
+// Add methods for checkout page interactions as needed
+}

tests/features/add-to-cart.feature

@@ -1,4 +1,4 @@
-@wip
+@addToCart
 Feature: Add items to shopping cart
 
   As a user

tests/features/checkout.feature

@@ -0,0 +1,27 @@
+@checkout
+Feature: Checkout
+    Given the user is on the homepage
+
+  Scenario Outline: Verify user can checkout successfully
+    When the user selects a product "Thor Hammer"
+    And the user clicks add to cart button
+    And user clicks shopping cart icon
+    And user click proceed to checkout button
+    And user logs in
+    And user click proceed to checkout button
+    And user fills in the shipping address details and click proceeds to checkout button
+    And user select payment method <"payment-method">
+    And user enters valid payment details for <"payment-method">
+    And user clicks confirm button
+    Then user should see an order confirmation message
+
+    Examples:
+      | payment-method    |
+      | Bank Transfer     |
+      | Cash on Delivery  |
+      | Credit Card       |
+      | Buy Now Pay Later |
+      | Gift Card         |
+
+#TODO Scenario with logged in user before adding to cart
+#TODO Scenario with continuing as guest user

tests/steps/checkout.steps.ts

@@ -0,0 +1,39 @@
+import { Given, When, Then } from "@cucumber/cucumber";
+
+When("user clicks shopping cart icon", async function () {
+
+});
+
+When("user click proceed to checkout button", async function () {
+
+});
+
+When("user logs in", async function () {
+
+});
+
+When(
+  "user fills in the shipping address details and click proceeds to checkout button",
+  async function () {
+
+  }
+);
+
+When("user select payment method <{string}>", async function (string) {
+
+});
+
+When(
+  "user enters valid payment details for <{string}>",
+  async function (string) {
+=
+  }
+);
+
+When("user clicks confirm button", async function () {
+
+});
+
+Then("user should see an order confirmation message", async function () {
+
+});