QA: Language logo Playwright test code (#40)

zeigest · web-flow · commit bee24260d0c4 · 2025-10-01T19:22:17.000-06:00
* QA: languaje logo ok

* Update HomePage.spec.ts

Remove extra tabs in code

* Language toggle added in Page Object. AssertionsHelper created

---------

Co-authored-by: robblun19 &lt;Roberto Luna&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -11,7 +11,7 @@ const homepageUrl = t("homepage-url");
   return (
     <div className="fixed flex items-center justify-between w-full px-4 md:px-8 py-4">
       <div
-        className="flex items-center"
+        className="flex items-center cursor-pointer"
         onClick={() =>
                     (window.location.href = homepageUrl)
         }
diff --git a/tests/e2e/HomePage.spec.ts b/tests/e2e/HomePage.spec.ts
@@ -1,6 +1,8 @@
-import { expect, test } from '@playwright/test';
+import { test, expect } from '@playwright/test';
+import TestData from '../fixtures/testData';
 import { closeQuickEscapeModal } from '../fixtures/testHelpers';
-import { HomePage, TestData } from '../page-objects';
+import { HomePage } from '../page-objects';
+import { expectUiLanguage } from '../fixtures/assertionsHelper';
 
 test.describe('Homepage', () => {
   let homePage: HomePage;
@@ -41,17 +43,19 @@ test.describe('Homepage', () => {
 
     test('should handle language switching', async ({ page }) => {
       await closeQuickEscapeModal(page);
-      
-      const languageToggle = page.locator('button').filter({ hasText: 'En' });
-      if (await languageToggle.isVisible()) {
-        await languageToggle.click();
-        await expect(page.locator('text="Donar"')).toBeVisible();
-        
-        const spanishToggle = page.locator('button').filter({ hasText: 'Es' });
-        await spanishToggle.click();
-        await expect(page.locator('text="Donate"')).toBeVisible();
-      }
-    });
+  
+    // Visible En
+    await expectUiLanguage(page, 'EN');
+
+    // Change to Es and Verify
+    await homePage.switchLanguage('ES');
+    await expectUiLanguage(page, 'ES');
+
+    // Change to En and Verify
+    await homePage.switchLanguage('EN');
+    await expectUiLanguage(page, 'EN');
+
+});
 
     test('should display quick escape by default', async ({ page }) => {
       await page.goto('/');
diff --git a/tests/e2e/Navigation.spec.ts b/tests/e2e/Navigation.spec.ts
@@ -1,40 +1,37 @@
 import { expect, test } from '@playwright/test';
 import TestData from '../fixtures/testData';
 import { setupPageWithoutQuickEscape } from '../fixtures/testHelpers';
+import { BreathingExercisePage } from '../page-objects';
+import { expectUiLanguage } from '../fixtures/assertionsHelper';
 
 test.describe('Navigation', () => {
   test.beforeEach(async ({ page }) => {
     await setupPageWithoutQuickEscape(page, TestData.urls.homepage);
   });
 
   test.describe('Language Switching', () => {
-    test('should switch to Spanish when language toggle is clicked', async ({ page }) => {
-      const languageToggle = page.locator('button').filter({ hasText: 'En' });
-      await expect(languageToggle).toBeVisible();
-      await expect(page.locator('text="Donate"')).toBeVisible();
-      
-      await languageToggle.click();
-      
-      const spanishToggle = page.locator('button').filter({ hasText: 'Es' });
-      await expect(spanishToggle).toBeVisible();
-      await expect(page.locator('text="Donar"')).toBeVisible();
-    });
+  test('should switch to Spanish when language toggle is clicked', async ({ page }) => {
+    const exercise = new BreathingExercisePage(page);
+    // Initial state, En
+    await expectUiLanguage(page, 'EN');
+    // Change to Es
+    await exercise.switchLanguage('ES');
+    // Es language state
+    await expectUiLanguage(page, 'ES');
+  });
 
-    test('should switch back to English when language toggle is clicked again', async ({ page }) => {
-      const languageToggle = page.locator('button').filter({ hasText: 'En' });
-      await languageToggle.click();
-      
-      const spanishToggle = page.locator('button').filter({ hasText: 'Es' });
-      await expect(spanishToggle).toBeVisible();
-      await expect(page.locator('text="Donar"')).toBeVisible();
-      
-      await spanishToggle.click();
-      
-      const englishToggle = page.locator('button').filter({ hasText: 'En' });
-      await expect(englishToggle).toBeVisible();
-      await expect(page.locator('text="Donate"')).toBeVisible();
-    });
+  test('should switch back to English when language toggle is clicked again', async ({ page }) => {
+    const exercise = new BreathingExercisePage(page);
+
+    // Go to Es and check
+    await exercise.switchLanguage('ES');
+    await expectUiLanguage(page, 'ES');
+
+    // Go back to En and Check
+    await exercise.switchLanguage('EN');
+    await expectUiLanguage(page, 'EN');
   });
+});
 
   test.describe('Quick Escape Feature', () => {
     test('should display quick escape modal by default', async ({ page }) => {
diff --git a/tests/fixtures/assertionsHelper.ts b/tests/fixtures/assertionsHelper.ts
@@ -0,0 +1,16 @@
+import {expect, Page} from '@playwright/test';
+
+export async function expectUiLanguage (page: Page, lang: 'EN' | 'ES'){
+    //Toggle by language
+    const toggle = page.getByRole('button', { name: lang === 'EN' ? /^En$/i : /^Es$/i });
+    await expect(toggle).toBeVisible();
+    
+    // Donation link and text
+    const donateName = lang === 'EN' ? /^Donate$/i : /^Donar$/i;
+    await expect(page.getByRole('link', { name: donateName })).toBeVisible();
+
+    // Logo by language
+    const logo = page.getByAltText('LogoAlt');
+    const suffix = lang.toLowerCase(); // 'en' | 'es'
+    await expect(logo).toHaveAttribute('src', new RegExp(`TrevorLogo-${suffix}\\.svg(\\?.*)?$`, 'i'));
+}
diff --git a/tests/page-objects/BreathingExercisePage.ts b/tests/page-objects/BreathingExercisePage.ts
@@ -7,6 +7,9 @@ import TestData from '../fixtures/testData';
  */
 export class BreathingExercisePage {
   readonly page: Page;
+
+  //Language elements
+  readonly languageToggleBase: Locator;
   
   // Exercise elements
   readonly breathingCircle: Locator;
@@ -25,7 +28,9 @@ export class BreathingExercisePage {
 
   constructor(page: Page) {
     this.page = page;
-    
+
+    // Language controls
+    this.languageToggleBase = page.locator(TestData.selectors.languageToggle);
     // Exercise controls
     this.breathingCircle = page.locator(TestData.selectors.breathingCircle);
     this.pauseButton = page.locator(TestData.selectors.pauseButton);
@@ -42,21 +47,29 @@ export class BreathingExercisePage {
     this.timer = page.locator('[data-testid="timer"], [data-testid="countdown"]');
   }
 
+    // Get Toggle by language
+  getLanguageToggle(lang: 'EN' | 'ES') {
+    const re = lang === 'EN' ? /^En$/i : /^Es$/i;
+    return this.page.getByRole('button', { name: re });
+  }
+  
+  private toggleButton() {
+  return this.page.getByRole('button', { name: /^(En|Es)$/i });
+}
   /**
    * Navigate directly to the exercise page
    */
   async goto() {
     await this.page.goto(TestData.urls.exercise);
   }
 
-  /**
-   * Start the breathing exercise
+   /**
+   * Change language
    */
-  async startExercise() {
-    const startButton = this.page.locator('[data-testid="start-button"], [data-testid="begin-exercise"]');
-    if (await startButton.isVisible()) {
-      await startButton.click();
-    }
+  async switchLanguage(target: 'EN' | 'ES') {
+    if (await this.getLanguageToggle(target).isVisible()) return;
+    await this.toggleButton().click();
+    await this.getLanguageToggle(target).waitFor({ state: 'visible' });
   }
 
   /**
diff --git a/tests/page-objects/HomePage.ts b/tests/page-objects/HomePage.ts
@@ -14,6 +14,8 @@ import TestData from '../fixtures/testData';
 export class HomePage {
   readonly page: Page;
   
+  // Language elements
+  readonly languageToggleBase: Locator;
   // Page elements
   readonly startButton: Locator;
   readonly welcomeText: Locator;
@@ -27,6 +29,9 @@ export class HomePage {
   constructor(page: Page) {
     this.page = page;
     
+    // Language controls
+    this.languageToggleBase = page.locator(TestData.selectors.languageToggle);    
+
     // Initialize locators using TestData selectors
     this.startButton = page.locator(TestData.selectors.startButton);
     this.welcomeText = page.locator(TestData.selectors.welcomeText);
@@ -42,13 +47,36 @@ export class HomePage {
 
   }
 
+
+    // Get Toggle by language
+  getLanguageToggle(lang: 'EN' | 'ES') {
+    const re = lang === 'EN' ? /^En$/i : /^Es$/i;
+    return this.page.getByRole('button', { name: re });
+  }
+
+  private toggleButton() {
+  return this.page.getByRole('button', { name: /^(En|Es)$/i });
+}
   /**
    * Navigate to the homepage
    */
   async goto() {
     await this.page.goto(TestData.urls.homepage);
   }
 
+  /**
+  * Change language
+  */
+  async switchLanguage(target: 'EN' | 'ES') {
+    if (await this.getLanguageToggle(target).isVisible()) return;
+    await this.toggleButton().click();
+    await this.getLanguageToggle(target).waitFor({ state: 'visible' });
+  }
+  
+  async hasLanguageToggle() {
+    return await this.languageToggleBase.isVisible();
+  }
+
   /**
    * Start the breathing exercise
    */
@@ -107,13 +135,6 @@ export class HomePage {
     return await this.startButton.isVisible();
   }
 
-  /**
-   * Check if language toggle is available
-   */
-  async hasLanguageToggle() {
-    return await this.languageToggle.isVisible();
-  }
-
   /**
    * Check if quick escape is available
    */
diff --git a/tests/playwright.config.ts b/tests/playwright.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
-  testDir: 'e2e',
+  testDir: './e2e',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const homepageUrl = t("homepage-url");`
`11`	`11`	`return (`
`12`	`12`	`<div className="fixed flex items-center justify-between w-full px-4 md:px-8 py-4">`
`13`	`13`	`<div`
`14`		`- className="flex items-center"`
	`14`	`+ className="flex items-center cursor-pointer"`
`15`	`15`	`onClick={() =>`
`16`	`16`	`(window.location.href = homepageUrl)`
`17`	`17`	`}`