Add macos UI tests

.github/workflows/build.yml

@@ -88,8 +88,8 @@ jobs:
           jupyter labextension list 2>&1 | grep -ie "@jupyterlab/scheduler.*OK"
           python -m jupyterlab.browser_check
 
-  integration-tests:
-    name: Integration tests
+  integration-tests-ubuntu:
+    name: Integration tests ubuntu
     needs: build
     runs-on: ubuntu-latest
 
@@ -111,7 +111,7 @@ jobs:
       - name: Install the extension
         run: |
           set -eux
-          python -m pip install "jupyterlab~=4.0" jupyter_scheduler*.whl
+          python -m pip install "jupyterlab==4.0.3" jupyter_scheduler*.whl
 
       - name: Install dependencies
         working-directory: ui-tests
@@ -138,7 +138,63 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v2
         with:
-          name: jupyter_scheduler-playwright-tests
+          name: jupyter_scheduler-playwright-tests-ubuntu
+          path: |
+            ui-tests/test-results
+            ui-tests/playwright-report
+
+  integration-tests-macos:
+    name: Integration tests macOS
+    needs: build
+    runs-on: macos-latest
+
+    env:
+      PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/pw-browsers
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Base Setup
+        uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
+
+      - name: Download extension package
+        uses: actions/download-artifact@v2
+        with:
+          name: extension-artifacts
+
+      - name: Install the extension
+        run: |
+          set -eux
+          python -m pip install "jupyterlab==4.0.3" jupyter_scheduler*.whl
+
+      - name: Install dependencies
+        working-directory: ui-tests
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+        run: jlpm install
+
+      - name: Set up browser cache
+        uses: actions/cache@v2
+        with:
+          path: |
+            ${{ github.workspace }}/pw-browsers
+          key: ${{ runner.os }}-${{ hashFiles('ui-tests/yarn.lock') }}
+
+      - name: Install browser
+        run: jlpm playwright install chromium
+        working-directory: ui-tests
+
+      - name: Execute integration tests
+        working-directory: ui-tests
+        run: |
+          jlpm playwright test
+
+      - name: Upload Playwright Test report
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: jupyter_scheduler-playwright-tests-macos
           path: |
             ui-tests/test-results
             ui-tests/playwright-report

.github/workflows/update-integration-tests.yml

@@ -38,7 +38,7 @@ jobs:
           python_version: '3.11'
 
       - name: Install dependencies
-        run: python -m pip install -U jupyterlab~=4.0
+        run: python -m pip install -U jupyterlab=4.0.3
 
       - name: Install extension
         run: |

ui-tests/helpers/SchedulerHelper.ts

@@ -1,11 +1,15 @@
 import { expect, IJupyterLabPageFixture } from '@jupyterlab/galata';
 import type { Locator, TestInfo } from '@playwright/test';
 
