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

By supplying test name to each of the extensibility points, it becomes easier to store images relative to the test itself.
Clean up param list for visual diff command, add new VisualDiffCommandContext type

Author: WickyNilliams

.changeset/gold-needles-jump.md

@@ -0,0 +1,5 @@
+---
+'@web/test-runner-visual-regression': minor
+---
+
+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(