小程序测试方案初探

ERROR: Failed to download Chromium r508693! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
Error: Download failed: server returned code 502. URL: https://storage.googleapis.com/chromium-browser-snapshots/Win_x64/508693/chrome-win32.zip
    at ClientRequest.https.get.response (D:\chromium\node_modules\puppeteer\utils\ChromiumDownloader.js:197:21)
    at Object.onceWrapper (events.js:316:30)
    at emitOne (events.js:115:13)
    at ClientRequest.emit (events.js:210:7)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:565:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:116:23)
    at Socket.socketOnData (_http_client.js:454:20)
    at emitOne (events.js:115:13)
    at Socket.emit (events.js:210:7)
    at ClientRequest.onsocket (D:\chromium\node_modules\https-proxy-agent\index.js:181:14)

const puppeteer = require('puppeteer');
(async () => {
  //这里和官方不一样的就是，需要手动指定chromium目录所在的地址（上面链接下载之后解压），headless为true则不会打开chromium
  const browser = await puppeteer.launch({executablePath: '/chromium/chrome.exe',headless: false});

  //相当于新建选项卡
  const page = await browser.newPage();
  //跳转到指定URL
  await page.goto('https://example.com');
  //截图
  await page.screenshot({path: 'example.png'});
  //关闭页面或者选项卡
  await browser.close();
})();

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
(async () => {
        const browser = await puppeteer.launch({executablePath: '/chromium/chrome.exe',headless: true});
        const page = await browser.newPage();
        //设置展示的设备https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js
        await page.emulate(devices['iPhone 6']);
        //多一个参数waitUntil，指跳转之后等待网络空闲之后再执行下一步操作，没有这个的话，截图很有可能是白屏，因为内容还没渲染出来
        await page.goto('http://localhost:3000/#!pages/index/index', {waitUntil: 'networkidle'});
        //小程序的内容其实是放在一个iframe里面，外面是无法直接抓取到iframe里面的内容，所以这里需要获取页面所有的iframe
        const frames = await page.frames();
        //根据iframe的name属性来获取正确的iframe
        const weChatFrame = frames.find(f => f.name() === 'view-0');
        //在上下文环境中获取需要抓取的内容
        const outerText = await weChatFrame.evaluate(() => {
        //上下文执行环境，跟H5一致
            const anchors = Array.from(document.querySelectorAll('.container'));
            return anchors.map(anchor => anchor.textContent);
        });
        console.log('the outerText: ', outerText);
        await browser.close();

})();

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const expect = require('chai').expect;
describe('output test', () => {
    it('should return Hello 测试帐号 ', () => {
        (async () => {
            //小程序内容获取代码跟上述一致
            //...
            expect(outerText[0]).to.equal('Hello 测试帐号');
            //...
        })
    })
})