Add user checkout flow

.github/workflows/release.yaml

@@ -1,4 +1,4 @@
-name: v3.6.0
+name: v3.7.0
 on:
    push
 

README.md

@@ -1,6 +1,6 @@
 # Magento WebApp Test Automation Framework
 
-[![v3.6.0.](https://github.com/najeeb1023/magento-webapp/actions/workflows/release.yaml/badge.svg)](https://github.com/najeeb1023/magento-webapp/actions/workflows/release.yaml)
+[![v3.7.0.](https://github.com/najeeb1023/magento-webapp/actions/workflows/release.yaml/badge.svg)](https://github.com/najeeb1023/magento-webapp/actions/workflows/release.yaml)
 ![License](https://img.shields.io/badge/license-MIT-green)
 
 ## Overview

src/test/features/UserShoppingByWear.feature

@@ -11,18 +11,22 @@ Feature: Verify that the user is able to purchase some item.
     Scenario: User shops for Men attire.
         When The user clicks on the "<Section>" section and the user clicks on "<Attire>" option.
         And The products are shown and user navigates to a product.
-        Then The details of the product are shown.
+        And The details of the product are shown and user adds the product in their cart.
+        And User navigates to checkout page.
+        And User enters "<EmailAddress>", "<FirstName>", "<LastName>", "<Address>", "<City>", "<State>", "<ZipCode>", "<Country>" and "<PhoneNumber>"
 
         Examples:
-            | Section  | Attire      |
-            | Men      | Jackets     |
+            | Section  | Attire      | EmailAddress          | FirstName | LastName | Address         | City          | State    | ZipCode | Country  | PhoneNumber |
+            | Men      | Jackets     | randomemail@gmail.com | Ronald    | McDonald | Any Street 9112 | New York City | New York | 92784   | United States  | 873487682   |
 
     @WomenShopping
     Scenario: User shops for Women attire.
         When The user clicks on the "<Section>" section and the user clicks on "<Attire>" option.
         And The products are shown and user navigates to a product.
-        Then The details of the product are shown.
+        And The details of the product are shown and user adds the product in their cart.
+        And User navigates to checkout page.
+        And User enters "<EmailAddress>", "<FirstName>", "<LastName>", "<Address>", "<City>", "<State>", "<ZipCode>", "<Country>" and "<PhoneNumber>"
 
         Examples:
-            | Section    | Attire        |
-            | Women      | Bras & Tanks  |
+            | Section    | Attire        | EmailAddress          | FirstName | LastName | Address         | City          | State    | ZipCode | Country      | PhoneNumber |
+            | Women      | Bras & Tanks  | randomemail@gmail.com | Ronald    | McDonald | Any Street 9112 | New York City | New York | 92784   | United States | 873487682   |

src/test/pages/UserShoppingByWear.ts

@@ -36,6 +36,10 @@ import { Page, expect } from "@playwright/test";
         public async userItemCheckout(){
             await this.userShoppingByWear.addToCartProduct();
             await this.userShoppingByWear.proceedToCheckout();
+        };
+
+        public async enterUserCheckoutDetails(emailAddress: string, firstName: string, lastName: string, streetAddress: string, city: string, state: string, zipcode: string, country: string, phoneNumber: string){
+            await this.userShoppingByWear.fillCheckoutForm(emailAddress, firstName, lastName, streetAddress, city, state, zipcode, country, phoneNumber);
         }
 };
 
@@ -65,7 +69,17 @@ import { Page, expect } from "@playwright/test";
         pageTitle:() => pageFixture.page.locator(getResourceRegisterPage('createAccHeading').selectorValue),
         productTitle:() => pageFixture.page.locator(getResourceRegisterPage('productTitle').selectorValue),
         miniCartBtn:() => pageFixture.page.locator(getResource('miniCartBtn').selectorValue),
-        proceedToCheckoutBtn:() => pageFixture.page.locator(getResource('proceedToCheckoutBtn').selectorValue)
+        proceedToCheckoutBtn:() => pageFixture.page.locator(getResource('proceedToCheckoutBtn').selectorValue),
+        emailAddress:() => pageFixture.page.locator(getResource('emailAddress').selectorValue),
+        firstName:() => pageFixture.page.locator(getResource('firstName').selectorValue),
+        lastName:() => pageFixture.page.locator(getResource('lastName').selectorValue),
+        streetAddress:() => pageFixture.page.locator(getResource('streetAddress').selectorValue),
+        city:() => pageFixture.page.locator(getResource('city').selectorValue),
+        state:() => pageFixture.page.locator(getResource('state').selectorValue),
+        zipCode:() => pageFixture.page.locator(getResource('zipCode').selectorValue),
+        country:() => pageFixture.page.locator(getResource('country').selectorValue),
+        phoneNumber:() => pageFixture.page.locator(getResource('phoneNumber').selectorValue),
+        nextBtn:() => pageFixture.page.locator(getResource('nextBtn').selectorValue)
 
     };
 
@@ -168,4 +182,21 @@ import { Page, expect } from "@playwright/test";
         await this.userShoppingByWearByWearLocators.miniCartBtn().click();
         await this.userShoppingByWearByWearLocators.proceedToCheckoutBtn().click();
     };
+
+    public async fillCheckoutForm(emailAddress: string, firstName: string, lastName: string, streetAddress: string, city: string, state: string, zipcode: string, country: string, phoneNumber: string):Promise<void>{
+        await pageFixture.page.waitForLoadState('networkidle');
+        await this.userShoppingByWearByWearLocators.emailAddress().fill(emailAddress);
+        await this.userShoppingByWearByWearLocators.firstName().fill(firstName);
+        await this.userShoppingByWearByWearLocators.lastName().fill(lastName);
+        await this.userShoppingByWearByWearLocators.streetAddress().fill(streetAddress);
+        await this.userShoppingByWearByWearLocators.city().fill(city);
+        await this.userShoppingByWearByWearLocators.state().selectOption(state);
+        await this.userShoppingByWearByWearLocators.state().scrollIntoViewIfNeeded();
+        await this.userShoppingByWearByWearLocators.zipCode().fill(zipcode);
+        await this.userShoppingByWearByWearLocators.country().scrollIntoViewIfNeeded();
+        await this.userShoppingByWearByWearLocators.country().selectOption(country);
+        await this.userShoppingByWearByWearLocators.phoneNumber().fill(phoneNumber);
+        await this.userShoppingByWearByWearLocators.nextBtn().scrollIntoViewIfNeeded();
+        await this.userShoppingByWearByWearLocators.nextBtn().click();
+    };
 };

src/test/resources/userShoppingPageByWear.json

@@ -69,7 +69,46 @@
         {
             "elementName": "proceedToCheckoutBtn",
             "selectorValue": "//div[contains(@class,'primary')]//button[contains(@id,'top-cart-btn-checkout')]"
+        },
+        {
+            "elementName": "emailAddress",
+            "selectorValue": "(//input[contains(@id,'customer-email')])[1]"
+        },
+        {
+            "elementName": "firstName",
+            "selectorValue": "//input[contains(@name,'firstname')]"
+        },
+        {
+            "elementName": "lastName",
+            "selectorValue": "//input[contains(@name,'lastname')]"
+        },
+        {
+            "elementName": "streetAddress",
+            "selectorValue": "//input[contains(@name,'street[0]')]"
+        },
+        {
+            "elementName": "city",
+            "selectorValue": "//input[contains(@name,'city')]"
+        },
+        {
+            "elementName": "state",
+            "selectorValue": "//select[contains(@name,'region_id')]"
+        },
+        {
+            "elementName": "zipCode",
+            "selectorValue": "//input[contains(@name,'postcode')]"
+        },
+        {
+            "elementName": "country",
+            "selectorValue": "//select[contains(@name,'country_id')]"
+        },
+        {
+            "elementName": "phoneNumber",
+            "selectorValue": "//input[contains(@name,'telephone')]"
+        },
+        {
+            "elementName": "nextBtn",
+            "selectorValue": "//button[contains(@class,'button action continue primary')]"
         }
-
         ]
 }

src/test/steps/userShoppingByWearStepDef.ts

@@ -14,7 +14,14 @@ When("The products are shown and user navigates to a product.", async function (
     await categoryAndProductSectionFacade.selectRandomItem();
 });
 
-When("The details of the product are shown.", async function (){
+When("The details of the product are shown and user adds the product in their cart.", async function (){
     await categoryAndProductSectionFacade.showProductDetails();
+});
+
+When("User navigates to checkout page.", async function (){
     await categoryAndProductSectionFacade.userItemCheckout();
-});
+});
+
+Then("User enters {string}, {string}, {string}, {string}, {string}, {string}, {string}, {string} and {string}", async function (emailAddress: string, firstName: string, lastName: string, streetAddress: string, city: string, state: string, zipcode: string, country: string, phoneNumber: string){
+    await categoryAndProductSectionFacade.enterUserCheckoutDetails(emailAddress, firstName, lastName, streetAddress, city, state, zipcode, country, phoneNumber);
+});