使用 ESLint 捕获 Playwright 测试中遗漏的 await调用

📝 面试求职： 「面试试题小程序」 ，内容涵盖 测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

---

你是否曾经运行过一个 Playwright 测试，它就是……没有按预期运行？也许它随机失败了。也许它在本地通过了，但在持续集成（CI）中却失败了。罪魁祸首是什么？通常情况下，只是一个遗漏的await。

在异步代码中，这是最容易犯的错误之一，而在测试中，它可能导致竞争条件和不可靠的结果。

问题：遗漏的await可能会破坏你的测试

让我们来看一个简单的例子。我们点击一个按钮，期望一个模态框出现：

wait page.getByRole('button', { name: 'Submit' }).click();expect(page.getByRole('dialog')).toBeVisible(); // ❌ Missing 'await'

expect()调用返回一个 Promise，但我们没有 await 它，因此 Playwright 在它完成之前就继续执行了。有时模态框会及时出现，有时则不会。结果是什么？测试不可靠。

更糟糕的是，VS Code 默认不会提醒你。

解决方案：让 ESLint 捕获未处理的 Promise

幸运的是，我们可以设置一个 TypeScript ESLint 规则来帮助我们自动捕获这些错误。这个规则叫做 @typescript-eslint/no-floating-promises，它会突出显示任何未正确处理的 Promise。

以下是设置方法：

1. 安装 ESLint 和 TypeScript 支持

如果你还没有安装（确保你使用的是 ESLint v9+ 和 TypeScript）：

npm install --save-dev eslint typescript-eslint typescript

2. 创建 tsconfig.json（如果需要）

@typescript-eslint/no-floating-promises规则需要类型信息。确保你的项目根目录中有一个 tsconfig.json文件。如果没有，请创建一个基本的：

//tsconfig.json
{
"compilerOptions":{
"target":"ES2022",
"module":"NodeNext",
"moduleResolution":"NodeNext",
"strict":true,
"esModuleInterop":true,
"skipLibCheck":true,
"forceConsistentCasingInFileNames":true,
"noEmit":true//Importantforlintingwithoutcompiling
//Addotheroptionsrelevanttoyourproject(e.g.,"jsx":"react-jsx")
},
"include":["**/*.ts","**/*.tsx","**/*.js","**/*.mjs"],
"exclude":["node_modules"]
}

3. 在 eslint.config.mjs中配置 ESLint

在项目根目录中创建或更新 eslint.config.mjs以启用类型感知的检查：

// eslint.config.mjs
import eslint from'@eslint/js';
import tseslint from'typescript-eslint';

export default tseslint.config(
eslint.configs.recommended,
// Use recommendedTypeChecked for rules requiring type information
...tseslint.configs.recommendedTypeChecked,
{
   // Configure language options for type checking
      languageOptions:{
      parserOptions:{
      project:true,// Use the tsconfig.json in the root
      },
},

rules:{
'@typescript-eslint/no-floating-promises':'error',
// Other rules can be added here},},{
// Optionally, ignore specific files/folders
ignores:['dist/**','node_modules/**','playwright.config.ts'],// Adjust as needed
}
);

ESLint v9+ 使用了新的配置文件格式。查看 ESLint 文档以获取更多详细信息。

4. 安装 ESLint VS Code 扩展

为了直接在编辑器中看到错误，请确保你在 VS Code 中安装了官方的 ESLint 扩展。在扩展视图中搜索 dbaeumer.vscode-eslint并点击安装。

提示：如果在配置后 ESLint 警告没有立即出现，尝试重新加载 VS Code 窗口（命令面板：Developer: Reload Window）。

结果：在 VS Code 中即时反馈

现在，当你忘记 await 时，VS Code 会在你 运行测试之前在问题下方显示波浪线。

以下是之前代码的修复版本：

await page.getByRole('button', { name: 'Submit' }).click();await expect(page.getByRole('dialog')).toBeVisible(); // ✅ Correct！

那个遗漏的关键字可能会产生巨大的差异，现在你再也不会错过它了。

额外提示：在 CI 中添加类型检查

想要额外的安全保障吗？将 TypeScript 检查添加到你的 CI 流水线中：

npx eslint && tsc

它确保你的代码可以干净地编译，并在你启用严格设置的情况下标记异步问题。

告别不可靠的测试

就是这样！Playwright 测试中再也没有偷偷摸摸的await问题了。设置一次 ESLint，每次遗漏的await在成为不可靠的错误之前被捕捉到，未来的你会感谢现在的你。

如果这个提示对你有帮助，请留言，并随时与你的团队分享。祝测试愉快！

与 Playwright 一起愉快地测试吧！

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

​

​​​