fix: details not opened in PDF (#203)

* fix: details not opened in PDF

* test: fix unit test

Author: jean-humann

.eslintignore

@@ -1,2 +1,3 @@
 # built by typescript
 /lib/*
+/examples/*

.gitignore

@@ -5,4 +5,5 @@ lib/
 .vscode
 .DS_Store
 coverage
-*.tgz
+*.tgz
+examples/

docs-to-pdf.pdf

@@ -80,6 +80,7 @@ program
     '--restrictPaths',
     'only the paths in the --initialDocURLs will be included in the PDF',
   )
+  .option('--openDetail', 'open details elements in the PDF, default is open')
 
   .action((options: GeneratePDFOptions) => {
     if (options.pdfFormat) {

src/cli.ts

@@ -32,6 +32,7 @@ export interface GeneratePDFOptions {
   baseUrl: string;
   excludePaths: Array<string>;
   restrictPaths: boolean;
+  openDetail: boolean;
 }
 
 /* c8 ignore start */
@@ -58,6 +59,7 @@ export async function generatePDF({
   baseUrl,
   excludePaths,
   restrictPaths,
+  openDetail = true,
 }: GeneratePDFOptions): Promise<void> {
   const execPath =
     process.env.PUPPETEER_EXECUTABLE_PATH ?? puppeteer.executablePath('chrome');
@@ -115,6 +117,10 @@ export async function generatePDF({
           restrictPaths,
         )
       ) {
+        // Open all <details> elements on the page
+        if (openDetail) {
+          await openDetails(page);
+        }
         // Get the HTML string of the content section.
         contentHTML += await getHtmlContent(page, contentSelector);
         console.log(chalk.green('Success'));
@@ -241,7 +247,7 @@ export async function getHtmlContent(page: puppeteer.Page, selector: string) {
 
 /**
  * Retrieves the HTML content of an element matching the specified selector.
- * Adds page break styling and opens <details> tags for PDF generation.
+ * Adds page break styling for PDF generation.
  *
  * @param selector - The CSS selector of the element to retrieve.
  * @returns The HTML content of the matched element, or an empty string if no element is found.
@@ -252,18 +258,42 @@ export function getHtmlFromSelector(selector: string): string {
     // Add pageBreak for PDF
     element.style.pageBreakAfter = 'always';
 
-    // Open <details> tag
-    const detailsArray = element.getElementsByTagName('details');
-    Array.from(detailsArray).forEach((element) => {
-      element.open = true;
-    });
-
     return element.outerHTML;
   } else {
     return '';
   }
 }
 
+type ClickFunction = (element: puppeteer.ElementHandle) => Promise<void>;
+type WaitFunction = (milliseconds: number) => Promise<void>;
+
+/**
+ * Recursively opens all <details> elements on a page.
+ *
+ * @param page - The Puppeteer page instance.
+ * @param clickFunction - A function to click the summary element of a <details> element.
+ * @param waitFunction - A function to wait for a specified number of milliseconds.
+ */
+export async function openDetails(
+  page: puppeteer.Page,
+  clickFunction?: ClickFunction,
+  waitFunction?: WaitFunction
+  ) {
+  const detailsHandles = await page.$$('details');
+
+  console.debug(`Found ${detailsHandles.length} elements`);
+
+  for (const detailsHandle of detailsHandles) {
+    const summaryHandle = await detailsHandle.$('summary');
+    if (summaryHandle){
+      console.debug(`Clicking summary: ${await summaryHandle.evaluate((node) => node.textContent)}`);
+      await (clickFunction ? clickFunction(summaryHandle) : summaryHandle.click());
+      await (waitFunction ? waitFunction(800) : new Promise((r) => setTimeout(r, 800)));
+    }
+      
+  }
+}
+
 /**
  * Finds the URL of the next page based on a CSS selector using Puppeteer.
  * @param page - The Puppeteer page instance.

src/utils.ts

@@ -11,6 +11,7 @@ import {
   replaceHeader,
   matchKeyword,
   isPageKept,
+  openDetails,
 } from '../src/utils';
 
 const execPath =
@@ -454,3 +455,54 @@ describe('isPageKept function', () => {
     expect(result).toBe(true);
   });
 });
+
+describe('openDetails function', () => {
+  let page: puppeteer.Page;
+  let browser: puppeteer.Browser;
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: 'new',
+      executablePath: execPath,
+    });
+    page = await browser.newPage();
+  }, 30000);
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  it('should open all details elements recursively', async () => {
+    // Mock the click and wait functions
+    const clickFunction = jest.fn(async () => {});
+    const waitFunction = jest.fn(async () => {});
+
+    // Mock a simple HTML page with nested <details> elements
+    await page.setContent(`
+      <details>
+        <summary>Toggle me!</summary>
+        <div>
+          <div>This is the detailed content</div>
+          <br/>
+          <details>
+            <summary>
+              Nested toggle! Some surprise inside...
+            </summary>
+            <div>😲😲😲😲😲</div>
+          </details>
+        </div>
+      </details>
+    `);
+
+    // Call the recursive function to open details elements
+    await openDetails(page, clickFunction, waitFunction);
+
+    // Assertions based on the mock functions
+    expect(clickFunction).toHaveBeenCalledTimes(2);
+    expect(waitFunction).toHaveBeenCalledTimes(2);
+    expect(waitFunction).toHaveBeenCalledWith(800);
+
+    // Close the browser
+    await browser.close();
+  });
+});