-export enum SELECTORS {
+enum SELECTORS {
   // tbutton = toolbar button
   CREATE_JOB_TBUTTON = 'button.jp-ToolbarButtonComponent[data-command="scheduling:create-from-notebook"][title="Create a notebook job"]',
   LAUNCHER_CARD = 'div.jp-LauncherCard[title="Notebook Jobs"]',
-  LIST_VIEW_TIMES = 'td.MuiTableCell-body:has-text(" AM"), td.MuiTableCell-body:has-text(" PM")'
+  LIST_VIEW_TIMES = 'td.MuiTableCell-body:has-text(" AM"), td.MuiTableCell-body:has-text(" PM")',
+  NOTEBOOK_TOOLBAR = '.jp-NotebookPanel-toolbar[aria-label="notebook actions"]',
+  ENABLE_DEBUGGER_TBUTTON = '.jp-DebuggerBugButton',
+  KERNEL_NAME_TBUTTON = '.jp-KernelName',
+  EXECUTION_INDICATOR_TBUTTON = '.jp-Notebook-ExecutionIndicator'
 }
 
 type SnapshotOptions = {
@@ -23,6 +27,11 @@
    * https://playwright.dev/docs/api/class-page#page-screenshot-option-mask.
    */
   mask?: Locator[];
+  /**
+   * An acceptable amount of pixels that could be different. See
+   * https://playwright.dev/docs/api/class-snapshotassertions#snapshot-assertions-to-match-snapshot-1-option-max-diff-pixels
+   */
+  maxDiffPixels?: number;
 };
 
 const DEFAULT_SNAPSHOT_OPTS: SnapshotOptions = {
@@ -50,16 +59,47 @@
   ) {}
 
   /**
-   * JupyterLab launcher "Notebook Jobs" card selector
+   * JupyterLab launcher "Notebook Jobs" card locator
    */
   get launcherCard() {
     return this.page.locator(SELECTORS.LAUNCHER_CARD);
   }
 
+  /**
+   *  Locates notebook toolbar
+   */
+  get notebookToolbar() {
+    return this.page.locator(SELECTORS.NOTEBOOK_TOOLBAR);
+  }
+
+  /**
+   *  Locates "Create a notebook job" button in notebook toolbar
+   */
   get createJobTbutton() {
     return this.page.locator(SELECTORS.CREATE_JOB_TBUTTON);
   }
 
+  /**
+   *  Locates "Enable debugger" icon in notebook toolbar
+   */
+  get enableDebuggerTbutton() {
+    return this.page.locator(SELECTORS.ENABLE_DEBUGGER_TBUTTON);
+  }
+
+  /**
+   *  Locates kernel name button in notebook toolbar
+   */
+  get kernelNameTbutton() {
+    return this.page.locator(SELECTORS.KERNEL_NAME_TBUTTON);
+  }
+
+  /**
+   *  Locates execution indicator icon in notebook toolbar
+   */
+  get executionIndicatorTbutton() {
+    return this.page.locator(SELECTORS.EXECUTION_INDICATOR_TBUTTON);
+  }
+
   /**
    * Locates the previously created notebook's listing in the filebrowser.
    */
@@ -79,7 +119,7 @@
    * Locates the column of timestamps in the list view. Used to mask this column
    * during snapshot tests.
    */
-  get timestampLocator() {
+  get timestamp() {
     return this.page.locator(SELECTORS.LIST_VIEW_TIMES);
   }
 
@@ -178,7 +218,13 @@
     const screenshotArgs = {
       mask: opts.mask
     };
-    expect(await target.screenshot(screenshotArgs)).toMatchSnapshot(filename);
+    const snapshotArgs = {
+      maxDiffPixels: opts.maxDiffPixels
+    };
+    expect(await target.screenshot(screenshotArgs)).toMatchSnapshot(
+      filename,
+      snapshotArgs
+    );
   }
 
   protected async _waitForCreateJobLoaded() {

ui-tests/tests/jupyter_scheduler.spec.ts

@@ -3,7 +3,7 @@ import { SchedulerHelper } from '../helpers/SchedulerHelper';
 
 enum FILENAMES {
   LAUNCHER = 'launcher.png',
-  NOTEBOOK = 'notebook-view.png',
+  NOTEBOOK_TOOLBAR = 'notebook-toolbar.png',
   FILEBROWSER_MENU = 'filebrowser-menu.png',
   // TODO: resolve this inconsistency in our frontend code. One entry point
   // includes the file extension in the job name, the other does not.
@@ -34,7 +34,14 @@ test.describe('Jupyter Scheduler', () => {
   test('shows notebook toolbar button', async () => {
     await scheduler.createNotebook();
     await expect(scheduler.createJobTbutton).toBeVisible();
-    await scheduler.assertSnapshot(FILENAMES.NOTEBOOK);
+    await scheduler.assertSnapshot(FILENAMES.NOTEBOOK_TOOLBAR, {
+      locator: scheduler.notebookToolbar,
+      mask: [
+        scheduler.enableDebuggerTbutton,
+        scheduler.kernelNameTbutton,
+        scheduler.executionIndicatorTbutton
+      ]
+    });
   });
 
   test('opens create job view from notebook toolbar', async ({ page }) => {
@@ -66,9 +73,9 @@ test.describe('Jupyter Scheduler', () => {
     await scheduler.createNotebook();
     await scheduler.createJobFromFilebrowser();
 
-    const timeStamp = scheduler.timestampLocator;
     await scheduler.assertSnapshot(FILENAMES.LIST_VIEW, {
-      mask: [timeStamp]
+      mask: [scheduler.timestamp],
+      maxDiffPixels: 420
     });
   });