diff --git a/e2e/pages/appointments-page.ts b/e2e/pages/appointments-page.ts
new file mode 100644
index 0000000000..a0d380e0c5
--- /dev/null
+++ b/e2e/pages/appointments-page.ts
@@ -0,0 +1,11 @@
+import { type Page } from '@playwright/test';
+
+export class AppointmentsPage {
+  constructor(readonly page: Page) {}
+
+  readonly appointmentsTable = () => this.page.getByTestId('table');
+
+  async goto(uuid: string) {
+    await this.page.goto(`/openmrs/spa/patient/${uuid}/chart/Appointments`);
+  }
+}
diff --git a/e2e/pages/index.ts b/e2e/pages/index.ts
index 45549ac2fa..38d7b198b5 100644
--- a/e2e/pages/index.ts
+++ b/e2e/pages/index.ts
@@ -5,3 +5,4 @@ export * from './medications-page';
 export * from './program-page';
 export * from './vitals-and-biometrics-page';
 export * from './visits-page';
+export * from './appointments-page';
diff --git a/e2e/specs/appointments.spec.ts b/e2e/specs/appointments.spec.ts
new file mode 100644
index 0000000000..0c6b881767
--- /dev/null
+++ b/e2e/specs/appointments.spec.ts
@@ -0,0 +1,122 @@
+import { expect } from '@playwright/test';
+import { generateRandomPatient, deletePatient, type Patient, startVisit, endVisit } from '../commands';
+import { test } from '../core';
+import { AppointmentsPage } from '../pages';
+import { type Visit } from '@openmrs/esm-framework';
+
+let patient: Patient;
+let visit: Visit;
+
+test.beforeEach(async ({ api }) => {
+  patient = await generateRandomPatient(api);
+  visit = await startVisit(api, patient.uuid);
+});
+
+test('Add, edit and cancel an appointment', async ({ page, api }) => {
+  const appointmentsPage = new AppointmentsPage(page);
+
+  await test.step('When I go to the appointment tab in the patient chart', async () => {
+    await appointmentsPage.goto(patient.uuid);
+  });
+
+  await test.step('And I click on the “Add” button', async () => {
+    await page.getByRole('button', { name: 'Add', exact: true }).click();
+  });
+
+  await test.step('And I select Mobile Clinic location', async () => {
+    await page.getByLabel('Select location').selectOption('Mobile Clinic');
+  });
+
+  await test.step('And I select “Outpatient Department” service', async () => {
+    await page.selectOption('select#service', { label: 'Outpatient Department' });
+  });
+
+  await test.step('And I make appointment as “Scheduled”', async () => {
+    await page.getByLabel('Select an appointment type').selectOption('Scheduled');
+  });
+
+  await test.step('And I set date for tomorrow', async () => {
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    await page.fill('input[placeholder="dd/mm/yyyy"]', tomorrow.toLocaleDateString('en-GB'));
+  });
+
+  await test.step('And I set the “Duration” to 60', async () => {
+    await page.getByLabel('Duration (minutes)').fill('60');
+  });
+
+  await test.step('And I add a note', async () => {
+    await page.getByPlaceholder(/Write any additional points here/i).fill('Testing Appointments notes');
+  });
+
+  await test.step('And I click Save button', async () => {
+    await page.getByRole('button', { name: /save and close/i }).click();
+  });
+
+  await test.step('Then I should see a success message', async () => {
+    await expect(page.getByText(/Appointment scheduled/i)).toBeVisible();
+  });
+
+  await test.step('When I click the options kebab menu in the appointment', async () => {
+    await page.getByRole('button', { name: 'Options' }).click();
+  });
+
+  await test.step('And I choose the "Edit" option from the popup menu', async () => {
+    await page.getByRole('menuitem', { name: 'Edit' }).click();
+  });
+
+  await test.step('Then I should see the Edit an appointment workspace', async () => {
+    await expect(page.getByText(/Edit an appointment/i)).toBeVisible();
+  });
+
+  await test.step('When I change to “Inpatient ward” location', async () => {
+    await page.selectOption('select#service', { label: 'General Medicine service' });
+  });
+
+  await test.step('And I change to “General Medicine” Service', async () => {
+    await page.getByLabel('Select a service').selectOption('General Medicine service');
+  });
+
+  await test.step('And I change the date to Today', async () => {
+    const today = new Date();
+    today.setDate(today.getDate());
+    await page.fill('input[placeholder="dd/mm/yyyy"]', today.toLocaleDateString('en-GB'));
+  });
+
+  await test.step('And I set the “Duration” of the appointment”', async () => {
+    await page.getByLabel('Duration (minutes)').fill('80');
+  });
+
+  await test.step('And I change the note', async () => {
+    await page.getByPlaceholder(/Write any additional points here/i).fill('Editing Appointmentments notes');
+  });
+
+  await test.step('And I click Save button', async () => {
+    await page.getByRole('button', { name: /save and close/i }).click();
+  });
+
+  await test.step('Then I should see a success message', async () => {
+    await expect(page.getByText(/Appointment edited/i)).toBeVisible();
+  });
+
+  await test.step('When I click the options kebab menu in the appointment', async () => {
+    await page.getByRole('button', { name: 'Options' }).click();
+  });
+
+  await test.step('And I choose the "Cancel" option ', async () => {
+    await page.getByRole('menuitem', { name: 'Cancel' }).click();
+  });
+
+  await test.step('When I click the "Cancel appointment" button to confirm', async () => {
+    await page.getByRole('button', { name: 'danger Cancel appointment' }).click();
+  });
+
+  await test.step('Then I should see a success message', async () => {
+    await expect(page.getByText(/Appointment cancelled successfully/i)).toBeVisible();
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  await endVisit(api, visit.uuid);
+  await deletePatient(api, patient.uuid);
+});
diff --git a/e2e/specs/program-enrollment.spec.ts b/e2e/specs/program-enrollment.spec.ts
index c66422f7f8..47938ca227 100644
--- a/e2e/specs/program-enrollment.spec.ts
+++ b/e2e/specs/program-enrollment.spec.ts
@@ -56,7 +56,7 @@ test('Add and edit a program enrollment', async ({ page, api }) => {
   await test.step('And I edit the program enrollment', async () => {
     await programsPage.page.locator('#enrollmentDateInput').clear();
     await programsPage.page.locator('#enrollmentDateInput').fill('03/07/2023');
-    await programsPage.page.locator('#completionDateInput').clear()
+    await programsPage.page.locator('#completionDateInput').clear();
     await programsPage.page.locator('#completionDateInput').fill('04/07/2023');
     await programsPage.page.locator('#completionDateInput').press('Tab');
     await programsPage.page.locator('#location').selectOption('1ce1b7d4-c865-4178-82b0-5932e51503d6');