(e2e) More e2e refactors (#1487)

e2e/pages/allergies-page.ts

@@ -3,8 +3,7 @@ import { Page } from '@playwright/test';
 export class PatientAllergiesPage {
   constructor(readonly page: Page) {}
 
-  // TODO: Switch to getByRole locators using the provided aria-labels
-  readonly allergyTable = () => this.page.getByTestId('allergy-table');
+  readonly allergiesTable = () => this.page.getByRole('table', { name: /allergies summary/i });
 
   async goTo(uuid: string) {
     await this.page.goto('/openmrs/spa/patient/' + uuid + '/chart/Allergies');

e2e/pages/conditions-page.ts

@@ -3,7 +3,7 @@ import { Page } from '@playwright/test';
 export class ConditionsPage {
   constructor(readonly page: Page) {}
 
-  readonly conditionsTable = () => this.page.locator('tbody');
+  readonly conditionsTable = () => this.page.getByRole('table', { name: /conditions summary/i });
 
   async goTo(uuid: string) {
     await this.page.goto(`/openmrs/spa/patient/${uuid}/chart/Conditions`);

e2e/pages/program-page.ts

@@ -3,9 +3,8 @@ import { Page } from '@playwright/test';
 export class ProgramsPage {
   constructor(readonly page: Page) {}
 
-  // TODO: Switch to getByRole locators using the provided aria-labels
-  readonly programsTable = () => this.page.getByTestId('program-table');
-  readonly editButton = () => this.page.getByTestId('edit-program-button');
+  readonly programsTable = () => this.page.getByRole('table', { name: /program enrollments/i });
+  readonly editProgramButton = () => this.page.getByRole('button', { name: /edit program/i });
 
   async goTo(patientUuid: string) {
     await this.page.goto(`patient/${patientUuid}/chart/Programs`);

e2e/pages/vitals-and-biometrics-page.ts

@@ -3,9 +3,8 @@ import { Page } from '@playwright/test';
 export class BiometricsAndVitalsPage {
   constructor(readonly page: Page) {}
 
-  // TODO: Switch to getByRole locators using the provided aria-labels
-  readonly vitalsTable = () => this.page.getByTestId('vitals-table');
-  readonly biometricsTable = () => this.page.getByTestId('biometrics-table');
+  readonly biometricsTable = () => this.page.getByRole('table', { name: /biometrics/i });
+  readonly vitalsTable = () => this.page.getByRole('table', { name: /vitals/i });
 
   async goTo(uuid: string) {
     await this.page.goto('/openmrs/spa/patient/' + uuid + '/chart/Vitals%20%26%20Biometrics');

e2e/specs/biometrics.spec.ts

@@ -1,8 +1,8 @@
-import { test } from '../core';
-import { BiometricsAndVitalsPage } from '../pages';
 import { expect } from '@playwright/test';
-import { generateRandomPatient, deletePatient, Patient, startVisit, endVisit } from '../commands';
 import { Visit } from '@openmrs/esm-framework';
+import { generateRandomPatient, deletePatient, Patient, startVisit, endVisit } from '../commands';
+import { test } from '../core';
+import { BiometricsAndVitalsPage } from '../pages';
 
 let patient: Patient;
 let visit: Visit;
@@ -25,7 +25,7 @@ test('Record biometrics', async ({ page, api }) => {
 
   await test.step('And then I fill the form', async () => {
     await biometricsPage.page.getByRole('spinbutton', { name: /height/i }).fill('170');
-    await biometricsPage.page.getByRole('spinbutton', { name: /Weight/i }).fill('65');
+    await biometricsPage.page.getByRole('spinbutton', { name: /weight/i }).fill('65');
     await expect(biometricsPage.page.getByRole('spinbutton', { name: /bmi/i })).toHaveValue('22.5');
     await biometricsPage.page.getByRole('spinbutton', { name: /muac/i }).fill('25');
   });
@@ -40,12 +40,12 @@ test('Record biometrics', async ({ page, api }) => {
 
   await test.step('And I should see the newly recorded biometrics on the page', async () => {
     const headerRow = biometricsPage.biometricsTable().locator('thead > tr');
+    const dataRow = biometricsPage.biometricsTable().locator('tbody > tr');
+
     await expect(headerRow).toContainText(/weight/i);
     await expect(headerRow).toContainText(/height/i);
     await expect(headerRow).toContainText(/bmi/i);
     await expect(headerRow).toContainText(/muac/i);
-
-    const dataRow = biometricsPage.biometricsTable().locator('tbody > tr');
     await expect(dataRow).toContainText('65');
     await expect(dataRow).toContainText('170');
     await expect(dataRow).toContainText('22.5');

e2e/specs/conditions.spec.ts

@@ -1,7 +1,7 @@
-import { test } from '../core';
-import { ConditionsPage } from '../pages';
 import { expect } from '@playwright/test';
 import { generateRandomPatient, deletePatient, Patient } from '../commands';
+import { test } from '../core';
+import { ConditionsPage } from '../pages';
 
 let patient: Patient;
 
@@ -11,9 +11,8 @@ test.beforeEach(async ({ api }) => {
 
 test('Record, edit and delete a condition', async ({ page, api }) => {
   const conditionsPage = new ConditionsPage(page);
-  const table = conditionsPage.page.getByRole('table', { name: /conditions summary/i });
-  const headerRow = table.locator('thead > tr');
-  const dataRow = table.locator('tbody > tr');
+  const headerRow = conditionsPage.conditionsTable().locator('thead > tr');
+  const dataRow = conditionsPage.conditionsTable().locator('tbody > tr');
 
   await test.step('When I go to the Conditions page', async () => {
     await conditionsPage.goTo(patient.uuid);

e2e/specs/drug-allergies.spec.ts

@@ -1,7 +1,7 @@
-import { test } from '../core';
-import { PatientAllergiesPage } from '../pages';
 import { expect } from '@playwright/test';
 import { generateRandomPatient, deletePatient, Patient } from '../commands';
+import { test } from '../core';
+import { PatientAllergiesPage } from '../pages';
 
 let patient: Patient;
 
@@ -11,19 +11,21 @@ test.beforeEach(async ({ api }) => {
 
 test('Record an allergy to a drug', async ({ page, api }) => {
   const allergiesPage = new PatientAllergiesPage(page);
+  const headerRow = allergiesPage.allergiesTable().locator('thead > tr');
+  const dataRow = allergiesPage.allergiesTable().locator('tbody > tr');
 
   await test.step('When I visit the Allergies page', async () => {
     await allergiesPage.goTo(patient.uuid);
   });
 
   await test.step('And I click the `Record allergy intolerance` link to launch the form', async () => {
-    await allergiesPage.page.getByText('Record allergy').click();
+    await allergiesPage.page.getByText(/record allergy intolerance/i).click();
   });
 
   await test.step('And I record an allergy to a drug', async () => {
-    await allergiesPage.page.getByText('ACE inhibitors').click();
-    await allergiesPage.page.getByText('Mental status change').click();
-    await allergiesPage.page.getByText('Mild').click();
+    await allergiesPage.page.getByText(/ace inhibitors/i).click();
+    await allergiesPage.page.getByText(/mental status change/i).click();
+    await allergiesPage.page.getByText(/mild/i).click();
     await allergiesPage.page.locator('#comments').fill('Test comment');
   });
 
@@ -36,15 +38,14 @@ test('Record an allergy to a drug', async ({ page, api }) => {
   });
 
   await test.step('And I should see the newly recorded drug allergen in the list', async () => {
-    const rows = allergiesPage.allergyTable().locator('tr');
-    const allergenCell = rows.locator('td:first-child');
-    const severityCell = rows.locator('td:nth-child(2)');
-    const reactionCell = rows.locator('td:nth-child(3)');
-    const commentCell = rows.locator('td:nth-child(4)');
-    await expect(allergenCell).toHaveText('ACE inhibitors');
-    await expect(reactionCell).toHaveText('Mental status change');
-    await expect(severityCell).toHaveText('low');
-    await expect(commentCell).toHaveText('Test comment');
+    await expect(headerRow).toContainText(/allergen/i);
+    await expect(headerRow).toContainText(/severity/i);
+    await expect(headerRow).toContainText(/reaction/i);
+    await expect(headerRow).toContainText(/onset date and comments/i);
+    await expect(dataRow).toContainText(/ace inhibitors/i);
+    await expect(dataRow).toContainText(/low/i);
+    await expect(dataRow).toContainText(/mental status change/i);
+    await expect(dataRow).toContainText(/test comment/i);
   });
 });
 

e2e/specs/environmental-allergies.spec.ts

@@ -1,7 +1,7 @@
-import { test } from '../core';
-import { PatientAllergiesPage } from '../pages';
 import { expect } from '@playwright/test';
 import { generateRandomPatient, deletePatient, Patient } from '../commands';
+import { test } from '../core';
+import { PatientAllergiesPage } from '../pages';
 
 let patient: Patient;
 
@@ -11,6 +11,8 @@ test.beforeEach(async ({ api }) => {
 
 test('Record an allergy to an environmental factors', async ({ page, api }) => {
   const allergiesPage = new PatientAllergiesPage(page);
+  const headerRow = allergiesPage.allergiesTable().locator('thead > tr');
+  const dataRow = allergiesPage.allergiesTable().locator('tbody > tr');
 
   await test.step('When I visit the Allergies page', async () => {
     await allergiesPage.goTo(patient.uuid);
@@ -22,9 +24,9 @@ test('Record an allergy to an environmental factors', async ({ page, api }) => {
 
   await test.step('And I record an allergy to an environmental factor', async () => {
     await allergiesPage.page.getByRole('tab', { name: /environmental/i }).click();
-    await allergiesPage.page.getByText('Dust').click();
-    await allergiesPage.page.getByText('Mental status change').click();
-    await allergiesPage.page.getByText('Mild').click();
+    await allergiesPage.page.getByText(/dust/i).click();
+    await allergiesPage.page.getByText(/mental status change/i).click();
+    await allergiesPage.page.getByText(/mild/i).click();
     await allergiesPage.page.locator('#comments').fill('Test comment');
   });
 
@@ -37,15 +39,14 @@ test('Record an allergy to an environmental factors', async ({ page, api }) => {
   });
 
   await test.step('And I should see the newly recorded environmental allergy in the list', async () => {
-    const rows = allergiesPage.allergyTable().locator('tr');
-    const allergenCell = rows.locator('td:first-child');
-    const severityCell = rows.locator('td:nth-child(2)');
-    const reactionCell = rows.locator('td:nth-child(3)');
-    const commentCell = rows.locator('td:nth-child(4)');
-    await expect(allergenCell).toHaveText('Dust');
-    await expect(reactionCell).toHaveText('Mental status change');
-    await expect(severityCell).toHaveText('low');
-    await expect(commentCell).toHaveText('Test comment');
+    await expect(headerRow).toContainText(/allergen/i);
+    await expect(headerRow).toContainText(/severity/i);
+    await expect(headerRow).toContainText(/reaction/i);
+    await expect(headerRow).toContainText(/onset date and comments/i);
+    await expect(dataRow).toContainText(/dust/i);
+    await expect(dataRow).toContainText(/low/i);
+    await expect(dataRow).toContainText(/mental status change/i);
+    await expect(dataRow).toContainText(/test comment/i);
   });
 });
 

e2e/specs/food-allergies.spec.ts

@@ -1,7 +1,7 @@
-import { test } from '../core';
-import { PatientAllergiesPage } from '../pages';
 import { expect } from '@playwright/test';
 import { generateRandomPatient, deletePatient, Patient } from '../commands';
+import { test } from '../core';
+import { PatientAllergiesPage } from '../pages';
 
 let patient: Patient;
 
@@ -11,6 +11,8 @@ test.beforeEach(async ({ api }) => {
 
 test('Record an allergy to a food item', async ({ page, api }) => {
   const allergiesPage = new PatientAllergiesPage(page);
+  const headerRow = allergiesPage.allergiesTable().locator('thead > tr');
+  const dataRow = allergiesPage.allergiesTable().locator('tbody > tr');
 
   await test.step('When I visit the Allergies page', async () => {
     await allergiesPage.goTo(patient.uuid);
@@ -22,9 +24,9 @@ test('Record an allergy to a food item', async ({ page, api }) => {
 
   await test.step('And then I record an allergy to a food item', async () => {
     await allergiesPage.page.getByRole('tab', { name: /food/i }).click();
-    await allergiesPage.page.getByText('Eggs').click();
-    await allergiesPage.page.getByText('Mental status change').click();
-    await allergiesPage.page.getByText('Mild').click();
+    await allergiesPage.page.getByText(/eggs/i).click();
+    await allergiesPage.page.getByText(/mental status change/i).click();
+    await allergiesPage.page.getByText(/mild/i).click();
     await allergiesPage.page.locator('#comments').fill('Test comment');
   });
 
@@ -37,15 +39,14 @@ test('Record an allergy to a food item', async ({ page, api }) => {
   });
 
   await test.step('And I should see the newly recorded food allergy in the list', async () => {
-    const rows = await allergiesPage.allergyTable().locator('tr');
-    const allergenCell = rows.locator('td:first-child');
-    const severityCell = rows.locator('td:nth-child(2)');
-    const reactionCell = rows.locator('td:nth-child(3)');
-    const commentCell = rows.locator('td:nth-child(4)');
-    await expect(allergenCell).toHaveText('Eggs');
-    await expect(reactionCell).toHaveText('Mental status change');
-    await expect(severityCell).toHaveText('low');
-    await expect(commentCell).toHaveText('Test comment');
+    await expect(headerRow).toContainText(/allergen/i);
+    await expect(headerRow).toContainText(/severity/i);
+    await expect(headerRow).toContainText(/reaction/i);
+    await expect(headerRow).toContainText(/onset date and comments/i);
+    await expect(dataRow).toContainText(/eggs/i);
+    await expect(dataRow).toContainText(/low/i);
+    await expect(dataRow).toContainText(/mental status change/i);
+    await expect(dataRow).toContainText(/test comment/i);
   });
 });
 

e2e/specs/program-enrollment.spec.ts

@@ -1,7 +1,7 @@
-import { test } from '../core';
-import { ProgramsPage } from '../pages';
 import { expect } from '@playwright/test';
 import { generateRandomPatient, deletePatient, Patient } from '../commands';
+import { test } from '../core';
+import { ProgramsPage } from '../pages';
 
 let patient: Patient;
 
@@ -11,11 +11,8 @@ test.beforeEach(async ({ api }) => {
 
 test('Add and edit a program enrollment', async ({ page, api }) => {
   const programsPage = new ProgramsPage(page);
-  const row = programsPage.programsTable().locator('tr');
-  const programCell = row.locator('td:first-child');
-  const locationCell = row.locator('td:nth-child(2)');
-  const enrollmentDateCell = row.locator('td:nth-child(3)');
-  const completionDateCell = row.locator('td:nth-child(4)');
+  const headerRow = programsPage.programsTable().locator('thead > tr');
+  const dataRow = programsPage.programsTable().locator('tbody > tr');
 
   await test.step('When I visit the Programs page', async () => {
     await programsPage.goTo(patient.uuid);
@@ -42,14 +39,18 @@ test('Add and edit a program enrollment', async ({ page, api }) => {
   });
 
   await test.step('Then I should see newly recorded program enrollment in the list', async () => {
-    await expect(programCell).toHaveText(/hiv care and treatment/i);
-    await expect(enrollmentDateCell.getByText(/04-Jul-2023/i)).toBeVisible();
-    await expect(completionDateCell.getByText(/completed on 05-Jul-2023/i)).toBeVisible();
-    await expect(locationCell).toHaveText(/Outpatient Clinic/);
+    await expect(headerRow).toContainText(/active programs/i);
+    await expect(headerRow).toContainText(/location/i);
+    await expect(headerRow).toContainText(/date enrolled/i);
+    await expect(headerRow).toContainText(/status/i);
+    await expect(dataRow).toContainText(/hiv care and treatment/i);
+    await expect(dataRow).toContainText(/04-Jul-2023/i);
+    await expect(dataRow).toContainText(/completed on 05-Jul-2023/i);
+    await expect(dataRow).toContainText(/outpatient clinic/i);
   });
 
   await test.step('When I click the `Edit` button', async () => {
-    await programsPage.editButton().click();
+    await programsPage.editProgramButton().click();
   });
 
   await test.step('And I edit the program enrollment', async () => {
@@ -68,10 +69,10 @@ test('Add and edit a program enrollment', async ({ page, api }) => {
   });
 
   await test.step('Then I should see the updated program enrollment in the list', async () => {
-    await expect(programCell).toHaveText(/hiv care and treatment/i);
-    await expect(enrollmentDateCell.getByText(/03-Jul-2023/i)).toBeVisible();
-    await expect(completionDateCell.getByText(/04-Jul-2023/i)).toBeVisible();
-    await expect(locationCell).toHaveText(/community outreach/i);
+    await expect(dataRow).toContainText(/hiv care and treatment/i);
+    await expect(dataRow).toContainText(/03-Jul-2023/i);
+    await expect(dataRow).toContainText(/completed on 04-Jul-2023/i);
+    await expect(dataRow).toContainText(/community outreach/i);
   });
 });
 

e2e/specs/vitals.spec.ts

@@ -1,8 +1,8 @@
-import { test } from '../core';
-import { BiometricsAndVitalsPage } from '../pages';
 import { expect } from '@playwright/test';
-import { generateRandomPatient, deletePatient, Patient, startVisit, endVisit } from '../commands';
 import { Visit } from '@openmrs/esm-framework';
+import { test } from '../core';
+import { generateRandomPatient, deletePatient, Patient, startVisit, endVisit } from '../commands';
+import { BiometricsAndVitalsPage } from '../pages';
 
 let patient: Patient;
 let visit: Visit;
@@ -14,6 +14,8 @@ test.beforeEach(async ({ api }) => {
 
 test('Record vital signs', async ({ page, api }) => {
   const vitalsPage = new BiometricsAndVitalsPage(page);
+  const headerRow = vitalsPage.vitalsTable().locator('thead > tr');
+  const dataRow = vitalsPage.vitalsTable().locator('tbody > tr');
 
   await test.step('When I visit the vitals and biometrics page', async () => {
     await vitalsPage.goTo(patient.uuid);
@@ -42,14 +44,11 @@ test('Record vital signs', async ({ page, api }) => {
   });
 
   await test.step('And I should see the newly recorded vital signs on the page', async () => {
-    const headerRow = vitalsPage.vitalsTable().locator('thead > tr');
     await expect(headerRow).toContainText(/temp/i);
     await expect(headerRow).toContainText(/bp/i);
     await expect(headerRow).toContainText(/pulse/i);
     await expect(headerRow).toContainText(/r. rate/i);
     await expect(headerRow).toContainText(/SPO2/i);
-
-    const dataRow = vitalsPage.vitalsTable().locator('tbody > tr');
     await expect(dataRow).toContainText('37');
     await expect(dataRow).toContainText('120 / 100');
     await expect(dataRow).toContainText('65');