如何避免Playwright在测试中将@字符识别为标签

问题描述 #

我编写了如下测试代码：

const specialChars = `#@<`;

for (let specialChar of specialChars) {
  if (specialChar === "@") specialChar = `\@`;
  test(`search special character: "${specialChar}"`, async ({ page }) => {
    // test content
  });
}

问题在于Playwright会将测试名称中闭合的单引号识别为标签。我尝试给@添加转义符\@，但并未解决问题。请问有什么方法可以避免这种情况？

解决方案 #

Playwright的测试报告默认会把测试名称当作Markdown渲染，所以引号、尖括号这类字符会被误解析成标签。以下是几种实用的解决方法：

1. HTML实体转义特殊字符 #

把测试名称里的特殊字符转换成对应的HTML实体，确保报告正确显示原字符：

const specialChars = `#@<`;

for (let specialChar of specialChars) {
  // 转义会触发Markdown解析的字符
  const escapedChar = specialChar
    .replace(/"/g, '&quot;')
    .replace(/@/g, '&#64;')
    .replace(/</g, '&lt;');
  test(`search special character: "${escapedChar}"`, async ({ page }) => {
    // test content
  });
}

转义后，HTML报告中会正常显示#、@、<这些字符，不会被解析成标签。

2. 更换测试名称的表达方式 #

避开可能触发解析的字符，比如用方括号代替引号包裹特殊字符：

const specialChars = `#@<`;

for (let specialChar of specialChars) {
  test(`search special character: [${specialChar}]`, async ({ page }) => {
    // test content
  });
}

这种方式简单直接，完全规避了引号引发的解析冲突。

3. 使用普通字符串拼接替代模板字符串 #

有时候模板字符串的语法可能和Playwright的解析逻辑冲突，改用普通字符串拼接：

const specialChars = `#@<`;

for (let specialChar of specialChars) {
  test('search special character: "' + specialChar + '"', async ({ page }) => {
    // test content
  });
}

如果采用这种方式，同样建议对特殊字符做HTML转义，避免其他字符引发解析问题。

内容的提问来源于stack exchange，提问作者I.sh.