You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/04/08 13:23:59 UTC
[echarts] branch optimize-visual-test-screenshot created (now
d028e83)
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a change to branch optimize-visual-test-screenshot
in repository https://gitbox.apache.org/repos/asf/echarts.git.
at d028e83 test: use webp to reduce screenshot storage
This branch includes the following new commits:
new d028e83 test: use webp to reduce screenshot storage
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 01/01: test: use webp to reduce screenshot storage
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch optimize-visual-test-screenshot
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit d028e83161683b0d988555be59cc72e756d1c44a
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Apr 8 21:21:53 2021 +0800
test: use webp to reduce screenshot storage
---
package.json | 1 +
test/runTest/blacklist.js | 4 ++
test/runTest/cli.js | 85 +++++++++++++++++++++++++++++++++++-------
test/runTest/client/index.html | 10 ++---
test/runTest/server.js | 28 ++++++++++----
test/runTest/store.js | 9 ++---
test/smooth.html | 24 ------------
7 files changed, 105 insertions(+), 56 deletions(-)
diff --git a/package.json b/package.json
index 6d1b0e1..87c1e1b 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
"canvas": "^2.6.0",
"chalk": "^3.0.0",
"commander": "2.11.0",
+ "cwebp-bin": "^6.1.1",
"dtslint": "^4.0.5",
"esbuild": "^0.8.39",
"eslint": "^7.15.0",
diff --git a/test/runTest/blacklist.js b/test/runTest/blacklist.js
index 86da51a..f5a030e 100644
--- a/test/runTest/blacklist.js
+++ b/test/runTest/blacklist.js
@@ -31,6 +31,10 @@ module.exports.blacklist = [
'scatter-gps.html',
'webkit-dep.html',
+ // Mobile
+ 'mobileBench.html',
+ 'touch-test.html',
+
// Image size not match
'symbol2.html',
diff --git a/test/runTest/cli.js b/test/runTest/cli.js
index 2076710..c7bbe91 100644
--- a/test/runTest/cli.js
+++ b/test/runTest/cli.js
@@ -27,6 +27,8 @@ const compareScreenshot = require('./compareScreenshot');
const {testNameFromFile, fileNameFromTest, getVersionDir, buildRuntimeCode, waitTime, getEChartsTestFileName} = require('./util');
const {origin} = require('./config');
const Timeline = require('./Timeline');
+const cwebpBin = require('cwebp-bin');
+const { execFile } = require('child_process');
// Handling input arguments.
program
@@ -76,8 +78,29 @@ function replaceEChartsVersion(interceptedRequest, version) {
}
}
-async function takeScreenshot(page, fullPage, fileUrl, desc, isExpected, minor) {
+async function convertToWebP(filePath, lossless) {
+ const webpPath = filePath.replace(/\.png$/, '.webp');
+ return new Promise((resolve, reject) => {
+ execFile(cwebpBin, [
+ filePath,
+ '-o', webpPath,
+ ...(lossless ? ['-lossless'] : ['-q', 75])
+ ], (err) => {
+ if (err) {
+ reject(err);
+ }
+ else {
+ resolve(webpPath);
+ }
+ });
+ });
+}
+
+async function takeScreenshot(page, fullPage, fileUrl, desc, useSVG, isExpected, minor) {
let screenshotName = testNameFromFile(fileUrl);
+ if (useSVG) {
+ screenshotName += '-_svg_render_';
+ }
if (desc) {
screenshotName += '-' + slugify(desc, { replacement: '-', lower: true });
}
@@ -92,7 +115,13 @@ async function takeScreenshot(page, fullPage, fileUrl, desc, isExpected, minor)
fullPage
});
- return {screenshotName, screenshotPath};
+ const webpScreenshotPath = await convertToWebP(screenshotPath);
+
+ return {
+ screenshotName,
+ screenshotPath: webpScreenshotPath,
+ rawScreenshotPath: screenshotPath
+ };
}
async function runActions(page, testOpt, isExpected, screenshots) {
@@ -120,8 +149,17 @@ async function runActions(page, testOpt, isExpected, screenshots) {
return;
}
const desc = action.desc || action.name;
- const {screenshotName, screenshotPath} = await takeScreenshot(page, false, testOpt.fileUrl, desc, isExpected, count++);
- screenshots.push({screenshotName, desc, screenshotPath});
+ const {
+ screenshotName,
+ screenshotPath,
+ rawScreenshotPath
+ } = await takeScreenshot(page, false, testOpt.fileUrl, desc, testOpt.useSVG, isExpected, count++);
+ screenshots.push({
+ screenshotName,
+ desc,
+ screenshotPath,
+ rawScreenshotPath
+ });
}
await timeline.runAction(action, _innerTakeScreenshot, playbackSpeed);
@@ -171,8 +209,17 @@ async function runTestPage(browser, testOpt, version, runtimeCode, isExpected) {
await page.mouse.move(0, 0);
if (program.save) {
let desc = 'Full Shot';
- const {screenshotName, screenshotPath} = await takeScreenshot(page, true, fileUrl, desc, isExpected);
- screenshots.push({screenshotName, desc, screenshotPath});
+ const {
+ screenshotName,
+ screenshotPath,
+ rawScreenshotPath
+ } = await takeScreenshot(page, true, fileUrl, desc, testOpt.useSVG, isExpected);
+ screenshots.push({
+ screenshotName,
+ desc,
+ screenshotPath,
+ rawScreenshotPath
+ });
}
await runActions(page, testOpt, isExpected, screenshots);
@@ -216,31 +263,41 @@ async function runTest(browser, testOpt, runtimeCode, expectedVersion, actualVer
const screenshots = [];
let idx = 0;
for (let shot of expectedResult.screenshots) {
- let expected = shot;
- let actual = actualResult.screenshots[idx++];
- let result = {
+ const expected = shot;
+ const actual = actualResult.screenshots[idx++];
+ const result = {
actual: getClientRelativePath(actual.screenshotPath),
expected: getClientRelativePath(expected.screenshotPath),
name: actual.screenshotName,
desc: actual.desc
};
try {
- let {diffRatio, diffPNG} = await compareScreenshot(
- expected.screenshotPath,
- actual.screenshotPath
+ const {diffRatio, diffPNG} = await compareScreenshot(
+ expected.rawScreenshotPath,
+ actual.rawScreenshotPath
);
- let diffPath = `${path.resolve(__dirname, getScreenshotDir())}/${shot.screenshotName}-diff.png`;
+ const diffPath = `${path.resolve(__dirname, getScreenshotDir())}/${shot.screenshotName}-diff.png`;
await writePNG(diffPNG, diffPath);
+ const diffWebpPath = await convertToWebP(diffPath);
- result.diff = getClientRelativePath(diffPath);
+ result.diff = getClientRelativePath(diffWebpPath);
result.diffRatio = diffRatio;
+
+ // Remove png files
+ try {
+ fs.unlinkSync(actual.rawScreenshotPath);
+ fs.unlinkSync(expected.rawScreenshotPath);
+ fs.unlinkSync(diffPath);
+ }
+ catch (e) {}
}
catch(e) {
result.diff = '';
result.diffRatio = 1;
console.log(e);
}
+
screenshots.push(result);
}
diff --git a/test/runTest/client/index.html b/test/runTest/client/index.html
index d58bd83..49c498c 100644
--- a/test/runTest/client/index.html
+++ b/test/runTest/client/index.html
@@ -177,7 +177,7 @@ under the License.
<span>Expected - {{currentTest.expectedVersion || ''}}</span>
<i title="Preview" class="el-icon-view preview" @click="preview(currentTest, 'expected')"></i>
</div>
- <el-image :src="result.expected" :preview-src-list="[result.expected]"></el-image>
+ <el-image fit="cover" :src="result.expected" :preview-src-list="[result.expected]"></el-image>
</el-card>
</el-col>
@@ -187,7 +187,7 @@ under the License.
<span>Actual - {{currentTest.actualVersion || ''}}</span>
<i title="Preview" class="el-icon-view preview" @click="preview(currentTest, 'actual')"></i>
</div>
- <el-image :src="result.actual" :preview-src-list="[result.actual]"></el-image>
+ <el-image fit="cover" :src="result.actual" :preview-src-list="[result.actual]"></el-image>
</el-card>
</el-col>
@@ -196,7 +196,7 @@ under the License.
<div slot="header" class="clearfix">
<span>Diff - {{result.diffRatio.toFixed(4)}}</span>
</div>
- <el-image :src="result.diff" :preview-src-list="[result.diff]"></el-image>
+ <el-image fit="cover" :src="result.diff" :preview-src-list="[result.diff]"></el-image>
</el-card>
</el-col>
</el-row>
@@ -253,8 +253,8 @@ under the License.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- Element UI -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.11.1/lib/theme-chalk/index.css">
-<script src="https://cdn.jsdelivr.net/npm/element-ui@2.11.1/lib/index.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css">
+<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js"></script>
<script src="client.js"></script>
diff --git a/test/runTest/server.js b/test/runTest/server.js
index 688b4c9..ec2b4e0 100644
--- a/test/runTest/server.js
+++ b/test/runTest/server.js
@@ -207,9 +207,24 @@ async function start() {
io.of('/client').on('connect', async socket => {
await updateTestsList();
- socket.emit('update', {
- tests: getTestsList(),
- running: runningThreads.length > 0
+ function abortTests() {
+ stopRunningTests();
+ io.of('/client').emit('abort');
+ aborted = true;
+ }
+
+ function emitUpdatedList() {
+ socket.emit('update', {
+ tests: getTestsList(),
+ running: runningThreads.length > 0
+ });
+ }
+
+ emitUpdatedList();
+
+ socket.on('fetch', () => {
+ abortTests();
+ emitUpdatedList();
});
socket.on('run', async data => {
@@ -256,11 +271,8 @@ async function start() {
console.log('Aborted!');
}
});
- socket.on('stop', () => {
- stopRunningTests();
- io.of('/client').emit('abort');
- aborted = true;
- });
+
+ socket.on('stop', abortTests);
socket.emit('versions', versions);
});
diff --git a/test/runTest/store.js b/test/runTest/store.js
index ae8c0b2..0a956b9 100644
--- a/test/runTest/store.js
+++ b/test/runTest/store.js
@@ -93,7 +93,7 @@ module.exports.updateTestsList = async function (setPendingTestToUnsettled) {
_tests = [];
}
// Find if there is new html file
- let files = await util.promisify(glob)('**.html', { cwd: path.resolve(__dirname, '../') });
+ const files = await util.promisify(glob)('**.html', { cwd: path.resolve(__dirname, '../') });
files.forEach(fileUrl => {
if (blacklist.includes(fileUrl)) {
return;
@@ -102,15 +102,15 @@ module.exports.updateTestsList = async function (setPendingTestToUnsettled) {
return;
}
- let test = new Test(fileUrl);
+ const test = new Test(fileUrl);
test.ignoreSVG = SVGBlacklist.includes(fileUrl);
_tests.push(test);
_testsMap[fileUrl] = test;
});
- let actionsMetaData = {};
- let metaPath = path.join(__dirname, 'actions/__meta__.json');
+ const actionsMetaData = {};
+ const metaPath = path.join(__dirname, 'actions/__meta__.json');
try {
actionsMetaData = JSON.parse(fs.readFileSync(metaPath, 'utf-8'));
}
@@ -135,7 +135,6 @@ module.exports.mergeTestsResults = function (testsResults) {
};
module.exports.updateActionsMeta = function (testName, actions) {
- let metaData;
let metaPath = path.join(__dirname, 'actions/__meta__.json');
try {
metaData = JSON.parse(fs.readFileSync(metaPath, 'utf-8'));
diff --git a/test/smooth.html b/test/smooth.html
index 3c70bc8..94215bc 100644
--- a/test/smooth.html
+++ b/test/smooth.html
@@ -60,15 +60,6 @@ under the License.
var option = {
color: ['#4ea397', '#d0648a', '#f5b841'],
animation: false,
- title: {
- text: '光滑曲线新老算法对比',
- left: '50%',
- textAlign: 'center'
- },
- legend: {
- top: 30,
- data: ['非单调光滑（老算法）','单调光滑（新算法）', '不光滑']
- },
xAxis: {
type: 'value'
},
@@ -80,7 +71,6 @@ under the License.
right: 30
},
series: [{
- name: '非单调光滑（老算法）',
type: 'line',
smoothMonotone: 'none',
smooth: true,
@@ -94,20 +84,6 @@ under the License.
opacity: 0.4
}
}, {
- name: '单调光滑（新算法）',
- type: 'line',
- smooth: true,
- showSymbol: false,
- connectNulls: true,
- data: data,
- lineStyle: {
- width: 1
- },
- areaStyle: {
- opacity: 0.4
- }
- }, {
- name: '不光滑',
type: 'line',
smooth: false,
symbol: 'circle',
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org