使用selenium-webdriver检测网页资源加载错误使用selenium-webdriver检测网页资

为什么需要这个网页开发中，页面修改后总是需要在浏览器中测试是否有js、css、图片等资源加载错误，在页面少的时候还可以人工一个一个测试，页面多了以后就很烦躁很无聊了。
预计达到的效果 【使用selenium-webdriver检测网页资源加载错误】使用数组格式给出要测试的所有页面地址，通过selenium自动测试并输出错误日志。
操作步骤一、安装selenuim-webdriver

npm install --save-dev selenium-webdriver // 或 yarn add --dev selenium-webdriver

二、添加测试脚本test.js

const { Builder, By, Key, until, logging } = require('selenium-webdriver'); const chrome = require('selenium-webdriver/chrome'); const fs = require('fs'); // 测试页面地址 const testPages = [ 'http://www.baidu.com', 'http://www.google.com', ]; // 记录错误页面 let badPages = []; (async function example() { let driver; for (let i = 0; i < testPages.length; i += 1) { // PC端 let options = new chrome.Options().addArguments('start-maximized'); // 手机网页端 // let options = new chrome.Options().setMobileEmulation( {deviceName: 'iPhone 6/7/8'}); driver = chrome.Driver.createSession(options); try { var testUrl = testPages[i]; var pass = true; var error = []; await driver.get(testUrl); // 等待1s await driver.sleep(1000); // 获取首屏截图 await driver.takeScreenshot().then( function(image) { fs.writeFileSync('screenshot/' + encodeURIComponent(testUrl) + '.png', image, 'base64', function(err) { err && console.log(err); }); } ); // 页面滚动到底部 await driver.executeScript('window.scrollTo(0, document.body.scrollHeight)'); // 等待1.5s后，打印浏览器错误日志 await driver.sleep(1500); await driver.manage().logs().get(logging.Type.BROWSER) .then(function(entries) { entries.forEach(function(entry) { if (entry.level.name === 'SEVERE') { pass = false; console.log('[%s] %s', entry.level.name, entry.message); error.push(entry.message); } }); }); // 控制台输出检测状态 if (pass) { console.log('[ 页面 ] ' + testUrl + ' 正常'); } else { console.log('[ 页面 ] ' + testUrl + ' 有错误'); badPages.push({ url: testUrl, error: error }); } } finally { await driver.quit(); } }console.log('包含错误的页面：'); console.log(badPages); // 写入测试结果 fs.writeFileSync('screenshot/error.json', JSON.stringify(badPages, null, 4), function(err) { err && console.log(err); }); })();

三、运行脚本