Merge branch '130-new-test-spec-footer-spec-ts' into 'main'

Resolve "New test.spec: footer.spec.ts"

See merge request elgentos/magento2-playwright!4

Author: Shay

tests/cart.spec.ts

@@ -7,7 +7,7 @@ import CartPage from '@poms/frontend/cart.page';
 import LoginPage from '@poms/frontend/login.page';
 import ProductPage from '@poms/frontend/product.page';
 import { requireEnv } from '@utils/env.utils';
-import NotificationValidator from '@utils/notification.validator';
+import NotificationValidatorUtils from '@utils/notificationValidator.utils';
 
 test.describe('Cart functionalities (guest)', () => {
   /**
@@ -26,8 +26,8 @@ test.describe('Cart functionalities (guest)', () => {
     await productPage.addSimpleProductToCart(UIReference.productPage.simpleProductTitle, slugs.productpage.simpleProductSlug);
 
     const productAddedNotification = `${outcomeMarker.productPage.simpleProductAddedNotification} ${UIReference.productPage.simpleProductTitle}`;
-    const notificationValidator = new NotificationValidator(page, testInfo);
-    await notificationValidator.validate(productAddedNotification);
+    const notificationValidator = new NotificationValidatorUtils(page, testInfo);
+    await notificationValidator.validate('beforeEach add product to cart', productAddedNotification);
 
     // await mainMenu.openMiniCart();
     // await expect(page.getByText(outcomeMarker.miniCart.simpleProductInCartTitle)).toBeVisible();

tests/config/element-identifiers.json

@@ -149,6 +149,15 @@
   "customerOverviewPage": {
     "tableSearchFieldLabel": "Search by keyword"
   },
+  "footerPage": {
+    "footerLocator": ".page-footer",
+    "currencyIdentifier": "#currency-heading",
+    "currencyLabel": "Currency",
+    "currencyDollar": "USD - US Dollar",
+    "currencyEuro": "EUR - Euro",
+    "newsletterInputElementLabel": "Email Address",
+    "newsletterSubscribeButtonLabel": "Subscribe"
+  },
   "general": {
     "addToCartLabel": "Add to Cart",
     "closeMessageLabel": "Close message",

tests/config/outcome-markers.json

@@ -39,6 +39,10 @@
   "customerOverviewPage": {
     "searchResultsFoundText": "records found"
   },
+  "footerPage": {
+    "newsletterSubscription": "Thank you for your subscription.",
+    "newsletterAlreadySubscribed": "This email address is already subscribed."
+  },
   "homePage": {
     "firstProductName": "Aim Analog Watch"
   },

tests/footer.spec.ts

@@ -0,0 +1,50 @@
+// @ts-check
+
+import { test } from '@playwright/test';
+import { outcomeMarker } from '@config';
+import NotificationValidatorUtils from "@utils/notificationValidator.utils";
+
+import NewsletterPage from "@poms/frontend/newsletter.page";
+import Footer from '@poms/frontend/footer.page';
+
+test.describe('Footer', () => {
+
+	test(
+		'Footer_is_available',
+		{tag: ['@footer', '@cold']},
+		async ({page}) => {
+			const footer = new Footer(page);
+
+			await page.goto('');
+			await footer.goToFooterElement();
+		}
+	)
+
+	test(
+		'Footer_switch_currency',
+		{tag: ['@footer', '@cold']},
+		async ({page}) => {
+			const footer = new Footer(page);
+
+			await page.goto('');
+			await footer.switchCurrency();
+		}
+	)
+
+	test(
+		'Footer_newsletter_subscription',
+		{tag: ['@footer', '@cold']},
+		async ({page}, testInfo) => {
+			const newsletterPage = new NewsletterPage(page);
+
+			await page.goto('');
+			await newsletterPage.footerSubscribeToNewsletter();
+
+			const subscriptionOutput = outcomeMarker.footerPage.newsletterSubscription;
+			const notificationType = 'Newsletter subscription notification';
+
+			const notificationValidator = new NotificationValidatorUtils(page, testInfo);
+			await notificationValidator.validate(notificationType, subscriptionOutput);
+		}
+	)
+})

tests/poms/frontend/footer.page.ts

@@ -0,0 +1,52 @@
+// @ts-check
+
+import { expect, Locator, type Page } from '@playwright/test';
+import { UIReference } from '@config';
+
+class Footer {
+    readonly page: Page
+    readonly footerElement: Locator
+
+
+    constructor(page: Page) {
+        this.page = page
+        this.footerElement = this.page.locator(UIReference.footerPage.footerLocator);
+    }
+
+    async goToFooterElement () {
+        await this.page.getByText(UIReference.footerPage.currencyLabel).scrollIntoViewIfNeeded();
+        await expect(
+          this.footerElement,
+          'Footer is visible'
+        ).toBeVisible();
+    }
+
+    async switchCurrency () {
+        await this.goToFooterElement();
+
+        const isUsdActive = await this.page.getByRole('button', {
+            name: UIReference.footerPage.currencyDollar
+        }).isVisible();
+
+        const currencyToOpen = isUsdActive ? UIReference.footerPage.currencyDollar : UIReference.footerPage.currencyEuro;
+        const currencyToSelect = isUsdActive ? UIReference.footerPage.currencyEuro : UIReference.footerPage.currencyDollar;
+
+        await this.page.getByRole('button', { name: currencyToOpen }).click();
+
+        await expect(
+          this.page.getByRole('navigation', { name: UIReference.footerPage.currencyLabel }),
+          'Footer navigation is visible'
+        ).toBeVisible();
+
+        await this.page.getByRole('link', { name: currencyToSelect }).click();
+
+        await this.goToFooterElement();
+
+        await expect(
+          this.page.getByRole('button', { name: currencyToSelect }),
+          'Currency selector is visible'
+        ).toBeVisible();
+    }
+}
+
+export default Footer;

tests/poms/frontend/newsletter.page.ts

@@ -1,7 +1,8 @@
 // @ts-check
 
 import { expect, type Locator, type Page } from '@playwright/test';
-import { UIReference, outcomeMarker } from '@config';
+import { UIReference, outcomeMarker, inputValues } from '@config';
+import { faker } from '@faker-js/faker'
 
 class NewsletterSubscriptionPage {
   readonly page: Page;
@@ -15,16 +16,15 @@ class NewsletterSubscriptionPage {
   }
 
   async updateNewsletterSubscription(){
-    
-    if(await this.newsletterCheckElement.isChecked()) {
-      // user is already subscribed, test runs unsubscribe 
-      var subscriptionUpdatedNotification = outcomeMarker.account.newsletterRemovedNotification; 
 
+    let subscriptionUpdatedNotification = outcomeMarker.account.newsletterRemovedNotification;
+    let subscribed = false;
+
+    if(await this.newsletterCheckElement.isChecked()) {
+      // user is already subscribed, test runs unsubscribe
       await this.newsletterCheckElement.uncheck();
       await this.saveSubscriptionsButton.click();
 
-      var subscribed = false;
-      
     } else {
       // user is not yet subscribed, test runs subscribe
       subscriptionUpdatedNotification = outcomeMarker.account.newsletterSavedNotification;
@@ -38,6 +38,12 @@ class NewsletterSubscriptionPage {
     await expect(this.page.getByText(subscriptionUpdatedNotification)).toBeVisible();
     return subscribed;
   }
+
+  async footerSubscribeToNewsletter() {
+    await expect(this.page.getByRole('textbox', {name: UIReference.footerPage.newsletterInputElementLabel})).toBeVisible();
+    await this.page.getByRole('textbox', {name: UIReference.footerPage.newsletterInputElementLabel}).fill(faker.internet.email());
+    await this.page.getByRole('button', {name: UIReference.footerPage.newsletterSubscribeButtonLabel}).click();
+  }
 }
 
 export default NewsletterSubscriptionPage;

tests/poms/frontend/product.page.ts

@@ -2,7 +2,6 @@
 
 import { expect, type Locator, type Page } from '@playwright/test';
 import { UIReference, outcomeMarker, slugs } from '@config';
-import NotificationValidator from '@utils/notification.validator';
 
 class ProductPage {
   readonly page: Page;

tests/utils/notification.validator.ts …sts/utils/notificationValidator.utils.tstests/utils/notification.validator.ts renamed to tests/utils/notificationValidator.utils.ts tests/utils/notification.validator.ts renamed to tests/utils/notificationValidator.utils.ts

@@ -3,7 +3,7 @@
 import { expect, Page, TestInfo } from "@playwright/test";
 import { UIReference } from '@config';
 
-class NotificationValidator {
+class NotificationValidatorUtils {
 
     private page : Page;
     private testInfo: TestInfo;
@@ -14,10 +14,11 @@ class NotificationValidator {
     }
 
     /**
-     * @param value (expected text on page)
+     * @param notificationType
+     * @param value
      * @return json object
      */
-    async validate(value: string) {
+    async validate(notificationType: string, value: string) {
         await this.page.locator(UIReference.general.messageLocator).waitFor({ state: 'visible' });
         const notificationText = await this.page.locator(UIReference.general.messageLocator).textContent();
         let message = { success: true, message: 'Action was successful, but notification text could not be extracted.'};
@@ -34,8 +35,10 @@ class NotificationValidator {
             message = { success: false, message: `Notification text not found: ${value}. Found notification text: ${notificationText}` };
         }
 
-        this.testInfo.annotations.push({ type: 'Notification message on page', description: message.message });
+        this.testInfo.annotations.push({ type: `Notification: ${notificationType}`, description: message.message });
+
+        return message;
     }
 }
 
-export default NotificationValidator;
+export default NotificationValidatorUtils;