Added notebook.$(cell).

Author: asg017

README.md

@@ -192,6 +192,10 @@ Returns a Promise that resolves when the cell named `cell` is `"fulfilled"` (see
 
 Replace the [FileAttachments](https://observablehq.com/@observablehq/file-attachments) of the notebook with those defined in `files`. `files` is an object where the keys are the names of the FileAttachment, and the values are the absolute paths to the files that will replace the FileAttachments.
 
+### notebook.**\$**(cell)
+
+Returns the [`ElementHandle`](https://pptr.dev/#?product=Puppeteer&version=v7.1.0&show=api-class-elementhandle) of the container HTML element for the given observed cell. Can be used to call `.click()`, `.screenshot()`, `.evaluate()`, or any other method to have more control of a specfic rendered cell.
+
 ## CLI Reference
 
 `observable-prerender` also comes bundled with 2 CLI programs, `observable-prerender` and `observable-prerender-animate`, that allow you to more quickly pre-render notebooks and integrate with local files and other CLI tools.

src/index.js

@@ -37,6 +37,9 @@ class Notebook {
   async close() {
     return this.launchedBrowser ? this.browser.close() : this.page.close();
   }
+  async $(cellName) {
+    return this.page.$(`#notebook-${serializeCellName(cellName)}`);
+  }
   async _value(cell) {
     await this.page.waitForFunction(() => window.notebookModule);
     return await this.page.evaluate(async (cell) => {
@@ -76,19 +79,17 @@ class Notebook {
   }
   async html(cell, path) {
     await this.waitFor(cell);
-    const html = await this.page.$eval(
-      `#notebook-${serializeCellName(cell)}`,
-      (e) => e.innerHTML
+    const html = await this.$(cell).then((container) =>
+      container.evaluate((e) => e.innerHTML)
     );
     if (path) return rw.writeFileSync(path, html);
     return html;
   }
   // inspired by https://observablehq.com/@mbostock/saving-svg
   async svg(cell, path) {
     await this.waitFor(cell);
-    const html = await this.page.$eval(
-      `#notebook-${serializeCellName(cell)} svg`,
-      (e) => {
+    const html = await this.$(cell).then((container) =>
+      container.$eval(`svg`, (e) => {
         const xmlns = "http://www.w3.org/2000/xmlns/";
         const xlinkns = "http://www.w3.org/1999/xlink";
         const svgns = "http://www.w3.org/2000/svg";
@@ -113,7 +114,7 @@ class Notebook {
         const serializer = new window.XMLSerializer();
         const string = serializer.serializeToString(svg);
         return string;
-      }
+      })
     );
     if (path)
       return new Promise((resolve, reject) =>
@@ -125,7 +126,7 @@ class Notebook {
   }
   async screenshot(cell, path, options = {}) {
     await this.waitFor(cell);
-    const container = await this.page.$(`#notebook-${serializeCellName(cell)}`);
+    const container = await this.$(cell);
     return await container.screenshot({ path, ...options });
   }