(test) Add the playwright video tracing feature

e2e/pages/form-builder-page.ts

@@ -134,6 +134,7 @@ export class FormBuilderPage {
     await this.formNameInput().fill(formName);
     await this.formVersionInput().click();
     await this.formVersionInput().fill("1.0");
+    await this.formDescriptionInput().fill("This is a test form");
     await this.formEncounterType().selectOption("Admission");
     await this.formSaveButton().click();
   }

e2e/specs/create-form-using-custom-schema.spec.ts

@@ -18,8 +18,9 @@ test("Create a form using a custom JSON schema", async ({ page }) => {
   });
 
   await test.step("Then I paste in a custom JSON schema into the schema editor and click the `Render Changes` button", async () => {
-    await formBuilderPage.schemaInput().fill(JSON.stringify(customSchema));
-    // Inputs the custom schema and render changes
+    await formBuilderPage
+      .schemaInput()
+      .fill(JSON.stringify(customSchema, null, 2));
     await formBuilderPage.renderChangesButton().click();
   });
 

e2e/specs/edit-existing-form.spec.ts

@@ -28,7 +28,10 @@ test("Editing an existing form", async ({ page }) => {
   });
 
   await test.step("And I click the `Edit` button on the form I need to edit", async () => {
-    await page.getByRole('row', { name: form.name }).getByLabel('Edit Schema').click();
+    await page
+      .getByRole("row", { name: form.name })
+      .getByLabel("Edit Schema")
+      .click();
   });
 
   await test.step("Then I click the `Save Form` button then the `Update existing version` button, and finally the `Save` button", async () => {

e2e/specs/interactive-builder.spec.ts

@@ -18,14 +18,13 @@ test("Create a schema using the interactive builder", async ({ page }) => {
 
   await test.step("Then I should see the new schema in the schema editor and a success notification", async () => {
     await expect(page.getByText(/new question created/i)).toBeVisible();
-    await expect(
-      page
-        .getByRole("tabpanel", { name: "Schema Editor" })
-        .locator("div")
-        .filter({
-          hasText: '{ "name": "Covid-19 Screening"',
-        })
-        .nth(2)
-    ).toBeVisible();
+    await page
+      .locator("#schemaEditor div")
+      .filter({
+        hasText:
+          '{ "name": "Covid-19 Screening", "pages": [ { "label": "Screening", "sections": [',
+      })
+      .nth(1)
+      .click();
   });
 });

e2e/support/custom-schema.json

@@ -1,5 +1,5 @@
 {
-  "encounterType": "",
+  "encounterType": "e22e39fd-7db2-45e7-80f1-60fa0d5a4378",
   "name": "UI Select Form Test",
   "pages": [
     {
@@ -25,5 +25,7 @@
   ],
   "processor": "EncounterFormProcessor",
   "referencedForms": [],
-  "uuid": "xxx"
+  "uuid": "xxx",
+  "version": "1",
+  "description": "This is test description"
 }

playwright.config.ts

@@ -10,16 +10,18 @@ const config: PlaywrightTestConfig = {
     timeout: 20 * 1000,
   },
   fullyParallel: true,
+  outputDir: "../test-results/results",
   forbidOnly: !!process.env.CI,
   retries: 0,
   reporter: process.env.CI
     ? [["junit", { outputFile: "results.xml" }], ["html"]]
-    : [["line"]],
+    : [["html", { outputFolder: "../test-results/report" }]],
   globalSetup: require.resolve("./e2e/core/global-setup"),
   use: {
     baseURL: `${process.env.E2E_BASE_URL}/spa/`,
     locale: "en-US",
     storageState: "e2e/storageState.json",
+    video: "retain-on-failure",
   },
   projects: [
     {