VSCODE 尝试安装微软 Playwright，用于自动化测试

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

AI越来越好，前端开发80%的工作可被AI替代，最近公司前端开发离职，我只是稍微懂一些VUE及微信小程序，我在vsCode上安装CodeX、Claude Code、Cline等MCP服务（参考:https://help.aliyun.com/zh/model-studio/claude-code?spm=a2c4g.11186623.help-menu-2400256.d_0_4_2.641824a37WXqTN）,同时安装了微信小程序格式化插件、通过接入千问大模型(后付费模式)、在和AI对话的过程中，他就把前端工作完成了！

原来一个前端可能需要一天时间完成的工作量，AI可能一小时就能完成，而且质量相当不错！那么这就带来了一个就业问题：前端工作不好找，薪资被疯狂压低...............

今日突发奇想，想着安装个自动化测试插件，看看能不能完成复杂的测试工作！

如果，我说如果，他真的能完成复杂测试工作，那么下一个失业的可能是测试工作者了！

再说后端开发，其实很多工作，AI也能完成，如果您只是个CURD-BOY，那么距离被裁员/失业也就不远了，如果你更全面，会架构、会前端、会网络，会部署、会....总之会的越多，越不容易被替代。

因此：不管前端/测试/后端、在AI时代，如果不想被淘汰，那么就需要更多的技能！

废话不多说，今日记录下Playwright的安装及初始化！

1、安装

在vsCode 扩展中 搜索：微软出的Playwright，点击安装即可！

2、初始化

2.1、运行vsCode终端，执行创建测试目录指令

mkdir e2e-tests
cd e2e-tests

如下图：

 2.2、初始化项目

npm init -y  

此时会生成 package.json 文件

2.3、安装插件

npm init playwright@latest   --安装过程中直接 enter 进入下一步

按提示操作：

• 问你是否要安装 Playwright → 选 Yes
• 问你是否要安装浏览器 → 选 Yes
• 问你是否想用 TypeScript → 推荐选 TypeScript

等它安装完，会自动生成：

• ✅ playwright.config.ts ← 配置文件
• ✅ tests/ 文件夹 ← 放测试代码
• ✅ tests/example.spec.ts ← 示例测试
• ✅ package.json 更新依赖

至此，整个Playwright的安装、初始话就完成啦！

 注：常用指令

Inside that directory, you can run several commands:

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --ui
    Starts the interactive UI mode.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example
    Runs the tests in a specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

  npx playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    npx playwright test

And check out the following files:
  - .\tests\example.spec.ts - Example end-to-end test
  - .\playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