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

为什么需要这个

网页开发中，页面修改后总是需要在浏览器中测试是否有js、css、图片等资源加载错误，在页面少的时候还可以人工一个一个测试，页面多了以后就很烦躁很无聊了。

预计达到的效果

使用数组格式给出要测试的所有页面地址，通过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);
    });
})();

三、运行脚本

node test.js

四、查看结果

通过截图和错误日志文件，查看测试结果。

遇到的坑

最大化报错

UnhandledPromiseRejectionWarning: WebDriverError: unknown error: failed to change window state to maximized, current state is normal

出现问题的代码：

// 生成实例
driver = await new Builder().forBrowser('chrome').build();
// 最大化窗口
await driver.manage().window().maximize();

解决办法：
初始化时传入最大化参数

let options = new chrome.Options().addArguments('start-maximized');
driver = chrome.Driver.createSession(options);

下一步计划

把页面重要交互逐步加入selenium自动测试中。

参考

[原创] 解决Selenium的"failed to change window state to maximized" 窗口最大化问题