Adding region selector tests for bacom blog. (#322)

Co-authored-by: Dennis Li <[email protected]>

configs/bacom-blog.config.js

@@ -40,7 +40,7 @@ const config = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-    baseURL: process.env.BASE_URL || envs['@bacom_live'] || 'https://main--bacom--adobecom.hlx.live',
+    baseURL: process.env.BASE_URL || envs['@bacomblog_live'] || 'https://main--bacom-blog--adobecom.hlx.live',
   },
 
   /* Configure projects for major browsers */

features/bacom-blog/language-menu.spec.js

@@ -0,0 +1,13 @@
+module.exports = {
+  FeatureName: 'Bacom Blog Language Menu',
+  features: [
+    {
+      tcid: '0',
+      name: 'Bacom Blog Language Menu',
+      path: [
+        '/',
+      ],
+      tags: '@bacom-blog @smoke @regression',
+    },
+  ],
+};

selectors/bacom-blog/language-menu.page.js

@@ -0,0 +1,61 @@
+import { expect } from '@playwright/test';
+
+/**
+ * @description A class that represents the language menu in the footer on bacom blog.
+ */
+export default class LanguageMenu {
+  constructor(page) {
+    this.page = page;
+    this.footerRegionButton = this.page.locator('.footer-region > button');
+    this.languageMenu = this.page.locator('ul#language-menu');
+    this.au = this.languageMenu.getByText('AU (English)');
+    this.uk = this.languageMenu.getByText('UK (English)');
+    this.us = this.languageMenu.getByText('US (English)');
+    this.de = this.languageMenu.getByText('Deutschland');
+    this.fr = this.languageMenu.getByText('France');
+    this.kr = this.languageMenu.getByText('한국');
+    this.jp = this.languageMenu.getByText('日本');
+  }
+
+  /**
+   * @description Opens the menu and verifies the menu items are displayed.
+   */
+  async openLanguageMenu() {
+    await this.footerRegionButton.click();
+    await expect(await this.footerRegionButton.getAttribute('aria-expanded')).toBe('true');
+    await expect(await this.languageMenu).toBeVisible();
+    await expect(await this.au).toBeVisible();
+    await expect(await this.uk).toBeVisible();
+    await expect(await this.us).toBeVisible();
+    await expect(await this.de).toBeVisible();
+    await expect(await this.fr).toBeVisible();
+    await expect(await this.kr).toBeVisible();
+    await expect(await this.jp).toBeVisible();
+  }
+
+  /**
+   * @description Closes language menu and verifies the menu is hidden.
+  */
+  async closeLanguageMenu() {
+    await this.footerRegionButton.click();
+    await expect(await this.footerRegionButton.getAttribute('aria-expanded')).toBe('false');
+    await expect(await this.languageMenu).not.toBeVisible();
+    await expect(await this.au).not.toBeVisible();
+    await expect(await this.uk).not.toBeVisible();
+    await expect(await this.us).not.toBeVisible();
+    await expect(await this.de).not.toBeVisible();
+    await expect(await this.fr).not.toBeVisible();
+    await expect(await this.kr).not.toBeVisible();
+    await expect(await this.jp).not.toBeVisible();
+  }
+
+  /**
+   * @description Selects a region from the language menu
+   * @param {string} region Options: [au, uk, fr, de, jp, kr]
+   */
+  async changeFromUsToRegion(region) {
+    const regionLink = this.page.locator(`//ul[@id='language-menu']/li/a[contains(@href, "${region}")]`);
+    await regionLink.click();
+    await expect(await this.page.url()).toContain(`/${region}/blog/`);
+  }
+}

tests/bacom-blog/language-menu.test.js

@@ -0,0 +1,32 @@
+import { test } from '@playwright/test';
+import { features } from '../../features/bacom-blog/language-menu.spec.js';
+import LanguageMenu from '../../selectors/bacom-blog/language-menu.page.js';
+
+let languageMenu;
+
+const miloLibs = process.env.MILO_LIBS || '';
+
+test.describe('Bacom Blog Language Menu test suite', () => {
+  test.beforeEach(async ({ page }) => {
+    languageMenu = new LanguageMenu(page);
+  });
+
+  test(`0: Selecting language menu options, ${features[0].tags}`, async ({ page, baseURL }) => {
+    console.info(`[Test Page]: ${baseURL}${features[0].path}${miloLibs}`);
+    await page.goto(`${baseURL}${features[0].path}${miloLibs}`);
+    await page.waitForLoadState('domcontentloaded');
+
+    await test.step('Click the region menu to view menu options.', async () => {
+      await languageMenu.openLanguageMenu();
+    });
+
+    await test.step('Close region menu by clicking the region menu button.', async () => {
+      await languageMenu.closeLanguageMenu();
+    });
+
+    await test.step('Changing regions by selecting a language menu option', async () => {
+      await languageMenu.openLanguageMenu();
+      await languageMenu.changeFromUsToRegion('jp');
+    });
+  });
+});