DeepSeek + Playwright 实战：巧用ai帮你写自动化测试代码

DeepSeek给出的代码，完全可以覆盖提出的测试需求，从用例设计，到项目代码结构，数据驱动，页面对象模型。基本实现了本次测试需求的用例设计，代码生成，居然还可以直接运行，结果挺让人震惊的！这次的体验看，测试结果需要人工基于业务逻辑最后确认，这个也符合现实中绝大多数的情况。当然，你也可以根据它给出的优化建议提示，继续同它进行多轮对话，对测试代码持续改进。相对于在网页版提问，这个集成插件在编辑器内，

小马不会过河

7453人浏览 · 2025-02-10 20:46:08

小马不会过河 · 2025-02-10 20:46:08 发布

2025年春节期间，DeepSeek-R1火爆全网，尤其在编程方面表现优异。本文尝试利用vscode插件结合Playwright小试牛刀，效果令人震惊，下面分享下AI Toolkit安装、向DeepSeek-R1提测试需求、最后给出完整Playwright测试代码及测试报告全流程，供大家参考。

一、环境准备

AI Toolkit是微软官方提供的插件，可接入各种大模型，目前支持DeepSeek-R1大模型，帮助我们在vscode中进行代码开发。

1.1 前置条件

需要安装vscode，以及有github账号，在配置AI Toolkit插件中需要用到。

1.2 插件安装

在VS Code扩展商店搜索 "AI Toolkit"

安装后点击左下角机器人图标，启用插件

1.3 模型安装

在catalog页面的models中选择github和DeepSeek

1.4 `Playground`启动

二、给`ai`提测试需求

2.1 测试需求如下

下面以一个典型测试验证场景为例，看看ai如何完成自动化测试代码的完整过程：

// 高频场景：百度搜索功能验证   1. 正常流程：搜索关键词后验证结果页展示   2. 异常流程：空输入时提示错误

2.2 给`DeepSeek-R1`提问

把你的需求都列出来，不用担心实现不了，也不用担心需求太多 - 只要你敢提，ai就能实现，需求越细致，效果越好。

2.3 `ai`的推理过程

ai展现了整个的推理过程，逻辑清晰，最后自己还总结一下。和网页版使用上区别不大。

三、`ai`给出的测试代码

但是分析结束后，没有给代码。于是继续提问要代码后，直接找ai上干货。这里不贴图了，放源码大家更容易在自己电脑上运行。

3.1 项目结构

baidu/   ├── pages/   │   └── BaiduPage.js   ├── test/   │   └── baidu-search.spec.js   ├── testdata/   │   └── data.yaml   ├── playwright.config.js   └── package.json

点评：各文件分类清晰，结构规范，一目了然，好评

1. 测试数据，testdata/data.yaml

2. 测试文件，test/baidu-search.spec.js

3. 测试类，pages/BaiduPage.js

4. 测试配置，playwright.config.js

5. 项目配置，package.json

3.2 测试数据 - testdata/data.yaml

testCases:     - name: "Normal search - valid keyword"       keyword: "Playwright"       expected: "Playwright"       type: "positive"        - name: "Empty input - should show error"       keyword: ""       expected: "请输入搜索内容"       type: "negative"        - name: "Special characters - should handle"       keyword: "#$%^&*"       expected: "未找到相关结果"       type: "negative"

点评：test case覆盖了正向、逆向场景，包含了期望结果，测试类型。先不管预期结果对不对吧，至少后期修改扩展并不费劲。好评

3.3 测试文件 - test/baidu-search.spec.js

const { test, expect } = require('@playwright/test');   const yaml = require('yaml');   const fs = require('fs');   const { BaiduPage } = require('../pages/BaiduPage');      const testData = yaml.parse(fs.readFileSync('./testdata/data.yaml', 'utf8')).testCases;      test.describe('Baidu Search Tests', () => {     let page;     let baiduPage;        test.beforeAll(async ({ browser }) => {       page = await browser.newPage();       baiduPage = new BaiduPage(page);     });        test.beforeEach(async () => {       await baiduPage.navigate();     });        test.afterAll(async () => {       await page.close();     });        testData.forEach(({ name, keyword, expected, type }) => {       test(name, async () => {         await baiduPage.search(keyword);            if (type === 'positive') {           const resultText = await baiduPage.getFirstResult();           expect(resultText).toContain(expected);         } else {           if (keyword === "") {             const isDisabled = await baiduPage.searchButton.isDisabled();             expect(isDisabled).toBe(true);           } else {             const errorText = await baiduPage.getErrorText();             expect(errorText).toContain(expected);           }         }       });     });   });

点评，数据驱动，对象模型都实现了。好评

3.4 测试类 - pages/BaiduPage.js

class BaiduPage {     constructor(page) {       this.page = page;       this.searchInput = page.locator('#kw');       this.searchButton = page.locator('#su');       this.results = page.locator('#content_left');       this.errorToast = page.locator('.neterror'); // 错误提示元素     }        async navigate() {       await this.page.goto('https://www.baidu.com');       await this.page.waitForLoadState('networkidle');     }        async search(keyword) {       await this.searchInput.fill(keyword);       await this.searchButton.click();       await this.page.waitForLoadState('networkidle');     }        async getFirstResult() {       const firstResult = this.results.locator('h3').first();       await firstResult.waitFor();       return firstResult.textContent();     }        async getErrorText() {       return this.errorToast.textContent();     }   }      module.exports = { BaiduPage };

点评：测试类pom封装，甚至给了注释this.errorToast = page.locator('.neterror'); // 错误提示元素。好评

3.5 代码说明

• 点评：给出的代码说明，提到了定位方法，再不用人工分析，太爽了。好评

3.6 后续优化

• 点评：还有优化进步空间。好评

四、运行与调试

4.1 执行测试

根据DeepSeek给出的运行命令

执行后结果如下

实施

4.2 结果分析

好消息是，这个测试跑起来了
坏消息是，3个结果都fail了
结合测试报告和调试信息，也不难分析出原因：
搜索结果和预期不匹配
输入为空处理逻辑不一致
以及特殊字符处理

4.3 修改运行

简单修改下，比如第1条用例改小写，先删除第2条用例，第3条用例也改为正向。此处不必纠结业务逻辑，仅仅作为演示通过的情况。修改后的data.yaml内容如下：

testCases:     - name: "Normal search - valid keyword"       keyword: "Playwright"       expected: "playwright"       type: "positive"        - name: "Special characters - should handle"       keyword: "#$%^&*"       expected: "#$%^&*"       type: "positive"

再次运行后，结果为通过

以及测试报告

五、结语

DeepSeek 给出的代码，完全可以覆盖提出的测试需求，从用例设计，到项目代码结构，数据驱动，页面对象模型。基本实现了本次测试需求的用例设计，代码生成，居然还可以直接运行，结果挺让人震惊的！

这次的体验看，测试结果需要人工基于业务逻辑最后确认，这个也符合现实中绝大多数的情况。当然，你也可以根据它给出的优化建议提示，继续同它进行多轮对话，对测试代码持续改进。相对于在网页版提问，这个集成插件在编辑器内，使用起来更高效，生成的代码可以直接复制粘贴，也没有碰到网页版服务器忙常常连接不上的问题，非常值得大家一试。

如何学习大模型 AI ？

由于新岗位的生产效率，要优于被取代岗位的生产效率，所以实际上整个社会的生产效率是提升的。

但是具体到个人，只能说是：

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

在这里插入图片描述