puptter自动化测试初探

1. vitest怎么样

vite的官方测试工具， 好像是单元测试来着，Jtest也是单元测试

Vitest | A blazing fast unit test framework powered by Vite

但是更好的是e2e，也就是模拟用户操作

一个很不错的vites网址 入门：使用 Vitest 测试 React 组件 - 掘金

2. 测试有几种

UI 测试（UI Test）只是对于前端的测试，是脱离真实后端环境的，仅仅只是将前端放在真实环境中运行，而后端和数据都应该使用 Mock 的。

端到端测试（E2E Test）则是将整个应用放到真实的环境中运行，包括数据在内也是需要使用真实的。

• 单元测试（Unit Test）有 Mocha, Ava, Karma, Jest, Jasmine 等。 • 集成测试（Integration Test）和 UI 测试（UI Test）有 ReactTestUtils, Test Render, Enzyme, React-Testing-Library, Vue-Test-Utils 等。

test是利用断言的规则，如

import sum from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

还是老生常淡啊。目前绝大部分实际业务项目里，前端的单元测试都没啥鸟用，UI自动测试又太难搞。

主要还是要看业务场景，这个确实是很值得思考的东西，需要去积累经验。

确实，辛辛苦苦写的UI测试，页面一改版，全都要重写测试用例，太累了

积累就是 你写了一堆测试用例 最后需求说 这个需要不需要了

3. puppter安装

我们使用pnpm进行安装，节省磁盘空间（用的是软连接）

npm install -g pnpm

但是，即使是cnpm，也下不了puppter，node-sass也是，因为

在它们的包里，就存在指向外部的链接，所以要么

添加 --ignore-scripts 直接无视额外安装脚本，这样你启动的时候还是会报没有chrome，然后手动下载一个可以。

例如：npm i --save-dev node-sass --ignore-scripts

要么

使用对应的镜像源参数，
例如：npm i --save-dev node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

4. puppter相关

 puppterr 是谷歌官方推出的，可以配合recorder来做，直接生成代码，见chrome浏览器也能做自动化测试_chrome自动化_九柄说测试的博客-CSDN博客

这个链接，带代码的，可以运行起来，可以试试Node + ts + puppeteer e2e前端自动化测试 - 掘金

https://github.com/XieTongXue/happy-front-end/tree/master/e2e-test

还是那个人写的试试前端自动化测试！（基础篇） - 掘金  介绍测试也不错

这2也ok Puppeteer + Puppeteer Recorder WEB自动化测试 - 掘金

Puppeteer前端自动化测试实践 - 掘金