puppyteer

今天自己加了一个需求，尝试使用puppyteer来实现自动化录制视频，一开始的想法是先开启录屏工具，在使用puppyteer来做浏览器自动化，经过调研后发现有Puppeteer 屏幕录像机库，直接使用puppeteer-screen-recorder库。所以难点可能就是过验证码了。

可能会用到的方法：

启动浏览器：使用puppeteer.launch()启动浏览器实例，可以选择无头模式或有头模式（headless: false）。
打开新页面：使用browser.newPage()创建一个新页面。
导航到视频页面：使用page.goto(url)导航到包含视频的页面。
点击播放视频：使用page.click(selector)模拟点击视频播放按钮。
监控视频播放状态：这可能是实现中的一个技术难点。你可能需要通过JavaScript注入（使用page.evaluate()）来访问页面中视频播放器的状态，并检测视频是否播放完毕。
录屏：Puppeteer本身不提供录屏功能。你可能需要使用其他工具或库（如ffmpeg）来实现屏幕录制。可以考虑在Puppeteer脚本外部启动录屏工具，或者使用Node.js的child_process模块来从Puppeteer脚本内部启动录屏进程。
点击下一节：视频播放完毕后，使用page.click(selector)模拟点击“下一节”按钮。
循环播放和录制：将上述步骤包装在一个循环中，直到所有视频播放并录制完毕。

技术难点：

视频播放状态监控：不同网站的视频播放器实现可能不同，需要具体分析如何获取视频播放状态。这可能涉及到对特定网站DOM结构和JavaScript的深入了解。
自动化录屏：Puppeteer本身不支持录屏。需要结合其他工具来实现录屏，这可能涉及到额外的配置和同步问题。
长时间任务的稳定性：长时间运行的自动化任务可能会遇到稳定性问题，如浏览器崩溃、网络问题等。需要考虑异常处理和恢复机制。
资源消耗：长时间录屏和视频播放可能会消耗大量计算机资源，特别是在有头模式下。

综上所述，虽然使用Puppeteer自动化录屏的想法是可行的，但实现起来需要解决一些技术挑战。你可能需要结合Puppeteer的API、JavaScript编程技巧以及其他录屏工具来实现这个功能。

video.onended = resolve;：
这行代码为视频元素设置了一个onended事件处理函数。onended是一个事件，当视频播放结束时会被触发。
将 resolve 函数赋值给 video.onended 意味着当视频播放结束时，resolve 函数将被调用，从而解决外部的Promise。
这个onended事件应该如何查看？是在JS代码中吗？

问题：

feature的大小要改变

方法：

# 设置页面窗口大小，适配Chrome浏览器
await page.setViewport(viewport={'width':1536,'height':768})

自动退出

这个TimeoutError错误表明Puppeteer在等待特定选择器对应的元素出现时超时了。默认情况下，page.waitForSelector方法会等待30秒（30000毫秒），如果在这段时间内没有找到匹配的元素，就会抛出这个错误。

出现这个错误可能有以下几个原因：

选择器不正确：提供的CSS选择器可能不匹配任何元素，或者页面结构已经发生了变化。
页面未完全加载：页面可能还没有完全加载，或者加载速度很慢，导致在超时时间内元素没有出现。
元素被动态加载：有些元素可能是通过JavaScript动态添加到页面上的，如果这些脚本没有执行或执行较慢，元素也不会出现。
网络或资源问题：网络延迟或资源加载问题可能导致页面加载不完整或超时。

解决方法：

检查选择器：确保选择器是正确的，并且确实能够匹配页面上的元素。

增加超时时间：你可以增加waitForSelector的超时时间，例如：

await page.waitForSelector(selector, { timeout: 60000 }); // 等待60秒

等待页面加载：使用page.waitForNavigation等待页面导航事件完成，例如：

await Promise.all([
  page.click('login-button-selector'), // 替换为实际的登录按钮选择器
  page.waitForNavigation({ waitUntil: 'networkidle0' }), // 等待网络空闲时
]);

等待元素可见：使用page.waitForSelector等待元素不仅出现在DOM中，而且是可见的：
```
await page.waitForSelector(selector, { visible: true });
```
手动检查：在浏览器中手动检查页面，确认元素是否存在，以及是否有任何JavaScript错误。

调试截图：在等待选择器之前和之后添加截图，以帮助确定页面的实际状态：

await page.screenshot({ path: 'before-wait.png' });
await page.waitForSelector(selector);
await page.screenshot({ path: 'after-wait.png' });

关闭浏览器：在调试完成后，记得关闭浏览器实例，以避免资源占用。

请根据实际情况调整代码，并确保在部署自动化脚本之前进行充分的测试。

pypeteer参数简介：

ignoreHTTPSErrors（bool）：是否忽略 HTTPS 错误。默认值为。False
headless（bool）：是否在无头模式下运行浏览器。默认值为 unless 或 options 为。True``appMode``devtools``True
executablePath（str）：要运行的 Chromium 或 Chrome 可执行文件的路径而不是默认捆绑的 Chromium。
slowMo（int|float）：按指定的毫秒数。
args（List[str]）：要传递给浏览器的其他参数（标志）过程。
ignoreDefaultArgs（bool）：不要使用 pyppeteer 的默认参数。这是危险的选择;小心使用。
handleSIGINT（bool）：在 Ctrl+C 上关闭浏览器进程，默认为。True
handleSIGTERM（bool）：关闭 SIGTERM 上的浏览器进程。违约自。True
handleSIGHUP（bool）：关闭 SIGHUP 上的浏览器进程。默认值为。True
dumpio（bool）：是否通过管道传输浏览器进程 stdout 和 stderr into 和 .默认值为。process.stdout``process.stderr``False
userDataDir（str）：用户数据目录的路径。
env（dict）：指定对浏览器。默认值与 python 进程相同。
devtools（bool）：是否为每个选项卡自动打开 DevTools 面板。如果此选项为，则将设置该选项。True``headless``False
logLevel（int|str）：用于打印日志的日志级别。默认值为根记录器。
autoClose（bool）：脚本时自动关闭浏览器进程完成。默认值为。True
loop（异步。AbstractEventLoop）：事件循环（实验性）。
appMode（bool）：已弃用。

3、进阶使用

尝试模拟登录某BI大数据平台

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless:false});//默认运行在无头模式
  // const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // await page.goto('https://www.kanxue.com/book-section_list-83.htm');
  //await page.screenshot({path: 'example.png'});
  await page.setViewport(viewport={'width':1536,'height':768})
  await page.goto('https://www.captainbi.com/amz_login.html');
  //先点击登录
  // let login_btn = await page.$('#loginform > div:nth-child(4) > button')
  // login_btn.click()
//   let login = await page.$('#header > div > nav > div.text-right.nav_user_item > a.login_btn')
//   login.click()
  // //用户名
  // let loginInput = await page.$('#account')
  // //密码
  // let pwdInput = await page.$('#password')
  // console.log(loginInput)//打印DOM节点信息
  // console.log(pwdInput)

  // 使用page.type输入节点信息，输入用户名
  await page.type('#username', '')  

  // 使用page.type输入节点信息，输入密码
  await page.type('#password', '')  

  await page.click('#submit')

  console.log('登录成功')

  //使用page方法获取用户名节点
  await browser.close();
})();