Add playwright image comparison tests

Author: ianthomas23

ci/single_example.sh

@@ -73,7 +73,8 @@ export default defineConfig({
     command: 'npm run serve',
     url: 'http://localhost:$PORT',
     reuseExistingServer: !process.env.CI
-  }
+  },
+  snapshotPathTemplate: '{testDir}/../../../../tests/snapshots/{arg}{ext}'
 });
 EOF
 

ci/tests/example.spec.ts

@@ -17,7 +17,7 @@ test('loads bokehjs', async ({ page }) => {
 test('is interactive', async ({ page }) => {
   await page.goto('/');
 
-  // Take screenshot
+  await expect(page).toHaveScreenshot('initial.png');
 
   const boxZoom = await page.getByTitle('Box Zoom').click();
   const bbox = await page.locator('.bk-CartesianFrame').boundingBox();
@@ -28,9 +28,12 @@ test('is interactive', async ({ page }) => {
   await page.mouse.move(bbox!.x + bbox!.width*0.8, bbox!.y + bbox!.height*0.8);
   await page.mouse.up();
   await page.waitForTimeout(100);
-  // Take screenshot
+
+  await expect(page).toHaveScreenshot('zoom.png');
 
   const reset = await page.getByTitle('Reset').click();
   await page.waitForTimeout(100);
-  // Take screenshot
+
+  // Reset image is the same as initial image except for tool selection
+  await expect(page).toHaveScreenshot('reset.png');
 });

ci/tests/snapshots/initial.png

@@ -58,7 +58,7 @@ function create_bokehjs_plot(): Bokeh.Plotting.Figure {
 
   return plot;
 }
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`<div id='target'>Hello</div>\`;
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`<div id='target'></div>\`;
 
 Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
 EOF

ci/tests/snapshots/reset.png

@@ -53,7 +53,7 @@ export class VanillaViteRecipe extends Recipe {
       baseTypeScriptExample.import + "\n" +
       baseTypeScriptExample.version + "\n" +
       baseTypeScriptExample.function + "\n" +
-      "document.querySelector<HTMLDivElement>('#app')!.innerHTML = \\`<div id='target'>Hello</div>\\`;\n\n" +
+      "document.querySelector<HTMLDivElement>('#app')!.innerHTML = \\`<div id='target'></div>\\`;\n\n" +
       baseTypeScriptExample.show()
     ));
 

ci/tests/snapshots/zoom.png

@@ -65,7 +65,7 @@ Create an initial basic project using `create-vite`.
 
       return plot;
     }
-    document.querySelector<HTMLDivElement>('#app')!.innerHTML = `<div id='target'>Hello</div>`;
+    document.querySelector<HTMLDivElement>('#app')!.innerHTML = `<div id='target'></div>`;
 
     Bokeh.Plotting.show(create_bokehjs_plot(), "#target");