被强的情况下安装puppeteer及chromium攻略

背景

npm安装puppeteer时，会自动安装下载chromium，由于访问不了外网也访问不了淘宝源，所以会一直error。按照如下步骤正确安装puppeteer和chromium。

安装puppeteer时，取消加载chromium

npm i --save puppeteer --ignore-scripts

或者新建一个.npmrc文件，内容

puppeteer_skip_chromium_download = 1

找到 puppeteer 中对应的chromium并下载

下载chromium时，必须安装和puppeteer对应的版本，否则puppeteer启动chromium时报错。

在 node_modules/puppeteer-core/lib/BrowserFetcher.js 中找到各平台 Chrome 下载地址。其中%s 替换为 DEFAULT_DOWNLOAD_HOST 的值，%d 替换为版本号。

在 node_modules/puppeteer-core/packages.json 中找到版本号

替换后得到下载地址

storage.googleapis.com/chromium-br…

下载后解压，放在项目目录中，这里我放在 chrome 下。

或者直接在淘宝源下载对应版本号的chromium。地址

复制chromium到工程目录

将解压后的文件复制到项目根目录的chromium目录下。在puppeteer launch内部设置executablePath属性（chromium启动路径）。

const browser = await puppeteer.launch({
	executablePath: 'D:/chromium/chrome.exe'
});

最后，在.gitignore中加上 chromium

UI自动化测试遇到问题

如果一个页面存在iframe，需要对iframe里面的元素进行操作，经常会遇到iframe尚未完全加载，就针对iframe里面的元素进行操作，所以会报错。那么如何判断iframe是否正确loaded了呢？

/**
   * Waits until the iframe is attached and then returns it to the caller 
   * @returns {object} The Puppeteer iframe element
*/                                                                                                    
  async function iframeAttached(page, nameOrId) {
    return new Promise(async resolve => {
      const pollingInterval = 1000;
      const poll = setInterval(async function waitForIFrameToLoad() {
        const iFrame = page.frames().find(frame => frame.name() === nameOrId);                         
        if (iFrame) {
          clearInterval(poll);
          resolve(iFrame); 
        }
      }, pollingInterval);
    });
  }

用法

const iframe = await iframeAttached(page, 'YOUR_IFRAME_NAME_OR_ID');
// You can now use the iframe
iframe.doSomething(...);