diff --git a/test/runTest/Timeline.js b/test/runTest/Timeline.js index 2151939ee35f76d20a85f2b846d63b78eb8d7f70..b22746807fc7d15ab9df0e625009d4fcaaf2080d 100644 --- a/test/runTest/Timeline.js +++ b/test/runTest/Timeline.js @@ -1,3 +1,5 @@ +const {waitTime} = require('./util'); + module.exports = class Timeline { constructor(page) { @@ -17,7 +19,7 @@ module.exports = class Timeline { } - async runAction(action, playbackSpeed) { + async runAction(action, takeScreenshot, playbackSpeed) { this.stop(); playbackSpeed = playbackSpeed || 1; @@ -45,7 +47,7 @@ module.exports = class Timeline { self._elapsedTime += dTime * playbackSpeed; self._current = current; - await self._update(); + await self._update(takeScreenshot); if (self._currentOpIndex >= self._ops.length) { // Finished resolve(); @@ -66,7 +68,7 @@ module.exports = class Timeline { } } - async _update() { + async _update(takeScreenshot) { let op = this._ops[this._currentOpIndex]; if (op.time > this._elapsedTime) { @@ -85,11 +87,25 @@ module.exports = class Timeline { await page.mouse.up(); break; case 'mousemove': - page.mouse.move(op.x, op.y); + await page.mouse.move(op.x, op.y); + break; + case 'screenshot': + await takeScreenshot(); break; } this._currentOpIndex++; + // If next op is an auto screenshot + let nextOp = this._ops[this._currentOpIndex]; + console.log(nextOp.type); + if (nextOp && nextOp.type === 'screenshot-auto') { + // TODO Configuration time + await waitTime(300); + console.log(Date.now()); + await takeScreenshot(); + console.log(Date.now()); + this._currentOpIndex++; + } } }; \ No newline at end of file diff --git a/test/runTest/cli.js b/test/runTest/cli.js index d0ac3bc0eb1f34bd3405e508a60e36240c9a7453..9f601164976e966cc93e3167b8acf8fe513879b4 100644 --- a/test/runTest/cli.js +++ b/test/runTest/cli.js @@ -5,7 +5,7 @@ const fs = require('fs'); const path = require('path'); const program = require('commander'); const compareScreenshot = require('./compareScreenshot'); -const {testNameFromFile, fileNameFromTest, getVersionDir, buildRuntimeCode} = require('./util'); +const {testNameFromFile, fileNameFromTest, getVersionDir, buildRuntimeCode, waitTime} = require('./util'); const {origin} = require('./config'); const Timeline = require('./Timeline'); @@ -48,19 +48,14 @@ function replaceEChartsVersion(interceptedRequest, version) { } } -function waitTime(time) { - return new Promise(resolve => { - setTimeout(() => { - resolve(); - }, time); - }); -} - -async function takeScreenshot(page, fullPage, fileUrl, desc, version) { +async function takeScreenshot(page, fullPage, fileUrl, desc, version, minor) { let screenshotName = testNameFromFile(fileUrl); if (desc) { screenshotName += '-' + slugify(desc, { replacement: '-', lower: true }); } + if (minor) { + screenshotName += '-' + minor; + } let screenshotPrefix = version ? 'expected' : 'actual'; fse.ensureDirSync(path.join(__dirname, getScreenshotDir())); let screenshotPath = path.join(__dirname, `${getScreenshotDir()}/${screenshotName}-${screenshotPrefix}.png`); @@ -91,14 +86,23 @@ async function runActions(page, testOpt, version, screenshots) { window.scrollTo(x, y); }, action.scrollX, action.scrollY); - await timeline.runAction(action, playbackSpeed); - // Wait for animation finished - // TODO Configuration. - await waitTime(action.wait == null ? 200 : action.wait); + let count = 0; + async function _innerTakeScreenshot() { + const desc = action.desc || action.name; + const {screenshotName, screenshotPath} = await takeScreenshot(page, false, testOpt.fileUrl, desc, version, count++); + screenshots.push({screenshotName, desc, screenshotPath}); + } + await timeline.runAction(action, _innerTakeScreenshot, playbackSpeed); - const desc = action.desc || action.name; - const {screenshotName, screenshotPath} = await takeScreenshot(page, false, testOpt.fileUrl, desc, version); - screenshots.push({screenshotName, desc, screenshotPath}); + if (count === 0) { + // TODO Configuration time + await waitTime(300); + await _innerTakeScreenshot(); + } + + // const desc = action.desc || action.name; + // const {screenshotName, screenshotPath} = await takeScreenshot(page, false, testOpt.fileUrl, desc, version); + // screenshots.push({screenshotName, desc, screenshotPath}); } timeline.stop(); } @@ -132,18 +136,14 @@ async function runTestPage(browser, testOpt, version, runtimeCode) { console.error(e); } + await waitTime(500); // Wait for animation or something else. // Final shot. let desc = 'Full Shot'; const {screenshotName, screenshotPath} = await takeScreenshot(page, true, fileUrl, desc, version); - screenshots.push({screenshotName, desc, screenshotPath}); await runActions(page, testOpt, version, screenshots); - if (!screenshots.length) { - waitTime(500); // Wait for animation or something else. - } - await page.close(); return { diff --git a/test/runTest/client/client.css b/test/runTest/client/client.css index 1991711225cb2ea3058832e651864bc13e1c346b..05d3ed98831eabcbc2bd6ef26560341b9237561c 100644 --- a/test/runTest/client/client.css +++ b/test/runTest/client/client.css @@ -108,10 +108,14 @@ } .test-screenshots { - margin-top: 80px; + margin-top: 20px; padding: 0 20px; } +.test-screenshots h4 { + margin-top: 60px; +} + .test-screenshots img { /* height: 200px; */ width: 100%; diff --git a/test/runTest/client/index.html b/test/runTest/client/index.html index 07880e0f9f2fe0619d993d21bb66fc5609314c4a..7f0ccd09d2c41ab18a6f6fa03aa205c3db2adfc9 100644 --- a/test/runTest/client/index.html +++ b/test/runTest/client/index.html @@ -69,11 +69,14 @@ Record Interaction -
-

{{result.desc || result.name}}

+
+ +

+ {{result.desc || result.name}} +

- +
Expected
@@ -82,7 +85,7 @@ - +
Actual
@@ -91,7 +94,7 @@ - +
Diff({{result.diffRatio.toFixed(4)}})
diff --git a/test/runTest/recorder/index.html b/test/runTest/recorder/index.html index 79e9a4ed4b945bc7152ce8a7753dc498749b5df0..3707cda196e580091d8bcb1e78fd027eec152942 100644 --- a/test/runTest/recorder/index.html +++ b/test/runTest/recorder/index.html @@ -8,7 +8,7 @@