Use jp-WindowedPanel-outer in galata which now functions

as the scroll container (rather than `jp-Notebook` as before)
krassowski · Dec 19, 2023 · 87c0d0a · 87c0d0a
1 parent 31a3b15
commit 87c0d0a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 20 deletions.
diff --git a/galata/src/helpers/notebook.ts b/galata/src/helpers/notebook.ts
@@ -453,21 +453,24 @@ export class NotebookHelper {
     if (!notebook) {
       return -1;
     }
+    const scroller = (await notebook.$(
+      '.jp-WindowedPanel-outer'
+    )) as ElementHandle<HTMLElement>;
 
-    const scrollTop = await notebook.evaluate(node => node.scrollTop);
+    const scrollTop = await scroller.evaluate(node => node.scrollTop);
 
     // Scroll to bottom
     let previousScrollHeight = scrollTop;
     let scrollHeight =
       previousScrollHeight +
-      (await notebook.evaluate(node => node.clientHeight));
+      (await scroller.evaluate(node => node.clientHeight));
     do {
-      await notebook.evaluate((node, scrollTarget) => {
+      await scroller.evaluate((node, scrollTarget) => {
         node.scrollTo({ top: scrollTarget });
       }, scrollHeight);
       await this.page.waitForTimeout(50);
       previousScrollHeight = scrollHeight;
-      scrollHeight = await notebook.evaluate(
+      scrollHeight = await scroller.evaluate(
         node => node.scrollHeight - node.clientHeight
       );
     } while (scrollHeight > previousScrollHeight);
@@ -480,7 +483,7 @@ export class NotebookHelper {
       ) + 1;
 
     // Scroll back to original position
-    await notebook.evaluate((node, scrollTarget) => {
+    await scroller.evaluate((node, scrollTarget) => {
       node.scrollTo({ top: scrollTarget });
     }, scrollTop);
 
@@ -498,6 +501,12 @@ export class NotebookHelper {
     if (!notebook) {
       return null;
     }
+    const scroller = (await notebook.$(
+      '.jp-WindowedPanel-outer'
+    )) as ElementHandle<HTMLElement>;
+    const viewport = (await notebook.$(
+      '.jp-WindowedPanel-viewport'
+    )) as ElementHandle<HTMLElement>;
 
     const allCells = await notebook.$$('div.jp-Cell');
     const filters = await Promise.all(allCells.map(c => c.isVisible()));
@@ -519,10 +528,10 @@ export class NotebookHelper {
       // Scroll up
       let scrollTop =
         (await firstCell.boundingBox())?.y ??
-        (await notebook.evaluate(node => node.scrollTop - node.clientHeight));
+        (await scroller.evaluate(node => node.scrollTop - node.clientHeight));
 
       do {
-        await notebook.evaluate((node, scrollTarget) => {
+        await scroller.evaluate((node, scrollTarget) => {
           node.scrollTo({ top: scrollTarget });
         }, scrollTop);
         await this.page.waitForTimeout(50);
@@ -538,20 +547,18 @@ export class NotebookHelper {
         );
         scrollTop =
           (await cells[firstCell].boundingBox())?.y ??
-          (await notebook.evaluate(node => node.scrollTop - node.clientHeight));
+          (await scroller.evaluate(node => node.scrollTop - node.clientHeight));
       } while (scrollTop > 0 && firstIndex > cellIndex);
     } else if (cellIndex > lastIndex) {
-      const clientHeight = await notebook.evaluate(node => node.clientHeight);
+      const clientHeight = await scroller.evaluate(node => node.clientHeight);
       // Scroll down
-      const viewport = await (
-        await notebook.$$('.jp-WindowedPanel-viewport')
-      )[0].boundingBox();
-      let scrollHeight = viewport!.y + viewport!.height;
+      const viewportBox = await viewport.boundingBox();
+      let scrollHeight = viewportBox!.y + viewportBox!.height;
       let previousScrollHeight = 0;
 
       do {
         previousScrollHeight = scrollHeight;
-        await notebook.evaluate((node, scrollTarget) => {
+        await scroller.evaluate((node, scrollTarget) => {
           node.scrollTo({ top: scrollTarget });
         }, scrollHeight);
         await this.page.waitForTimeout(50);
@@ -566,10 +573,8 @@ export class NotebookHelper {
           10
         );
 
-        const viewport = await (
-          await notebook.$$('.jp-WindowedPanel-viewport')
-        )[0].boundingBox();
-        scrollHeight = viewport!.y + viewport!.height;
+        const viewportBox = await viewport.boundingBox();
+        scrollHeight = viewportBox!.y + viewportBox!.height;
         // Avoid jitter
         scrollHeight = Math.max(
           previousScrollHeight + clientHeight,

diff --git a/galata/test/jupyterlab/notebook-scroll.test.ts b/galata/test/jupyterlab/notebook-scroll.test.ts
@@ -2,6 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { expect, galata, test } from '@jupyterlab/galata';
+import { ElementHandle } from '@playwright/test';
 import * as path from 'path';
 
 const fileName = 'scroll.ipynb';
@@ -75,7 +76,10 @@ test.describe('Notebook scroll on execution', () => {
     const notebook = await page.notebook.getNotebookInPanel();
     const thirdCell = await page.notebook.getCell(2);
 
-    const notebookBbox = await notebook.boundingBox();
+    const scroller = (await notebook.$(
+      '.jp-WindowedPanel-outer'
+    )) as ElementHandle<HTMLElement>;
+    const notebookBbox = await scroller.boundingBox();
     const thirdCellBBox = await thirdCell.boundingBox();
     await page.mouse.move(notebookBbox.x, notebookBbox.y);
     const scrollOffset =
@@ -106,7 +110,10 @@ test.describe('Notebook scroll on execution', () => {
     const notebook = await page.notebook.getNotebookInPanel();
     const thirdCell = await page.notebook.getCell(2);
 
-    const notebookBbox = await notebook.boundingBox();
+    const scroller = (await notebook.$(
+      '.jp-WindowedPanel-outer'
+    )) as ElementHandle<HTMLElement>;
+    const notebookBbox = await scroller.boundingBox();
     const thirdCellBBox = await thirdCell.boundingBox();
     await page.mouse.move(notebookBbox.x, notebookBbox.y);
     const scrollOffset =