先说第一个

为啥要配置live server的host和port呢？

一般情况下，使用puppeteer做一些前端页面的自动化测试是比较方便的。但是这就出现了一个问题，那就是在开发机上通过live server启动index.html的host和port是内置分配的，和实际线上的host和port不一致。

这就导致了在puppeteer脚本写完之后还需要将代码中的port和host手动修改成实际使用环境中的值。非常的麻烦，也很容易出现纰漏。

所以需要通过设置将live server的port和host设置的和实际使用环境中的一样，然后再开始写测试脚本。

首先在vscode中使用快捷键ctrl+shift+p打开命令行窗口，输入

txt 复制代码

settings.json

然后选择Open User Settings (JSON)，如下图所示：

这样就进入到了用户设置文件中：

此时只需要增加两个设置就可以了：

json 复制代码

    "liveServer.settings.host": "127.0.0.1",
    "liveServer.settings.port": 8080

这样一来，通过live server打开的index.html就是运行在127.0.0.1:8080这个地址上了。

下面说下如何在node环境中使用puppeteer

需要以下的环境：

node version v18.18.2
puppeteer-core ^22.6.0

这里使用puppeteer-core而不是puppeteer，因为如果是后者因为下载的内容比较多，非常容易失败，加上缓存等干扰，如果切换了node的版本就会造成很多麻烦，因此直接使用puppeteer-core，手动下载chrome浏览器即可省去很多麻烦的事情。

所以先下载一个chrome浏览器吧，这很真的很重要！

下载好之后，没有什么问题的话就会在桌面找到快捷方式了：

右击-属性-目标-复制

得到如下所示的引用地址：

txt 复制代码

C:\Program Files\Google\Chrome\Application\chrome.exe

接下来，先切换node的版本，使用nvm可以轻松做到：

bash 复制代码

nvm use 18.18.2

镜像源也要切换一下，使用nrm：

bash 复制代码

nrm use taobao

然后新建一个文件夹，然后初始化项目并安装puppeteer-core

bash 复制代码

yarn init -y
yarn add puppeteer-core@22.6.0

安装好之后就可以尝试使用了，这里我们新建一个js文件：

bash 复制代码

touch check.js

文件内容如下：

js 复制代码

const puppeteer = require('puppeteer-core');

const chromePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';

const run = async () => {

  const browser = await puppeteer.launch({
    headless: false,
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
    executablePath: chromePath
  });
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 945 });
  await page.goto('http://127.0.0.1:8080/');
  // 关闭浏览器
  await browser.close();
}

run();

需要注意的是windows的文件路径在node.js中的写法，这里对比下：

txt 复制代码

复制的：
C:\Program Files\Google\Chrome\Application\chrome.exe
需要的：
'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'

最后在控制台尝试使用：

bash 复制代码

node check.js

如果能够打开浏览器并且不报错，就算是成功了。

总结一下

这篇文章主要对于使用puppeteer的前后准备工作做了介绍，希望大家看到这篇小记之后能够少走一些弯路，将时间多多用在实际业务需求上。

puppeteer疑难杂症解决记录

先说第一个

下面说下如何在node环境中使用puppeteer

总结一下