Playwright 是一个强大的测试框架，但它的 HTML 报告对于复杂的项目来说可能感觉很简单。在报告标题中显示提交消息、作者详细信息或 CI 构建链接等元数据不是很好吗？以下是实现这一目标的方法以及对 Playwright 功能的一些更深入的见解。
Playwright 文档提到了用于配置的元数据字段：
import { defineConfig } from '@playwright/test';
export default defineConfig({
metadata: 'acceptance tests',
});
在撰写本文时（Playwright v1.49），它指出：
将直接放入序列化为 JSON 的测试报告中的元数据
但有一个问题：添加此配置不会在报告中显示任何元数据。如果您使用 TypeScript，您还会看到所提供示例的错误：
类型“字符串”不可分配给类型“元数据”。
显然，文档已经过时，但报告中的元数据确实是可能的。
深入研究 Playwright 的源代码后，我发现了 HTML 报告支持的实际字段：
export type Metainfo = {
'revision.id'?: string;
'revision.author'?: string;
'revision.email'?: string;
'revision.subject'?: string;
'revision.timestamp'?: number | Date;
'revision.link'?: string;
'ci.link'?: string;
'timestamp'?: number;
};
只能显示这些字段。让我们在 playwright.config.ts 中配置它们：
import { defineConfig } from '@playwright/test';
export default defineConfig({
reporter: 'html',
metadata: {
'revision.id': 'adcb0c51debdbe96a6a836e2ead9d40a859f6438',
'revision.author': 'John Smith',
'revision.email': 'john.smith@gmail.com',
'revision.subject': 'Acceptance tests',
'revision.timestamp': Date.now(),
'revision.link': 'https://github.com/microsoft/playwright/pull/12734',
'ci.link': 'https://github.com/microsoft/playwright/actions/workflows/tests_primary.yml',
'timestamp': Date.now(),
},
});
运行测试后，HTML 报告标题会精美地显示此元数据。
手动填充元数据字段并不实用，尤其是在 CI/CD 管道等动态环境中。自动化此过程可确保元数据准确且一致，无需手动操作。
要自动化该过程，您可以利用任何提取 Git 提交信息的第三方包。这是一个简单的方法，让我们继续讨论更有趣的第二个选项。
Playwright 最有趣的发现之一是它的隐藏插件系统。虽然没有正式记录，但它提供了一种通过自定义插件扩展 Playwright 功能的方法。
我在审视剧作家本身的过程中得到了这个见解。 Playwright 支持隐藏配置字段“@playwright/test”，您可以在其中定义插件。
这是启用 gitCommitInfo 插件的示例：
import { defineConfig } from '@playwright/test';
import { gitCommitInfo } from 'playwright/lib/plugins';
export default defineConfig({
reporter: 'html',
// @ts-expect-error
'@playwright/test': {
plugins: [gitCommitInfo()]
},
});
此插件提取 Git 提交详细信息并填充 HTML 报告中的元数据字段，包括：
此外，当在 CI/CD 环境中运行时，该插件可以使用标准环境变量（如 GITHUB_SHA 或 CI_COMMIT_SHA）自动填充字段。
启用插件并运行测试后，我得到了以下报告，其中自动填充了元数据：
我很好奇，Playwright还有其他隐藏的插件吗？
在plugins目录中只有一个插件——webServerPlugin。它允许在运行测试时启动和停止内置 Web 服务器。事实上，当你定义 config.webServer 选项时，这个插件是在幕后使用的。因此，插件系统在 Playwright 内部使用，尽管没有记录供公共使用。
插件系统是在早期版本的 Playwright 中引入的，但在某些时候被隐藏了。不幸的是，目前还没有计划公开它。
如果您希望在不依赖插件的情况下自动填充元数据，则可以使用自定义函数来实现。我改编了 gitCommitInfo 插件中的 gitStatusFromCLI() 函数，使其可以独立使用：
import { defineConfig } from '@playwright/test';
export default defineConfig({
metadata: 'acceptance tests',
});
使用该函数填充 Playwright 配置中的元数据：
export type Metainfo = {
'revision.id'?: string;
'revision.author'?: string;
'revision.email'?: string;
'revision.subject'?: string;
'revision.timestamp'?: number | Date;
'revision.link'?: string;
'ci.link'?: string;
'timestamp'?: number;
};
运行测试后，我得到了包含填充元数据的相同 HTML 报告：
这种方法使您可以完全控制元数据自动化，而无需依赖内部 Playwright 功能。
一切看起来都不错，但是上面的代码存在性能问题。你能猜出问题是什么吗？
剧作家在工人中进行测试。当每个worker启动时，它会导入Playwright配置。如果 Playwright 配置执行繁重的操作（例如获取 Git 数据），它会减慢工作人员的速度。此外，多次执行该命令是没有意义的，因为它会返回相同的结果。
您可以通过仅在主worker中执行元数据函数来优化它。主worker可以通过空的TEST_WORKER_INDEX环境变量来检测：
import { defineConfig } from '@playwright/test';
export default defineConfig({
reporter: 'html',
metadata: {
'revision.id': 'adcb0c51debdbe96a6a836e2ead9d40a859f6438',
'revision.author': 'John Smith',
'revision.email': 'john.smith@gmail.com',
'revision.subject': 'Acceptance tests',
'revision.timestamp': Date.now(),
'revision.link': 'https://github.com/microsoft/playwright/pull/12734',
'ci.link': 'https://github.com/microsoft/playwright/actions/workflows/tests_primary.yml',
'timestamp': Date.now(),
},
});
这可确保有效填充元数据而不影响性能。
将元数据添加到 Playwright HTML 报告中是可能的，尽管没有详细记录。您可以手动配置元数据、利用隐藏的插件系统或实施自定义解决方案。
关键要点：
根据本文的研究，我向 Playwright 存储库提出了拉取请求，提出元数据字段的文档改进。
您是否尝试过将元数据添加到剧作家报告中？在评论中分享您的经验或挑战！
以上是在 Playwright HTML 报告中显示元数据：完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！
