forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add mechanism for dashboard snapshots (elastic#15463)
* Add mechanism for dashboard snapshots * Adjust wait for render function since it needs to be 2, not gt 0. Should be obsolete when the new render stuff is complete. * resize images using new library so comparisons work across different screen resolutions * use jimp comparison and see if expanding to expanded panel mode helps when comparing across browser/os * Try to ensure window size * Experiment with a smaller window, see if screenshot dimensions change Update screenshot for new window dimensions * Try cover + quality, see what the diffs look like. * Stop trying to get TSVB to pass, try area charts There is a timezone bug with tsvb: elastic#15501 * gah, cover didn't work, check resize * bump render counter to 6, as it should be. As it turns out, the visualization was not done re-rendering to maximized mode * Bump threshold for comparison * reduce down to a single test run * Don't use an environment variable to detect updateBaselines cmd line flag
- Loading branch information
1 parent
756df36
commit 507ecca
Showing
11 changed files
with
147 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import expect from 'expect.js'; | ||
|
||
import { AREA_CHART_VIS_NAME } from '../../page_objects/dashboard_page'; | ||
|
||
|
||
export default function ({ getService, getPageObjects, updateBaselines }) { | ||
const dashboardVisualizations = getService('dashboardVisualizations'); | ||
const PageObjects = getPageObjects(['dashboard', 'header', 'visualize']); | ||
const screenshot = getService('screenshots'); | ||
const remote = getService('remote'); | ||
|
||
describe('dashboard snapshots', function describeIndexTests() { | ||
before(async function () { | ||
await PageObjects.dashboard.initTests(); | ||
await PageObjects.dashboard.preserveCrossAppState(); | ||
await remote.setWindowSize(1000, 500); | ||
}); | ||
|
||
after(async function () { | ||
// avoids any 'Object with id x not found' errors when switching tests. | ||
await PageObjects.header.clickVisualize(); | ||
await PageObjects.visualize.gotoLandingPage(); | ||
await PageObjects.header.clickDashboard(); | ||
await PageObjects.dashboard.gotoDashboardLandingPage(); | ||
}); | ||
|
||
// This one won't work because of https://github.com/elastic/kibana/issues/15501. See if we can get it to work | ||
// once TSVB has timezone support. | ||
it.skip('compare TSVB snapshot', async () => { | ||
await PageObjects.dashboard.gotoDashboardLandingPage(); | ||
await PageObjects.dashboard.clickNewDashboard(); | ||
await PageObjects.dashboard.setTimepickerInDataRange(); | ||
await dashboardVisualizations.createAndAddTSVBVisualization('TSVB'); | ||
await PageObjects.dashboard.saveDashboard('tsvb'); | ||
await PageObjects.header.clickToastOK(); | ||
|
||
await PageObjects.dashboard.clickFullScreenMode(); | ||
await PageObjects.dashboard.toggleExpandPanel(); | ||
|
||
await PageObjects.dashboard.waitForRenderCounter(2); | ||
const percentSimilar = await screenshot.compareAgainstBaseline('tsvb_dashboard', updateBaselines); | ||
|
||
await PageObjects.dashboard.clickExitFullScreenLogoButton(); | ||
|
||
expect(percentSimilar).to.be(0); | ||
}); | ||
|
||
it('compare area chart snapshot', async () => { | ||
await PageObjects.dashboard.gotoDashboardLandingPage(); | ||
await PageObjects.dashboard.clickNewDashboard(); | ||
await PageObjects.dashboard.setTimepickerInDataRange(); | ||
await PageObjects.dashboard.addVisualizations([AREA_CHART_VIS_NAME]); | ||
await PageObjects.dashboard.saveDashboard('area'); | ||
await PageObjects.header.clickToastOK(); | ||
|
||
await PageObjects.dashboard.clickFullScreenMode(); | ||
await PageObjects.dashboard.toggleExpandPanel(); | ||
|
||
await PageObjects.dashboard.waitForRenderCounter(6); | ||
const percentSimilar = await screenshot.compareAgainstBaseline('area_chart', updateBaselines); | ||
|
||
await PageObjects.dashboard.clickExitFullScreenLogoButton(); | ||
|
||
// Testing some OS/browser differnces were shown to cause .009 percent difference. | ||
expect(percentSimilar).to.be.lessThan(0.05); | ||
}); | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import Jimp from 'jimp'; | ||
|
||
export async function comparePngs(actualPath, expectedPath, diffPath, log) { | ||
log.debug(`comparePngs: ${actualPath} vs ${expectedPath}`); | ||
const actual = (await Jimp.read(actualPath)).clone(); | ||
const expected = (await Jimp.read(expectedPath)).clone(); | ||
|
||
if (actual.bitmap.width !== expected.bitmap.width || actual.bitmap.height !== expected.bitmap.height) { | ||
console.log('expected height ' + expected.bitmap.height + ' and width ' + expected.bitmap.width); | ||
console.log('actual height ' + actual.bitmap.height + ' and width ' + actual.bitmap.width); | ||
|
||
const width = Math.min(actual.bitmap.width, expected.bitmap.width); | ||
const height = Math.min(actual.bitmap.height, expected.bitmap.height); | ||
actual.resize(width, height);//, Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.VERTICAL_ALIGN_TOP); | ||
expected.resize(width, height);//, Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.VERTICAL_ALIGN_TOP); | ||
} | ||
|
||
actual.quality(60); | ||
expected.quality(60); | ||
|
||
log.debug(`calculating diff pixels...`); | ||
// Note that this threshold value only affects color comparison from pixel to pixel. It won't have | ||
// any affect when comparing neighboring pixels - so slight shifts, font variations, or "blurry-ness" | ||
// will still show up as diffs, but upping this will not help that. Instead we keep the threshold low, and expect | ||
// some the diffCount to be lower than our own threshold value. | ||
const THRESHOLD = .1; | ||
const { image, percent } = Jimp.diff(actual, expected, THRESHOLD); | ||
log.debug(`percentSimilar: ${percent}`); | ||
if (percent > 0) { | ||
image.write(diffPath); | ||
|
||
// For debugging purposes it'll help to see the resized images and how they compare. | ||
actual.write(actualPath.substring(0, actualPath.length - 4) + '-resized.png'); | ||
expected.write(expectedPath.substring(0, expectedPath.length - 4) + '-resized.png'); | ||
} | ||
return percent; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters