scope tests to their respective sections

Author: devKiratu

e2e/footer.spec.ts

@@ -1,26 +1,29 @@
 import { test, expect } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
-  page.goto('http://localhost:3000/#footer');
+  page.goto('http://localhost:3000');
 });
 
 test.describe('Test Footer Navigation Links', () => {
-  test('About us link should navigate to about us section', async ({
+  test('About us link should navigate to About Us section', async ({
     page,
   }) => {
-    await page.getByRole('link', { name: 'About us' }).click();
+    const footerLocator = page.locator('footer');
+    await footerLocator.getByRole('link', { name: 'About us' }).click();
     await expect(page).toHaveURL('/#about-us');
   });
 
   test('Events link should navigate to Events section', async ({ page }) => {
-    await page.getByRole('link', { name: 'Events' }).click();
+    const footerLocator = page.locator('footer');
+    await footerLocator.getByRole('link', { name: 'Events' }).click();
     await expect(page).toHaveURL('/#events');
   });
 
   test('Contact link should navigate to Contact Us section', async ({
     page,
   }) => {
-    await page.getByRole('link', { name: 'Contact' }).click();
+    const footerLocator = page.locator('footer');
+    await footerLocator.getByRole('link', { name: 'Contact' }).click();
     await expect(page).toHaveURL('/#contact-us');
   });
 });

e2e/hero-header.spec.ts

@@ -8,19 +8,22 @@ test.describe('Test Hero Header Navigation Links', () => {
   test('About us link should navigate to about us section', async ({
     page,
   }) => {
-    await page.getByRole('link', { name: 'About us' }).click();
+    const headerLocator = page.locator('header');
+    await headerLocator.getByRole('link', { name: 'About us' }).click();
     await expect(page).toHaveURL('/#about-us');
   });
 
   test('Events link should navigate to Events section', async ({ page }) => {
-    await page.getByRole('link', { name: 'Events' }).click();
+    const headerLocator = page.locator('header');
+    await headerLocator.getByRole('link', { name: 'Events' }).click();
     await expect(page).toHaveURL('/#events');
   });
 
   test('Contact link should navigate to Contact Us section', async ({
     page,
   }) => {
-    await page.getByRole('link', { name: 'Contact' }).click();
+    const headerLocator = page.locator('header');
+    await headerLocator.getByRole('link', { name: 'Contact' }).click();
     await expect(page).toHaveURL('/#contact-us');
   });
 
@@ -31,7 +34,10 @@ test.describe('Test Hero Header Navigation Links', () => {
     const [newPage] = await Promise.all([
       context.waitForEvent('page'),
       page.waitForLoadState(),
-      page.getByRole('link', { name: 'Join Community' }).click(),
+      page
+        .locator('header')
+        .getByRole('link', { name: 'Join Community' })
+        .click(),
     ]);
     await expect(newPage).toHaveURL(
       new RegExp(
@@ -47,7 +53,10 @@ test.describe('Test Hero Header Navigation Links', () => {
     const [newPage] = await Promise.all([
       context.waitForEvent('page'),
       page.waitForLoadState(),
-      page.getByRole('link', { name: 'Join ReactDevsKe' }).click(),
+      page
+        .locator('header')
+        .getByRole('link', { name: 'Join ReactDevsKe' })
+        .click(),
     ]);
     await expect(newPage).toHaveURL(
       new RegExp(