feat(test-runner-visual-regression): add testName to GetNameArgs (#1657)

Author: WickyNilliams

.changeset/gold-needles-jump.md

@@ -0,0 +1,5 @@
+---
+'@web/test-runner-visual-regression': patch
+---
+
+Supply testFile to extensibility points in visualDiffPlugin, making it easy to store snapshot images alongside test files

packages/test-runner-visual-regression/README.md

@@ -76,6 +76,7 @@ type PixelMatchOptions = PixelMatchParams[5];
 export interface GetNameArgs {
   browser: string;
   name: string;
+  testFile: string;
 }
 
 export interface ImageArgs {

packages/test-runner-visual-regression/src/config.ts

@@ -11,6 +11,7 @@ type PixelMatchOptions = PixelMatchParams[5];
 export interface GetNameArgs {
   browser: string;
   name: string;
+  testFile: string;
 }
 
 export interface ImageArgs {

packages/test-runner-visual-regression/src/visualDiffCommand.ts

@@ -17,14 +17,19 @@ export interface VisualDiffCommandResult {
   passed: boolean;
 }
 
+export interface VisualDiffCommandContext {
+  browser: string;
+  testFile: string;
+}
+
 export async function visualDiffCommand(
   options: VisualRegressionPluginOptions,
   image: Buffer,
-  browser: string,
   name: string,
+  { browser, testFile }: VisualDiffCommandContext,
 ): Promise<VisualDiffCommandResult> {
   const baseDir = path.resolve(options.baseDir);
-  const baselineName = options.getBaselineName({ browser, name });
+  const baselineName = options.getBaselineName({ browser, name, testFile });
 
   const baselineImage = await options.getBaseline({
     filePath: resolveImagePath(baseDir, baselineName),
@@ -42,8 +47,8 @@ export async function visualDiffCommand(
     return { diffPercentage: -1, passed: true };
   }
 
-  const diffName = options.getDiffName({ browser, name });
-  const failedName = options.getFailedName({ browser, name });
+  const diffName = options.getDiffName({ browser, name, testFile });
+  const failedName = options.getFailedName({ browser, name, testFile });
   const diffFilePath = resolveImagePath(baseDir, diffName);
 
   const saveFailed = async () => {

packages/test-runner-visual-regression/src/visualRegressionPlugin.ts

@@ -4,7 +4,11 @@ import type { PlaywrightLauncher } from '@web/test-runner-playwright';
 import type { WebdriverLauncher } from '@web/test-runner-webdriver';
 
 import { defaultOptions, VisualRegressionPluginOptions } from './config';
-import { visualDiffCommand, VisualDiffCommandResult } from './visualDiffCommand';
+import {
+  visualDiffCommand,
+  VisualDiffCommandContext,
+  VisualDiffCommandResult,
+} from './visualDiffCommand';
 import { VisualRegressionError } from './VisualRegressionError';
 
 interface Payload {
@@ -49,6 +53,11 @@ export function visualRegressionPlugin(
             return;
           }
 
+          const context: VisualDiffCommandContext = {
+            testFile: session.testFile,
+            browser: session.browser.name,
+          };
+
           if (session.browser.type === 'puppeteer') {
             const browser = session.browser as ChromeLauncher;
             const page = browser.getPage(session.id);
@@ -67,7 +76,7 @@ export function visualRegressionPlugin(
             }
 
             const screenshot = (await element.screenshot({ encoding: 'binary' })) as Buffer;
-            return visualDiffCommand(mergedOptions, screenshot, session.browser.name, payload.name);
+            return visualDiffCommand(mergedOptions, screenshot, payload.name, context);
           }
 
           if (session.browser.type === 'playwright') {
@@ -88,7 +97,7 @@ export function visualRegressionPlugin(
             }
 
             const screenshot = await element.screenshot();
-            return visualDiffCommand(mergedOptions, screenshot, session.browser.name, payload.name);
+            return visualDiffCommand(mergedOptions, screenshot, payload.name, context);
           }
 
           if (session.browser.type === 'webdriver') {
@@ -106,7 +115,7 @@ export function visualRegressionPlugin(
             `;
 
             const screenshot = await browser.takeScreenshot(session.id, locator);
-            return visualDiffCommand(mergedOptions, screenshot, session.browser.name, payload.name);
+            return visualDiffCommand(mergedOptions, screenshot, payload.name, context);
           }
 
           throw new Error(