DO NOT MERGE Playwright sanity test automation

kokoro/gcp_ubuntu_docker/kokoro_build.sh

@@ -48,7 +48,7 @@ jupyter server extension enable dataproc_jupyter_plugin
 cd ./ui-tests
 jlpm install
 jlpm playwright install
-PLAYWRIGHT_JUNIT_OUTPUT_NAME=test-results-latest/sponge_log.xml jlpm playwright test --reporter=junit --output="test-results-latest"
+PLAYWRIGHT_JUNIT_OUTPUT_NAME=test-results-latest/sponge_log.xml TEST_TAG=Sanity jlpm playwright test --reporter=junit --output="test-results-latest"
 deactivate
 
 # Test 3.6.6

src/sessions/sessionDetails.tsx

@@ -467,7 +467,7 @@ function SessionDetails({
                           </div>
                         </div>
                         <div className="row-details" key={DATAPROC_CLUSTER_KEY}>
-                          <div className="batch-details-label-level-three">
+                          <div className="batch-details-label-level-three session-details-label-width">
                             {DATAPROC_CLUSTER_LABEL}
                           </div>
                           <div className="session-env-details-value">

src/sessions/sessionTemplate.tsx

@@ -37,7 +37,7 @@ const [detailedSessionView,setDetailedSessionView] = useState(true);
   useEffect(() => {
   });
   return (
-    <div>
+    <div className="session-template-container">
      {detailedSessionView && (
         <SessionDetails
           sessionSelected={sessionId}

style/sessionDetails.css

@@ -75,3 +75,10 @@
   padding-left: 15px;
   border-bottom: 1px solid var(--jp-layout-color3);
 }
+.session-template-container {
+  height: 100%;
+  overflow: auto;
+}
+.session-details-label-width {
+  width: 33%;
+}

ui-tests/playwright.config.js

@@ -40,5 +40,7 @@ module.exports = {
     trace: 'on-first-retry',
     // Record video only when retrying a test for the first time.
     video: 'on-first-retry'
-  }
+  },
+  // Add support for tags using TEST_TAG environment variable
+  grep: process.env.TEST_TAG ? new RegExp(process.env.TEST_TAG, 'i') : undefined,
 };

ui-tests/tests/bigquery_dataset_explorer.spec.ts

@@ -17,41 +17,122 @@
 
 import { test, expect, galata } from '@jupyterlab/galata';
 
-test('bigquery-dataset-explorer', async ({ page, request }) => {
-  const issues = await page.request.get(
-    'http://localhost:8888/dataproc-plugin/settings'
-  );
-  expect(issues.ok()).toBeTruthy();
-  const response: any = await issues.json();
-  expect(response.enable_bigquery_integration).toBe(true);
-
-  const tabExists = await page.isVisible(
-    'role=tab[name="Dataset Explorer - BigQuery"]'
-  );
-
-  if (tabExists) {
+test.describe('bigquery-dataset-explorer', () => {
+  test('Dataset Explorer', async ({ page, request }) => {
+    // Fetch Dataproc plugin settings
+    const issues = await page.request.get('http://localhost:8888/dataproc-plugin/settings');
+    expect(issues.ok()).toBeTruthy();
+
+    // Parse response and check BigQuery integration is enabled
+    const response = await issues.json();
+    expect(response.enable_bigquery_integration).toBe(true);
+
+    // Check if the "Dataset Explorer - BigQuery" tab is visible
+    const tabExists = await page.isVisible('role=tab[name="Dataset Explorer - BigQuery"]');
+
+    if (tabExists) {
+      // Click on the "Dataset Explorer - BigQuery" tab
+      await page.getByRole('tab', { name: 'Dataset Explorer - BigQuery' }).click();
+
+      // Expand and navigate through the dataset tree
+      await page.waitForSelector('div[role="treeitem"].caret-icon.down');
+      await page.locator('div[role="treeitem"].caret-icon.down').nth(1).click();
+      await page.getByTestId('loader').waitFor({ state: "detached" });
+      await page.locator('div[role="treeitem"].caret-icon.down').nth(1).click();
+      await page.getByTestId('loader').waitFor({ state: "detached" });
+      await page.locator('div[role="treeitem"][aria-level="2"]').first().click();
+
+      // Wait for the dataset details to load
+      await page.getByText('Loading dataset details').waitFor({ state: "hidden" });
+
+      // Check dataset details are visible
+      await expect(page.getByText('Dataset info', { exact: true })).toBeVisible();
+      const datasetRowHeaders = [
+        'Dataset ID', 'Created', 'Default table expiration',
+        'Last modified', 'Data location', 'Description', 'Default collation',
+        'Default rounding mode', 'Time travel window', 'Storage billing model', 'Case insensitive'
+      ];
+      for (const header of datasetRowHeaders) {
+        await expect(page.getByRole('cell', { name: header, exact: true })).toBeVisible();
+      }
+
+      // Click on the first table
+      await page.locator('div[role="treeitem"][aria-level="3"]').first().click();
+
+      // Wait for the table details to load
+      await page.getByText('Loading table details').waitFor({ state: "hidden" });
+
+      // Check table details are visible
+      await expect(page.getByText('Table info')).toBeVisible();
+      const tableHeaders = [
+        'Table ID', 'Created', 'Last modified', 'Table expiration',
+        'Data location', 'Default collation', 'Default rounding mode', 'Description', 'Case insensitive'
+      ];
+      for (const header of tableHeaders) {
+        await expect(page.getByRole('cell', { name: header, exact: true })).toBeVisible();
+      }
+
+      // Click on the Schema tab and check all schema fields are visible
+      await page.getByText('Schema', { exact: true }).click();
+      await expect(page.getByText('Schema').nth(2)).toBeVisible();
+      const schemaHeaders = [
+        'Field name', 'Type', 'Mode', 'Key', 'Collation', 'Default Value',
+        'Policy Tags', 'Data Policies', 'Description'
+      ];
+      for (const header of schemaHeaders) {
+        await expect(page.getByRole('columnheader', { name: header, exact: true })).toBeVisible();
+      }
+
+      // Click on the Preview tab and check if data is present
+      await page.getByText('Preview', { exact: true }).click();
+
+      // Wait for the preview data to load
+      await page.getByText('Loading Preview Data').waitFor({ state: "hidden" });
+
+      // Check if data is present in the preview table
+      const dataExists = await page.locator('table.clusters-list-table').isVisible();
+      if (dataExists) {
+        const rowCount = await page.locator('table.clusters-list-table tr').count();
+        expect(rowCount).toBeGreaterThan(0);
+      } else {
+        await expect(page.getByText('No rows to display')).toBeVisible();
+      }
+
+    } else {
+      // If the tab doesn't exist, verify BigQuery integration is disabled
+      expect(response.enable_bigquery_integration).toBe(false);
+    }
+  });
+
+  test('Can verify search field and refresh button', async ({ page, request }) => {
+    // Fetch Dataproc plugin settings
+    const issues = await page.request.get('http://localhost:8888/dataproc-plugin/settings');
+    expect(issues.ok()).toBeTruthy();
+
+    // Parse response and check BigQuery integration is enabled
+    const response = await issues.json();
     expect(response.enable_bigquery_integration).toBe(true);
-    await page
-      .getByRole('tab', { name: 'Dataset Explorer - BigQuery' })
-      .click();
-
-    // Wait for the Dataset projects to populate.
-    await page.waitForSelector('div[role="treeitem"][aria-level="1"]');
-    await page.waitForSelector('div[role="treeitem"].caret-icon.down');
-
-    // Expand the first dataset project. This should always be the `bigquery-public-data` one.
-    await page.locator('div[role="treeitem"].caret-icon.down').nth(0).click();
-
-    // Wait for the first dataset to be displayed, and then expand it.
-    await page.waitForSelector('div[role="treeitem"][aria-level="2"]');
-    await page.waitForSelector('div[role="treeitem"].caret-icon.down');
-    await page.locator('div[role="treeitem"].caret-icon.down').nth(0).click();
-
-    // Click on the first table displayed.
-    await page.locator('div[role="treeitem"][aria-level="3"]').first().click();
-    await page.getByText('Schema', { exact: true }).click();
-    await page.getByText('Preview', { exact: true }).click();
-  } else {
-    expect(response.enable_bigquery_integration).toBe(false);
-  }
-});
+
+    // Check if the "Dataset Explorer - BigQuery" tab is visible
+    const tabExists = await page.isVisible('role=tab[name="Dataset Explorer - BigQuery"]');
+
+    if (tabExists) {
+      // Click on the "Dataset Explorer - BigQuery" tab
+      await page.getByRole('tab', { name: 'Dataset Explorer - BigQuery' }).click();
+
+      await page.waitForSelector('div[role="treeitem"].caret-icon.down');
+
+      await expect(page.locator('[role="treeitem"][title="austin_311"]')).not.toBeVisible();
+
+      await page.getByPlaceholder('Enter your keyword to search').first().click();
+      await page.getByPlaceholder('Enter your keyword to search').first().fill('austin_311');
+
+      await page.locator('[aria-label="Loading Spinner"]').waitFor({ state: "detached" });
+
+      await page.waitForTimeout(5000);
+
+      await expect(page.locator('[role="treeitem"][title="austin_311"]')).toBeVisible();
+
+    }
+  });
+});