updated Volunteer Services Playwright flow as per new UI

Author: IdealSoftSolutions

test-data/Volunteer-data.js

@@ -7,12 +7,19 @@ export const volunteerTestData = {
     volunteerMatch: 'https://www.idealist.org/volunteermatch'
   },
 
+
   locators: {
-    menuButton: 'text=Volunteer Services',
-    menuRole: 'ul[role="menu"]',
-    howWeOperate: 'a[href="/how-we-operate"]',
-    collaborators: 'a[href="/collaborators"]',
-    joinCommunity: 'text=Join the Community',
-    volunteerMatch: 'a[href="https://www.idealist.org/volunteermatch"]'
+    // Matches: await page.getByRole('button', { name: 'Volunteer Services' })
+    menuButton: { role: 'button', name: 'Volunteer Services' },
+    // Matches: await page.getByRole('menuitem', { name: 'How We Operate' })
+    howWeOperate: { role: 'menuitem', name: 'How We Operate' },
+    // Matches: await page.getByRole('menuitem', { name: 'Our Collaborators' })
+    collaborators: { role: 'menuitem', name: 'Our Collaborators' },
+    //For how we operate
+    joinCommunityBtn: { role: 'button', name: 'Join the community' }, 
+    //For our collaborators
+    joinCommunityLink: { role: 'link', name: 'Join the community' },
+    // Matches: await page.getByRole('link', { name: 'Volunteer Match Volunteer' })
+    volunteerMatch: { role: 'link', name: 'Volunteer Match Volunteer' }
   }
 };

tests/Volunteer.spec.js

@@ -1,17 +1,24 @@
-import { test, expect } from '@playwright/test';
+/*import { test, expect } from '@playwright/test';
 import { volunteerTestData as data } from '../test-data';
 
 test.describe('Volunteer Services Flow', () => {
 
-  test.beforeEach(async ({ page }) => {
-    await page.goto(data.urls.home);
-    await page.waitForTimeout(1500); // see home load
-  });
+  test('Volunteer Services full flow', async ({ page }) => {
 
-  const openVolunteerMenu = async (page) => {
-    await page.getByRole('button', { name: 'Volunteer Services' }).click();
-    await page.waitForTimeout(1500); // see dropdown open
-  };
+  // Go to home only once
+  await page.goto(data.urls.home);
+
+  // Open Volunteer Services
+  await page.getByRole(menuButton.role, { name: menuButton.name }).click();
+
+  // Go to How We Operate
+  await page.getByRole(howWeOperate.role, { name: howWeOperate.name }).click();
+  await expect(page).toHaveURL(data.urls.howWeOperate);
+
+  // Click Join Community
+  await page.getByRole(joinCommunityBtn.role, { name: joinCommunityBtn.name }).click();
+  await expect(page).toHaveURL(data.urls.contact);
+  await page.waitForTimeout(1500);
 
   test('How We Operate -> Contact', async ({ page }) => {
 
@@ -60,4 +67,69 @@ test.describe('Volunteer Services Flow', () => {
     await newPage.close();
   });
 
+});*/
+
+import { test, expect } from '@playwright/test';
+import { volunteerTestData as data } from '../test-data';
+
+const { menuButton, howWeOperate, collaborators, joinCommunityBtn, joinCommunityLink, volunteerMatch } = data.locators;
+
+test.describe('Volunteer Services Flow', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(data.urls.home);
+    await page.waitForTimeout(1500)
+  });
+  
+  const openVolunteerMenu = async (page) => {
+    //await page.goto(data.urls.home);
+    await page.getByRole(menuButton.role, { name: menuButton.name }).click();
+    await page.waitForTimeout(1500);
+  };
+  
+
+  test('How We Operate -> Contact', async ({ page }) => {
+
+    await openVolunteerMenu(page);
+
+    await page.getByRole(howWeOperate.role, { name: howWeOperate.name }).click();
+    
+    await expect(page).toHaveURL(data.urls.howWeOperate);
+    await page.waitForTimeout(1500);
+    //await page.getByRole(data.locators.joinCommunityBtn.role, { name: data.locators.joinCommunityBtn.name }).click();
+    await page.getByRole(joinCommunityBtn.role, { name: joinCommunityBtn.name }).click();
+    await expect(page).toHaveURL(data.urls.contact);
+    await page.waitForTimeout(1500);
+  });
+
+  test('Our Collaborators -> Contact', async ({ page }) => {
+
+    await openVolunteerMenu(page);
+
+    await page.getByRole(collaborators.role, { name: collaborators.name }).click();
+    await expect(page).toHaveURL(data.urls.collaborators);
+    await page.waitForTimeout(1500);
+
+    await page.getByRole(joinCommunityLink.role, { name: joinCommunityLink.name }).click();
+    await expect(page).toHaveURL(data.urls.contact);
+    await page.waitForTimeout(1500);
+  });
+
+  test('Collaborators -> Volunteer Match opens new tab', async ({ page }) => {
+
+    await openVolunteerMenu(page);
+
+    await page.getByRole(collaborators.role, { name: collaborators.name }).click();
+
+    const newPagePromise = page.context().waitForEvent('page');
+    await page.getByRole(volunteerMatch.role, { name: volunteerMatch.name }).click();
+    const newPage = await newPagePromise;
+
+    await newPage.waitForLoadState();
+    await expect(newPage).toHaveURL(data.urls.volunteerMatch);
+    await page.waitForTimeout(1500);
+    await newPage.close();
+  });
+
 });
+