imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Stabilise screenshot tests (#12835)

Browse source 
* Hide tooltips in screenshot tests by default

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Blank out dialog backgrounds by default

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Crop image-upload-preview screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Stabilise width of masked user is in user profile

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tidy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-30 09:20:07 +01:00 • committed by GitHub
parent 077549e412
commit a1897583b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 54 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

78
playwright/element-web-test.ts
View file

@ -313,8 +313,8 @@ export const expect = baseExpect.extend({
name: `${string}.png`,
options?: {
mask?: Array<Locator>;
omitBackground?: boolean;
hideTooltips?: boolean;
includeDialogBackground?: boolean;
showTooltips?: boolean;
timeout?: number;
css?: string;
},
@ -324,45 +324,57 @@ export const expect = baseExpect.extend({
const page = "page" in receiver ? receiver.page() : receiver;
let hideTooltipsCss: string | undefined;
if (options?.hideTooltips) {
hideTooltipsCss = `
let css = `
.mx_MessagePanel_myReadMarker {
display: none !important;
}
.mx_RoomView_MessageList {
height: auto !important;
}
.mx_DisambiguatedProfile_displayName {
color: var(--cpd-color-blue-1200) !important;
}
.mx_BaseAvatar {
background-color: var(--cpd-color-fuchsia-1200) !important;
color: white !important;
}
.mx_ReplyChain {
border-left-color: var(--cpd-color-blue-1200) !important;
}
/* Avoid flakiness from hover styling */
.mx_ReplyChain_show {
color: var(--cpd-color-text-secondary) !important;
}
/* Use monospace font for timestamp for consistent mask width */
.mx_MessageTimestamp {
font-family: Inconsolata !important;
}
`;
if (!options?.showTooltips) {
css += `
.mx_Tooltip_visible {
visibility: hidden !important;
}
`;
}
if (!options?.includeDialogBackground) {
css += `
/* Make the dialog backdrop solid so any dialog screenshots don't show any components behind them */
.mx_Dialog_background {
background-color: #030c1b !important;
}
`;
}
if (options?.css) {
css += options.css;
}
// We add a custom style tag before taking screenshots
const style = (await page.addStyleTag({
content: `
.mx_MessagePanel_myReadMarker {
display: none !important;
}
.mx_RoomView_MessageList {
height: auto !important;
}
.mx_DisambiguatedProfile_displayName {
color: var(--cpd-color-blue-1200) !important;
}
.mx_BaseAvatar {
background-color: var(--cpd-color-fuchsia-1200) !important;
color: white !important;
}
.mx_ReplyChain {
border-left-color: var(--cpd-color-blue-1200) !important;
}
/* Avoid flakiness from hover styling */
.mx_ReplyChain_show {
color: var(--cpd-color-text-secondary) !important;
}
/* Use monospace font for timestamp for consistent mask width */
.mx_MessageTimestamp {
font-family: Inconsolata !important;
}
${hideTooltipsCss ?? ""}
${options?.css ?? ""}
`,
content: css,
})) as ElementHandle<Element>;
const screenshotName = sanitizeFilePathBeforeExtension(name);