playwright 1.54.0-alpha-2025-07-08 → 1.54.0-beta-1752075907000

package/README.md

@@ -1,6 +1,6 @@
 # 🎭 Playwright
 
-[![npm version](https://img.shields.io/npm/v/playwright.svg)](https://www.npmjs.com/package/playwright) <!-- GEN:chromium-version-badge -->[![Chromium version](https://img.shields.io/badge/chromium-139.0.7258.5-blue.svg?logo=google-chrome)](https://www.chromium.org/Home)<!-- GEN:stop --> <!-- GEN:firefox-version-badge -->[![Firefox version](https://img.shields.io/badge/firefox-140.0.2-blue.svg?logo=firefoxbrowser)](https://www.mozilla.org/en-US/firefox/new/)<!-- GEN:stop --> <!-- GEN:webkit-version-badge -->[![WebKit version](https://img.shields.io/badge/webkit-18.5-blue.svg?logo=safari)](https://webkit.org/)<!-- GEN:stop --> [![Join Discord](https://img.shields.io/badge/join-discord-informational)](https://aka.ms/playwright/discord)
+[![npm version](https://img.shields.io/npm/v/playwright.svg)](https://www.npmjs.com/package/playwright) <!-- GEN:chromium-version-badge -->[![Chromium version](https://img.shields.io/badge/chromium-139.0.7258.5-blue.svg?logo=google-chrome)](https://www.chromium.org/Home)<!-- GEN:stop --> <!-- GEN:firefox-version-badge -->[![Firefox version](https://img.shields.io/badge/firefox-140.0.2-blue.svg?logo=firefoxbrowser)](https://www.mozilla.org/en-US/firefox/new/)<!-- GEN:stop --> <!-- GEN:webkit-version-badge -->[![WebKit version](https://img.shields.io/badge/webkit-26.0-blue.svg?logo=safari)](https://webkit.org/)<!-- GEN:stop --> [![Join Discord](https://img.shields.io/badge/join-discord-informational)](https://aka.ms/playwright/discord)
 
 ## [Documentation](https://playwright.dev) | [API reference](https://playwright.dev/docs/api/class-playwright)
 
@@ -9,7 +9,7 @@ Playwright is a framework for Web Testing and Automation. It allows testing [Chr
 |          | Linux | macOS | Windows |
 |   :---   | :---: | :---: | :---:   |
 | Chromium <!-- GEN:chromium-version -->139.0.7258.5<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
-| WebKit <!-- GEN:webkit-version -->18.5<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
+| WebKit <!-- GEN:webkit-version -->26.0<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 | Firefox <!-- GEN:firefox-version -->140.0.2<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 
 Headless execution is supported for all browsers on all platforms. Check out [system requirements](https://playwright.dev/docs/intro#system-requirements) for details.

package/lib/common/test.js

@@ -237,7 +237,11 @@ class TestCase extends Base {
     return status === "expected" || status === "flaky" || status === "skipped";
   }
   get tags() {
-    return this._grepTitle().match(/@[\S]+/g) || [];
+    const titleTags = this._grepBaseTitlePath().join(" ").match(/@[\S]+/g) || [];
+    return [
+      ...titleTags,
+      ...this._tags
+    ];
   }
   _serialize() {
     return {
@@ -298,10 +302,14 @@ class TestCase extends Base {
     this.results.push(result);
     return result;
   }
-  _grepTitle() {
+  _grepBaseTitlePath() {
     const path = [];
     this.parent._collectGrepTitlePath(path);
     path.push(this.title);
+    return path;
+  }
+  _grepTitleWithTags() {
+    const path = this._grepBaseTitlePath();
     path.push(...this._tags);
     return path.join(" ");
   }

package/lib/matchers/toMatchSnapshot.js

@@ -60,6 +60,7 @@ class SnapshotHelper {
       this.options = options;
       name = nameFromOptions;
     }
+    this.name = Array.isArray(name) ? name.join(import_path.default.sep) : name || "";
     const resolvedPaths = testInfo._resolveSnapshotPaths(matcherName === "toHaveScreenshot" ? "screenshot" : "snapshot", name, "updateSnapshotIndex", anonymousSnapshotExtension);
     this.expectedPath = resolvedPaths.absoluteSnapshotPath;
     this.attachmentBaseName = resolvedPaths.relativeOutputPath;
@@ -140,26 +141,25 @@ class SnapshotHelper {
   }
   handleDifferent(actual, expected, previous, diff, header, diffError, log, step) {
     const output = [`${header}${indent(diffError, "  ")}`];
+    if (this.name) {
+      output.push("");
+      output.push(`  Snapshot: ${this.name}`);
+    }
     if (expected !== void 0) {
       writeFileSync(this.legacyExpectedPath, expected);
       step?._attachToStep({ name: (0, import_util.addSuffixToFilePath)(this.attachmentBaseName, "-expected"), contentType: this.mimeType, path: this.expectedPath });
-      output.push(`
-Expected: ${import_utils2.colors.yellow(this.expectedPath)}`);
     }
     if (previous !== void 0) {
       writeFileSync(this.previousPath, previous);
       step?._attachToStep({ name: (0, import_util.addSuffixToFilePath)(this.attachmentBaseName, "-previous"), contentType: this.mimeType, path: this.previousPath });
-      output.push(`Previous: ${import_utils2.colors.yellow(this.previousPath)}`);
     }
     if (actual !== void 0) {
       writeFileSync(this.actualPath, actual);
       step?._attachToStep({ name: (0, import_util.addSuffixToFilePath)(this.attachmentBaseName, "-actual"), contentType: this.mimeType, path: this.actualPath });
-      output.push(`Received: ${import_utils2.colors.yellow(this.actualPath)}`);
     }
     if (diff !== void 0) {
       writeFileSync(this.diffPath, diff);
       step?._attachToStep({ name: (0, import_util.addSuffixToFilePath)(this.attachmentBaseName, "-diff"), contentType: this.mimeType, path: this.diffPath });
-      output.push(`    Diff: ${import_utils2.colors.yellow(this.diffPath)}`);
     }
     if (log?.length)
       output.push((0, import_util.callLogText)(log));

package/lib/reporters/base.js

@@ -307,8 +307,9 @@ function formatFailure(screen, config, test, index) {
       resultLines.push(screen.colors.gray(separator(screen, `    Retry #${result.retry}`)));
     }
     resultLines.push(...errors.map((error) => "\n" + error.message));
-    for (let i = 0; i < result.attachments.length; ++i) {
-      const attachment = result.attachments[i];
+    const attachmentGroups = groupAttachments(result.attachments);
+    for (let i = 0; i < attachmentGroups.length; ++i) {
+      const attachment = attachmentGroups[i];
       if (attachment.name === "error-context" && attachment.path) {
         resultLines.push("");
         resultLines.push(screen.colors.dim(`    Error Context: ${relativeFilePath(screen, config, attachment.path)}`));
@@ -320,15 +321,30 @@ function formatFailure(screen, config, test, index) {
       if (!attachment.path && !hasPrintableContent)
         continue;
       resultLines.push("");
-      resultLines.push(screen.colors.cyan(separator(screen, `    attachment #${i + 1}: ${attachment.name} (${attachment.contentType})`)));
-      if (attachment.path) {
-        const relativePath = import_path.default.relative(process.cwd(), attachment.path);
-        resultLines.push(screen.colors.cyan(`    ${relativePath}`));
+      resultLines.push(screen.colors.dim(separator(screen, `    attachment #${i + 1}: ${screen.colors.bold(attachment.name)} (${attachment.contentType})`)));
+      if (attachment.actual?.path) {
+        if (attachment.expected?.path) {
+          const expectedPath = relativeFilePath(screen, config, attachment.expected.path);
+          resultLines.push(screen.colors.dim(`    Expected: ${expectedPath}`));
+        }
+        const actualPath = relativeFilePath(screen, config, attachment.actual.path);
+        resultLines.push(screen.colors.dim(`    Received: ${actualPath}`));
+        if (attachment.previous?.path) {
+          const previousPath = relativeFilePath(screen, config, attachment.previous.path);
+          resultLines.push(screen.colors.dim(`    Previous: ${previousPath}`));
+        }
+        if (attachment.diff?.path) {
+          const diffPath = relativeFilePath(screen, config, attachment.diff.path);
+          resultLines.push(screen.colors.dim(`    Diff:     ${diffPath}`));
+        }
+      } else if (attachment.path) {
+        const relativePath = relativeFilePath(screen, config, attachment.path);
+        resultLines.push(screen.colors.dim(`    ${relativePath}`));
         if (attachment.name === "trace") {
           const packageManagerCommand = (0, import_utils.getPackageManagerExecCommand)();
-          resultLines.push(screen.colors.cyan(`    Usage:`));
+          resultLines.push(screen.colors.dim(`    Usage:`));
           resultLines.push("");
-          resultLines.push(screen.colors.cyan(`        ${packageManagerCommand} playwright show-trace ${quotePathIfNeeded(relativePath)}`));
+          resultLines.push(screen.colors.dim(`        ${packageManagerCommand} playwright show-trace ${quotePathIfNeeded(relativePath)}`));
           resultLines.push("");
         }
       } else {
@@ -337,10 +353,10 @@ function formatFailure(screen, config, test, index) {
           if (text.length > 300)
             text = text.slice(0, 300) + "...";
           for (const line of text.split("\n"))
-            resultLines.push(screen.colors.cyan(`    ${line}`));
+            resultLines.push(screen.colors.dim(`    ${line}`));
         }
       }
-      resultLines.push(screen.colors.cyan(separator(screen, "   ")));
+      resultLines.push(screen.colors.dim(separator(screen, "   ")));
     }
     lines.push(...resultLines);
   }
@@ -460,7 +476,7 @@ function separator(screen, text = "") {
   if (text)
     text += " ";
   const columns = Math.min(100, screen.ttyWidth || 100);
-  return text + screen.colors.dim("\u2500".repeat(Math.max(0, columns - text.length)));
+  return text + screen.colors.dim("\u2500".repeat(Math.max(0, columns - (0, import_util.stripAnsiEscapes)(text).length)));
 }
 function indent(lines, tab) {
   return lines.replace(/^(?=.+$)/gm, tab);
@@ -537,6 +553,37 @@ function resolveOutputFile(reporterName, options) {
   outputFile = import_path.default.resolve(outputDir, reportName);
   return { outputFile, outputDir };
 }
+function groupAttachments(attachments) {
+  const result = [];
+  const attachmentsByPrefix = /* @__PURE__ */ new Map();
+  for (const attachment of attachments) {
+    if (!attachment.path) {
+      result.push(attachment);
+      continue;
+    }
+    const match = attachment.name.match(/^(.*)-(expected|actual|diff|previous)(\.[^.]+)?$/);
+    if (!match) {
+      result.push(attachment);
+      continue;
+    }
+    const [, name, category] = match;
+    let group = attachmentsByPrefix.get(name);
+    if (!group) {
+      group = { ...attachment, name };
+      attachmentsByPrefix.set(name, group);
+      result.push(group);
+    }
+    if (category === "expected")
+      group.expected = attachment;
+    else if (category === "actual")
+      group.actual = attachment;
+    else if (category === "diff")
+      group.diff = attachment;
+    else if (category === "previous")
+      group.previous = attachment;
+  }
+  return result;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   TerminalReporter,

package/lib/runner/loadUtils.js

@@ -184,7 +184,7 @@ function createProjectSuite(project, fileSuites) {
   const grepMatcher = (0, import_util.createTitleMatcher)(project.project.grep);
   const grepInvertMatcher = project.project.grepInvert ? (0, import_util.createTitleMatcher)(project.project.grepInvert) : null;
   (0, import_suiteUtils.filterTestsRemoveEmptySuites)(projectSuite, (test) => {
-    const grepTitle = test._grepTitle();
+    const grepTitle = test._grepTitleWithTags();
     if (grepInvertMatcher?.(grepTitle))
       return false;
     return grepMatcher(grepTitle);
@@ -200,7 +200,7 @@ function filterProjectSuite(projectSuite, options) {
   if (options.testIdMatcher)
     (0, import_suiteUtils.filterByTestIds)(result, options.testIdMatcher);
   (0, import_suiteUtils.filterTestsRemoveEmptySuites)(result, (test) => {
-    if (options.cliTitleMatcher && !options.cliTitleMatcher(test._grepTitle()))
+    if (options.cliTitleMatcher && !options.cliTitleMatcher(test._grepTitleWithTags()))
       return false;
     if (options.additionalFileMatcher && !options.additionalFileMatcher(test.location.file))
       return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playwright",
-  "version": "1.54.0-alpha-2025-07-08",
+  "version": "1.54.0-beta-1752075907000",
   "description": "A high-level API to automate web browsers",
   "repository": {
     "type": "git",
@@ -56,7 +56,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "playwright-core": "1.54.0-alpha-2025-07-08"
+    "playwright-core": "1.54.0-beta-1752075907000"
   },
   "optionalDependencies": {
     "fsevents": "2.3.2"