US156331 - Add ability to indicate the actual element to use for size calculations for the screenshot

src/browser/vdiff.js

@@ -19,6 +19,13 @@ mocha.setup({
 });
 /* eslint-enable */
 
+function findTarget(elem) {
+	if (!elem.shadowRoot) return elem;
+	const nestedTarget = elem.shadowRoot.querySelector('.vdiff-target');
+	if (!nestedTarget) return elem;
+	return findTarget(nestedTarget);
+}
+
 async function ScreenshotAndCompare(opts) {
 
 	if (window.d2lTest) {
@@ -27,7 +34,11 @@ async function ScreenshotAndCompare(opts) {
 	}
 
 	const name = this.test.fullTitle();
-	const rect = this.elem === document ? null : this.elem.getBoundingClientRect();
+	let rect = null;
+	if (this.elem !== document) {
+		const target = findTarget(this.elem);
+		rect = target.getBoundingClientRect();
+	}
 	const slowDuration = this.test.slow();
 	let result = await executeServerCommand('brightspace-visual-diff-compare', { name, rect, slowDuration, opts });
 	if (result.resizeRequired) {

src/server/wtr-config.js

@@ -196,6 +196,7 @@ export class WTRConfig {
 		config.groups.forEach(g => g.browsers = this.getBrowsers(g.browsers));
 
 		if (open || watch) {
+			config.testsFinishTimeout = 15 * 60 * 1000;
 			config.plugins ??= [];
 			const currentPattern = files || config.groups.find(g => g.name === group)?.files;
 

test/browser/element.vdiff.js

@@ -1,6 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { defineCE, expect, fixture, hoverElem } from '../../src/browser/index.js';
 import { executeServerCommand } from '@web/test-runner-commands';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 const elementTag = defineCE(
 	class extends LitElement {
@@ -39,6 +40,40 @@ const elementTag = defineCE(
 	}
 );
 
+const fixedElementTag = defineCE(
+	class extends LitElement {
+		static get styles() {
+			return css`
+				div {
+					background-color: white;
+					border: 1px solid purple;
+					border-radius: 8px;
+					box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+					box-sizing: border-box;
+					position: fixed;
+				}
+			`;
+		}
+		render() {
+			return html`
+				<div class="vdiff-target">
+					<slot></slot>
+				</div>
+			`;
+		}
+	}
+);
+
+const nestedElementTag = defineCE(
+	class extends LitElement {
+		render() {
+			return html`${unsafeHTML(`
+				<${fixedElementTag} class="vdiff-target"><${elementTag} text="Visual Difference"></${elementTag}></${fixedElementTag}>
+			`)}`;
+		}
+	}
+);
+
 describe('element-matches', () => {
 	[
 		{ name: 'default' },
@@ -58,6 +93,16 @@ describe('element-matches', () => {
 		await fixture(`<${elementTag} text="Visual Difference"></${elementTag}>`, { viewport: { width: 500, height: 500 } });
 		await expect(document).to.be.golden();
 	});
+
+	it('true size', async() => {
+		const elem = await fixture(`<${fixedElementTag}><${elementTag} text="Visual Difference"></${elementTag}></${fixedElementTag}>`, { viewport: { width: 500, height: 500 } });
+		await expect(elem).to.be.golden();
+	});
+
+	it('nested true size', async() => {
+		const elem = await fixture(`<${nestedElementTag}></${nestedElementTag}>`, { viewport: { width: 500, height: 500 } });
+		await expect(elem).to.be.golden();
+	});
 });
 
 describe('element-different', () => {