OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Fix Cypress outfit snapshot positioning (a hack!)

Browse source
This commit is contained in:
Emi Matchu 2021-05-04 12:28:49 -07:00
parent 56e1ce595c
commit 18a3ddfbad
3 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
cypress/integration/WardrobePage/__image_snapshots__/WardrobePage Outfit saving Saves a Zafara Tourist with worn and closeted items #0.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 316 KiB

After

Width:  |  Height:  |  Size: 363 KiB

BIN
cypress/integration/WardrobePage/__image_snapshots__/WardrobePage Outfit saving Saves a simple Blue Acara #0.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 56 KiB

22
cypress/integration/WardrobePage/page.js
View file

@ -15,8 +15,26 @@ export function getPosePickerOption(label, options) {
}
export function getOutfitPreview() {
return cy.get("[data-test-id=wardrobe-outfit-preview]:not([data-loading])", {
// HACK: To return the screenshottable preview *area* (which is what this
// function is currently used for), we select the first img tag. That's
// because the app relies on CSS `object-fit` to get images to position
// correctly, rather than styling the container. This will still
// screenshot the full preview, because Cypress can't separate the
// layers! It just screenshots the bounded area.
//
// TODO: The way the layer positioning works is a bit fragile tbh, and the
// canvases already do math; it could make sense to just have the
// container use the same math, or some clever CSS?
//
// NOTE: The tests need to run in a 600x600 actual window, or else the
// snapshot will come out smaller. This because our snapshot plugin
// performs its snapshot within the window's natural area, rather than
// the simulated area that most tests run in.
return cy
.get("[data-test-id=wardrobe-outfit-preview]:not([data-loading])", {
// A bit of an extra-long timeout, to await both server data and image data
timeout: 15000,
});
})
.get("img")
.first();
}