Puppeteer操作frameset内按钮报错：Unsupported Frame Type

技术栈 #

• Puppeteer v21.9.0
• Typescript v5.3.3
• NodeJS v20.9.0
• Chrome Browser v121.0.6167.85
• 操作系统：Ubuntu 22.04

问题描述 #

尝试点击嵌套在frameset和frame内的按钮，按照Puppeteer官方文档指引操作后，抛出错误：Error: Unsupported Frame Type

示例页面结构 #

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <frameset rows="100%">
    <frame frameborder="0" />
    <frame src="test.html" frameborder="0" name="mainframe" />
  </frameset>
</html>

test.html #

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="button" class="close-popup">Click Me</button>
  </body>

  <script>
    const buttonClick = document
      .getElementById("button")
      .addEventListener("click", function (clicked) {
        alert("Test");
      });
  </script>
</html>

运行的Puppeteer代码 #

import puppeteer from "puppeteer"
(async () => {
  try {
    console.log("test")
    const browser = await puppeteer.launch({
      headless: false
    })
    

    const page = await browser.newPage()
  
    await page.goto("http://127.0.0.1:5500/index.html")

    const mainFrame = page
      .frames()
      .find((frame) => frame.name() === "mainframe");

    if (mainFrame) {
      const closeButtonSelector = ".close-popup";
      await mainFrame.waitForSelector(closeButtonSelector, { visible: true });
      await mainFrame.click(closeButtonSelector);
      console.log("Successfully clicked the close button in the main frame.");
    } else {
      console.log("Frame not found.");
    }
  }catch(error) {
    console.log(error)
  }
})();

抛出的错误信息 #

Error: Unsupported frame type
    at CdpElementHandle.#clickableBox (/home/rifqi/Projects/auto-puppeteer/node_modules/puppeteer-core/src/api/ElementHandle.ts:1088:15)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async CdpElementHandle.clickablePoint (/home/rifqi/Projects/auto-puppeteer/node_modules/puppeteer-core/src/api/ElementHandle.ts:707:17)
    at async CdpElementHandle.<anonymous> (/home/rifqi/Projects/auto-puppeteer/node_modules/puppeteer-core/src/api/ElementHandle.ts:164:16)
    at async CdpElementHandle.click (/home/rifqi/Projects/auto-puppeteer/node_modules/puppeteer-core/src/api/ElementHandle.ts:748:20)
    at async CdpElementHandle.<anonymous> (/home/rifqi/Projects/auto-puppeteer/node_modules/puppeteer-core/src/api/ElementHandle.ts:167:22)
    at async CdpFrame.click (/home/rifqi/Projects/auto-puppeteer/node_modules/puppeteer-core/src/api/Frame.ts:1053:5)

问题解决（2024年2月6日更新） #

此问题为Puppeteer已知Bug，能正常处理frameset的最新Puppeteer版本为v21.1.0。

内容的提问来源于stack exchange，提问作者Rifqi Pratama