大量商用ページの表示結果を比較するために試行錯誤した(２)
17600 ワード
大人の事情で公開していなかった部分を含めて、全てみせます。
自分の記録の意味も含めて。
screenshotDiff.js
/*------------------------------------------------------------
大量ページを逐次表示、スクリーンショットをとり
ペアページ同士で比較差分を表示する。
制限事項： 自動アクセス防止ヒューリスティックを採用して
いるサイトは アクセス権限無し(403)を返すため比較差分を
することができない。
node v8.4.0
puppeteer-core v1.8.0
looks-same v4.0.0
@I.Times 2018/9/25
--------------------------------------------------------------*/
/*------------------------------------------------------------
2018/9/24 I.Times Haranaga
puppeteer によるスクリーンショットの工夫
(1) ページ表示後にスクリーンショットを取らず一度リロードを
してからスクリーンショットをとる。
リロード後のほうがページ描画が安定するため。
--------------------------------------------------------------*/
/*------------------------------------------------------------
2018/9/24 I.Times Haranaga
looks-sameには独自修正を加えている。
(1) createDiff実行時に 差分ピクセル数を返すようCallBackを修正
(2) 差分箇所のみに点を描画する画像ファイルを追加作成する。
--------------------------------------------------------------*/
const puppeteer = require('puppeteer-core');
const async = require('async');
const delay = require('delay');
const fs = require('fs');
const che = require('cheerio');
var looksSame = require('looks-same');
var os = require('os');
// 数値を前ゼロ埋めする。
function zeroPadding(num,length){
var ZERO = '0000000000000000';
if(length){
if(length > ZERO.length){
return (ZERO + num).slice(ZERO.length*(-1));
}else if(length > 0){
return (ZERO + num).slice(-length);
}else{
return num;
}
}else{
return (ZERO + num).slice(ZERO.length*(-1));
}
}
const headless = true;
const browserExecutablePath = 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe';
const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36';
//const userAgent = 'BOT/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36';
const WindowWidth = 1920;
const WindowHeight = 1080;
const viewPort = {
width: WindowWidth,
height: WindowHeight,
deviceScaleFactor:0.85,
isMobile:false,
Mobile:false,
hasTouch:false,
isLandscape:false,
};
const NO_SANDBOX = '--no-sandbox';
const _browserOptions = {
headless: headless,
ignoreHTTPSErrors: true,
executablePath: browserExecutablePath,
defaultViewport:viewPort,
args: ['--window-size='+WindowWidth+','+WindowHeight,'--window-position=0,0',NO_SANDBOX],
};
var browseOptions = _browserOptions;
// Async-Awaitの中の例外をキャッチする仕組み
process.on('unhandledRejection', console.dir);
const DIRNAME = __dirname;
(async () => {
// URL一覧を読み込む。
var elements = [];
var elementList = async () => {
var xml_data = await fs.readFileSync("data.xml", "utf-8");
$ = che.load(xml_data);
$("element").each(function(i0, el0) {
var elem = {};
var actualElem = {};
var actual = $(this).children("actual");
actualElem['url'] = actual.children("url").text();
actualElem['networkidle'] = $(actual).children("networkidle").text();
actualElem['delay'] = $(actual).children("delay").text();
elem['actual'] = actualElem;
var targetElem = {};
var target = $(this).children("target");
targetElem['url'] = target.children("url").text()
targetElem['networkidle'] = target.children("networkidle").text()
targetElem['delay'] = target.children("delay").text()
elem['target'] = targetElem;
elem['tolerance'] = $(this).children('tolerance').text();
elements.push(elem);
});
};
elementList();
// スクリーンショットFunction定義：ページを表示,スクリーンショットを取る。
var screenShot = async (element, shotPath) =>{
await page.setUserAgent(userAgent);
await page.goto(element.url, {waitUntil: element.networkidle})
.then( async function(response){
// ReLoadする理由
// ReLoad再描画が時間が掛からず、ScreenShotタイミングを取りやすいため
await page.reload({waitUntil: element.networkidle}).then( async function(response) {
if(element.delay>0){
await delay(element.delay);
}
await page.screenshot( {path: DIRNAME+'\\'+shotPath, fullPage: true});
});
} );
};
// 配列要素を処理するAsync Function定義
var eachProcess = async (element, callback) => {
var index = elements.indexOf( element );
var count = index + 1;
var path = {
imageA: 'imageA\\shotA_'+zeroPadding(count,5)+'.png',
imageB: 'imageB\\shotB_'+zeroPadding(count,5)+'.png'
};
// Actual スクリーンショット
await screenShot(element.actual, path.imageA);
// Target スクリーンショット
await screenShot(element.target, path.imageB);
// Actual<=>Targetの比較
var looksSameOption = {};
looksSameOption.reference = path.imageA;
looksSameOption.current = path.imageB;
looksSameOption.diff = 'diff\\diff_'+zeroPadding(count,5)+'_1.png';
looksSameOption.diff2 = 'diff\\diff_'+zeroPadding(count,5)+'_2.png'; // 独自追加オプション
looksSameOption.highlightColor = '#ff00ff'; //color to highlight the differences
looksSameOption.defaultColor = '#ffffff'; // 独自追加オプション
looksSameOption.strict = true; //strict comparsion
looksSameOption.writeOriginalDiff = true; // 独自追加オプション
looksSame.createDiff(looksSameOption
// このパラメータFunctionは独自追加です。
,function(unmatch){
console.log("No.["+zeroPadding(count,5)+"] UnMatch["+zeroPadding(unmatch)+"]:"+element.actual.url);
// 必ずここのfunctionを一度呼びだすので、ここで forEachSeries のcallbackを呼び出す。
callback();
// このパラメータFunctionは独自追加です。
}, function(err){
if(err){
console.log(err);
throw err;
}
}, function(err){
if(err){
console.log(err);
throw err;
}
} ); // looksSame 終わり
};
// ブラウザを起動する。
var browser = await puppeteer.launch( _browserOptions );
const page = await browser.newPage();
await page.setJavaScriptEnabled(true);
//await page.evaluate('navigator.userAgent');
// キャッシュ無効にする（効果は未確認）
const client = await page.target().createCDPSession();
await client.send( 'Network.setCacheDisabled', { 'cacheDisabled' : true } );
await page.setCacheEnabled( false );
// 配列(elements)の要素をAsync順次処理する。
async.forEachSeries(
// 第一パラメータ：配列
elements,
// 第二パラメータ：要素を処理するAsync Function
(async function(element, callback){
await eachProcess(element, callback);
}),
// 第三パラメータ： 最後に呼び出されるCallBack
async function(err){
if(err) throw err;
await browser.close();
console.log('##browser close');
}
); // async.forEachSeries終わり
})();
data.xml(例)
<element>
<actual>
<url>https://www.naro.affrc.go.jp/nivfs/index.html</url>
<networkidle>networkidle0</networkidle>
<delay>0</delay>
</actual>
<target>
<url>https://www.naro.affrc.go.jp/nivfs/index.html</url>
<networkidle>networkidle0</networkidle>
<delay>0</delay>
</target>
<tolerance>0</tolerance>
</element>
<element>
<actual>
<url>https://www.paxcompy.co.jp/</url>
<networkidle>networkidle0</networkidle>
<delay>0</delay>
</actual>
<target>
<url>https://www.paxcompy.co.jp/</url>
<networkidle>networkidle0</networkidle>
<delay>0</delay>
</target>
<tolerance>0</tolerance>
</element>
<element>
<actual>
<url>http://www.machidukuri-nagano.jp/</url>
<networkidle>networkidle0</networkidle>
<delay>0</delay>
</actual>
<target>
<url>http://www.machidukuri-nagano.jp/</url>
<networkidle>networkidle0</networkidle>
<delay>0</delay>
</target>
<tolerance>0</tolerance>
</element>
node_modules\looks-same\index.js
'use strict';
const _ = require('lodash');
const parseColor = require('parse-color');
const colorDiff = require('color-diff');
const png = require('./lib/png');
const areColorsSame = require('./lib/same-colors');
const AntialiasingComparator = require('./lib/antialiasing-comparator');
const IgnoreCaretComparator = require('./lib/ignore-caret-comparator');
const utils = require('./lib/utils');
const readPair = utils.readPair;
const getDiffPixelsCoords = utils.getDiffPixelsCoords;
const JND = 2.3; // Just noticeable difference if ciede2000 >= JND then colors difference is noticeable by human eye
const getDiffArea = (diffPixelsCoords) => {
const xs = [];
const ys = [];
diffPixelsCoords.forEach((coords) => {
xs.push(coords[0]);
ys.push(coords[1]);
});
const top = Math.min.apply(Math, ys);
const bottom = Math.max.apply(Math, ys);
const left = Math.min.apply(Math, xs);
const right = Math.max.apply(Math, xs);
const width = (right - left) + 1;
const height = (bottom - top) + 1;
return {left, top, width, height};
};
const makeAntialiasingComparator = (comparator, png1, png2, opts) => {
const antialiasingComparator = new AntialiasingComparator(comparator, png1, png2, opts);
return (data) => antialiasingComparator.compare(data);
};
const makeNoCaretColorComparator = (comparator, pixelRatio) => {
const caretComparator = new IgnoreCaretComparator(comparator, pixelRatio);
return (data) => caretComparator.compare(data);
};
function makeCIEDE2000Comparator(tolerance) {
return function doColorsLookSame(data) {
if (areColorsSame(data)) {
return true;
}
/*jshint camelcase:false*/
const lab1 = colorDiff.rgb_to_lab(data.color1);
const lab2 = colorDiff.rgb_to_lab(data.color2);
return colorDiff.diff(lab1, lab2) < tolerance;
};
}
const createComparator = (png1, png2, opts) => {
let comparator = opts.strict ? areColorsSame : makeCIEDE2000Comparator(opts.tolerance);
if (opts.ignoreAntialiasing) {
comparator = makeAntialiasingComparator(comparator, png1, png2, opts);
}
if (opts.ignoreCaret) {
comparator = makeNoCaretColorComparator(comparator, opts.pixelRatio);
}
return comparator;
};
const iterateRect = (width, height, callback, endCallback) => {
const processRow = (y) => {
setImmediate(() => {
for (let x = 0; x < width; x++) {
callback(x, y);
}
y++;
if (y < height) {
processRow(y);
} else {
endCallback();
}
});
};
processRow(0);
};
const buildDiffImage = (png1, png2, options, callback) => {
const width = Math.max(png1.width, png2.width);
const height = Math.max(png1.height, png2.height);
const minWidth = Math.min(png1.width, png2.width);
const minHeight = Math.min(png1.height, png2.height);
const highlightColor = options.highlightColor;
const result = png.empty(width, height);
// ###### ここを変えた ########
// -- add start ---
const result2 = (options.writeOriginalDiff)? png.empty(width, height): null;
var unmatch = 0;
// -- add end ---
iterateRect(width, height, (x, y) => {
if (x >= minWidth || y >= minHeight) {
result.setPixel(x, y, highlightColor);
// ###### ここを変えた ########
// -- add start ---
unmatch += 1;
// -- add end ---
return;
}
const color1 = png1.getPixel(x, y);
const color2 = png2.getPixel(x, y);
if (!options.comparator({color1, color2})) {
result.setPixel(x, y, highlightColor);
// ###### ここを変えた ########
// -- add start ---
unmatch += 1;
if(options.writeOriginalDiff){
result2.setPixel(x, y, options.highlightColor);
}
// -- add end ---
} else {
result.setPixel(x, y, color1);
// ###### ここを変えた ########
// add start
if(options.writeOriginalDiff){
result2.setPixel(x, y, options.defaultColor);
}
// add end
}
// ###### ここを変えた ########
//}, () => callback(result));
}, () => callback(result, result2, unmatch));
};
const parseColorString = (str) => {
const parsed = parseColor(str);
return {
R: parsed.rgb[0],
G: parsed.rgb[1],
B: parsed.rgb[2]
};
};
const getToleranceFromOpts = (opts) => {
if (!_.hasIn(opts, 'tolerance')) {
return JND;
}
if (opts.strict) {
throw new TypeError('Unable to use "strict" and "tolerance" options together');
}
return opts.tolerance;
};
const prepareOpts = (opts) => {
opts.tolerance = getToleranceFromOpts(opts);
_.defaults(opts, {
ignoreAntialiasing: true,
antialiasingTolerance: 0
});
};
module.exports = exports = function looksSame(reference, image, opts, callback) {
if (!callback) {
callback = opts;
opts = {};
}
prepareOpts(opts);
readPair(reference, image, (error, pair) => {
if (error) {
return callback(error);
}
const first = pair.first;
const second = pair.second;
if (first.width !== second.width || first.height !== second.height) {
return process.nextTick(() => callback(null, false));
}
const comparator = createComparator(first, second, opts);
getDiffPixelsCoords(first, second, comparator, {stopOnFirstFail: true}, (result) => {
callback(null, result.length === 0);
});
});
};
exports.getDiffArea = function(reference, image, opts, callback) {
if (!callback) {
callback = opts;
opts = {};
}
prepareOpts(opts);
readPair(reference, image, (error, pair) => {
if (error) {
return callback(error);
}
const first = pair.first;
const second = pair.second;
if (first.width !== second.width || first.height !== second.height) {
return process.nextTick(() => callback(null, {
width: Math.max(first.width, second.width),
height: Math.max(first.height, second.height),
top: 0,
left: 0
}));
}
const comparator = createComparator(first, second, opts);
getDiffPixelsCoords(first, second, comparator, (result) => {
if (!result.length) {
return callback(null, null);
}
callback(null, getDiffArea(result));
});
});
};
//### ここ変えた！
//exports.createDiff = function saveDiff(opts, callback) {
exports.createDiff = function saveDiff(opts, callback, callback2, callback3) {
const tolerance = getToleranceFromOpts(opts);
readPair(opts.reference, opts.current, (error, result) => {
if (error) {
return callback(error);
}
const diffOptions = {
highlightColor: parseColorString(opts.highlightColor),
// ### 下記１行追加
defaultColor : parseColorString(opts.defaultColor),
writeOriginalDiff: opts.writeOriginalDiff,
comparator: opts.strict ? areColorsSame : makeCIEDE2000Comparator(tolerance)
};
// ### ここ変えた！！
//buildDiffImage(result.first, result.second, diffOptions, (result) => {
buildDiffImage(result.first, result.second, diffOptions, (result, result2, unmatch) => {
// ### ここ変えた！！
//if (opts.diff === undefined) {
// result.createBuffer(callback);
//} else {
// result.save(opts.diff, callback);
//}
if (opts.diff === undefined) {
result.createBuffer(callback2);
} else {
result.save(opts.diff, callback2);
if(opts.diff2 && result2){
result2.save(opts.diff2, callback3);
}
callback(unmatch);
}
});
});
};
exports.colors = (color1, color2, opts) => {
opts = opts || {};
if (opts.tolerance === undefined) {
opts.tolerance = JND;
}
const comparator = makeCIEDE2000Comparator(opts.tolerance);
return comparator({color1, color2});
};
Author And Source
この問題について(大量商用ページの表示結果を比較するために試行錯誤した(２)), 我々は、より多くの情報をここで見つけました https://qiita.com/harhid/items/5780a6c878553917fd84著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .