chore(ui): improve reliability of playwright test in workflow

defenseunicorns · Aug 5, 2024 · 29703cb · 29703cb
1 parent 557b729
commit 29703cb
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 7 deletions.
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.svelte b/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.svelte
@@ -125,6 +125,7 @@
 <div class="w-3/4 bg-gray-50 p-3 dark:bg-gray-900">
   <Heading tag="h3" class="mb-4">API Keys</Heading>
   <TableSearch
+    data-testid="api-keys-table"
     placeholder="Search"
     hoverable={true}
     bind:inputValue={searchTerm}

diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+page.svelte b/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+page.svelte
@@ -205,6 +205,7 @@
   <Heading tag="h3" class="mb-4">File Management</Heading>
   <form method="POST" enctype="multipart/form-data" use:enhance>
     <TableSearch
+      data-testid="file-management-table"
       placeholder="Search"
       hoverable={true}
       bind:inputValue={searchTerm}

diff --git a/src/leapfrogai_ui/tests/api-keys.test.ts b/src/leapfrogai_ui/tests/api-keys.test.ts
@@ -22,7 +22,7 @@ test('it can create and delete an API key', async ({ page }) => {
   await page.getByRole('button', { name: 'Close', exact: true }).click({ force: true });
   await expect(page.getByText('Save secret key')).not.toBeVisible();
 
-  const row = await getTableRow(page, keyName);
+  const row = await getTableRow(page, keyName, 'api-keys-table');
   await row.getByRole('checkbox').check();
   const deleteBtn = page.getByRole('button', { name: 'delete' });
   await deleteBtn.click();

diff --git a/src/leapfrogai_ui/tests/file-management.test.ts b/src/leapfrogai_ui/tests/file-management.test.ts
@@ -103,8 +103,8 @@ test('confirms any affected assistants then deletes multiple files', async ({
   await expect(page.getByText(`${filename2} imported successfully`)).toBeVisible();
   await expect(page.getByText(`${filename2} imported successfully`)).not.toBeVisible();
 
-  const row1 = await getTableRow(page, filename1);
-  const row2 = await getTableRow(page, filename2);
+  const row1 = await getTableRow(page, filename1, 'file-management-table');
+  const row2 = await getTableRow(page, filename2, 'file-management-table');
   expect(row1).not.toBeNull();
   expect(row2).not.toBeNull();
 
@@ -131,7 +131,7 @@ test('it cancels the delete confirmation modal', async ({ page, openAIClient })
   await expect(page.getByText(`${filename} imported successfully`)).toBeVisible();
   await expect(page.getByText(`${filename} imported successfully`)).not.toBeVisible(); // wait for upload to finish
 
-  const row = await getTableRow(page, filename);
+  const row = await getTableRow(page, filename, 'file-management-table');
   await row.getByRole('checkbox').check();
 
   await initiateDeletion(page, filename);
@@ -169,7 +169,7 @@ test('shows an error toast when there is an error deleting a file', async ({
   await expect(page.getByText(`${filename} imported successfully`)).toBeVisible();
   await expect(page.getByText(`${filename} imported successfully`)).not.toBeVisible(); // wait for upload to finish
 
-  const row = await getTableRow(page, filename);
+  const row = await getTableRow(page, filename, 'file-management-table');
   await row.getByRole('checkbox').check();
 
   await initiateDeletion(page, filename);

diff --git a/src/leapfrogai_ui/tests/helpers/fileHelpers.ts b/src/leapfrogai_ui/tests/helpers/fileHelpers.ts
@@ -191,7 +191,7 @@ export const testFileUpload = async (filename: string, page: Page, openAIClient:
   await loadFileManagementPage(page);
   await uploadFile(page, filename);
 
-  const row = await getTableRow(page, filename);
+  const row = await getTableRow(page, filename, 'file-management-table');
   expect(row).not.toBeNull();
 
   const uploadingFileIcon = row!.getByTestId('uploading-file-spinner');

diff --git a/src/leapfrogai_ui/tests/helpers/helpers.ts b/src/leapfrogai_ui/tests/helpers/helpers.ts
@@ -35,7 +35,10 @@ export const loadApiKeyPage = async (page: Page) => {
   await page.waitForURL('/chat/api-keys');
   await expect(page).toHaveTitle('LeapfrogAI - API Keys');
 };
-export const getTableRow = async (page: Page, textToSearchWith: string) => {
+export const getTableRow = async (page: Page, textToSearchWith: string, tableTestId = '') => {
+  if (tableTestId) {
+    await expect(page.getByTestId(tableTestId).getByText(textToSearchWith)).toBeVisible();
+  }
   const rows = page.locator('table tr');
   let targetRow;
   for (let i = 0; i < (await rows.count()); i++) {