前端自动化测试
自动化测试工具选择：playwright/cypress
我们的项目分为移动端和管理端的，移动端用的公司统一的框架，技术是vue3+vite，管理端项目一般用的是webpack+vue2因此移动端技术选项优先考虑使用vitest，接下来我也会从使用的角度讲下为什么选择vitest和playright
实践：
我的项目移动端vue3+vite
- ✔️看官网上面使用
vitest要求node版本和vite版本有一定要求node>=18.0.0 vite>=5.0.0，本地项目vite版本5.3.3满足要求
- ✔️
vitest将读取项目根目录下的vite.config.ts文件因此可以和项目共享配置
- ✔️兼容
jtest
单元测试-项目接入:
npm install -D vitest
vite.config.js defineConfig增加以下配置
test: {
// 使用浏览器的环境来替代node.js
environment: 'jsdom',
// 使用全局API
globals: true,
// 设置别名，可以在项目中使用@/xxx来查找路径
alias: {
'@': path.resolve(__dirname, 'src')
}
// 热更新
// watch: false
}
在src下任意地方新建xx.spec.js/ts文件，执行npx vitest或者在package.json中配置scripts执行npm run test命令就可以自动执行以下用例了，接下来就可以写单元测试用例了，以下是一些例子
"scripts": {
"test": "vitest",
},
// my first test
import { expect, test } from 'vitest'
import Cache from '@/views/ai/cache'
// 验证cache是否生效，describe-是一个藐视
describe('valid cache', () => {
// 测试设置和获取items
test('test setItem and getItem is OK', async () => {
const cache = new Cache()
cache.setItem('test', { msgType: 'text', content: 'hello' })
const result = await cache.getItem('test')
expect(result).toEqual(JSON.stringify({ msgType: 'text', content: 'hello' }))
})
// 测试获取所有项目
test('test getAllItems is OK', async () => {
const cache = new Cache()
cache.setItem('test', { msgType: 'text', content: 'hello' })
cache.setItem('test1', { msgType: 'text1', content: 'hello1' })
const result = await cache.getAllItems()
expect(result).toEqual([
{ msgType: 'text', content: 'hello' },
{ msgType: 'text1', content: 'hello1' }
])
})
// 测试删除-删除成功应该返回true/false
test('测试删除', async () => {
const cache = new Cache()
cache.setItem('test', { msgType: 'text', content: 'hello' })
cache.removeItem('test')
const result = await cache.getItem('text')
expect(result).toEqual('')
})
})
执行结果如下：执行通过，执行不通过时有明显的提示信息，可以看到执行过程
image-20240708214557611.png
image-20240708214645961.png
vitest可以进行操作dom，但是我们的项目由于技术做了封口，所有的依赖不允许进行自定义，只能依赖一个core的库，所以在接入dom测试的时候有些问题，会提示，这个报错是由于vite和解析vue插件的版本不匹配导致的，上面说了我们不推荐自己引入插件所以在我的项目没有使用vitest来做dom方面操作的测试。
image-20240708215605954.png
自动化测试-项目接入：
- ✔️支持在控制台运行和在浏览器运行(添加配置
headless) - ✔️接入简单，运行一行命令可以自动帮你生成配置
- ✔️对比
cypress,cypress生成的配置文件更多，运行需要依赖vue解析插件@vitejs/plugin-vue版本不一致运行时会提示解析不了vue文件，但是cypress有界面进行交互，操作上更加方便。playwright在浏览器端运行时则和我们正常的浏览器开发时验证页面操作一样，更加直观，可以看到执行过程。
执行如下命令过程中会询问你
- 选择ts还是js，我的选择（ts）
- 自定义test文件夹，默认为e2e，我的选择（默认配置）
- 添加github操作工作流，以便在ci上轻松运行测试
- 安装浏览器配置，默认选择
true
npm init playwright@latest
项目初始化后会生成以下文件
playwright.config.ts
package.json
package-lock.json
tests/
example.spec.ts
tests-examples/
demo-todo-app.spec.ts
playwright.config.ts文件如下，我去掉了几个浏览器的配置项
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
//test文件夹
testDir: './e2e',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://127.0.0.1:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
],
});
编写测试用例，有两种方法一个是在e2e的文件夹下面的xx.spec.ts文件中进行编写，这种方法和编写node程序思路类似，只不过需要按照特定的api进行操作dom和请求接口；
另一种方法：在目录的任意地方新建xx.js文件，我的还写在e2e文件夹下面，新建ai.js编写代码，编写思路一样，只不过使用{headless:false}配置可以打开浏览器，这样我们就能直观的看到执行过程
第一种：修改e2e文件夹下的example.spec.ts文件
import { test, chromium } from '@playwright/test'
/**
* 点击报表数据能够出来数据
*/
test('点击报表数据能够出来数据', async ({ page }) => {
const browser = await chromium.launch({ headless: false })
const context = await browser.newContext()
// 添加cookie，因为跳转页面需要登录才可以进行正常请求
context.addCookies([
{
name: 'wyzdzjxhdnh',
domain: 'xxx',
path: '/',
value:
'xxx'
},
{
name: 'wyandyy',
domain: 'xxx',
path: '/',
value:
'xxx'
}
])
// 跳转到ai页面
await page.goto('http://localhost:5173/#/ai?siteCode=xxx')
// 请求推荐接口
const requestContext = context.request
let response = await requestContext.post(
`
https://xxx/robot/getWelcomeAndQuestionReply`,
{
data: { channel: '首页', robotCode: 'arrKRLjspQAzobETfnVgtDFIKKBtGT', siteCode: 'xxx' }
}
)
const data = await response.json()
console.log('response', data)
})
执行以下命令得到运行结果，相当于是得到了成功的第一步，接下去就可以针对接口、页面等进行不同的测试了
npx playwright test
image-20240708221155007.png
第二种：使用node命令执行node .\e2e\ai.js，会新打开一个浏览器，可以看到实现了，当访问http://127.0.0.1:5173/#/ai?siteCode=xxx页面时会跳转到登录页面
找到页面的登录按钮，点击登录按钮之后会自动重定向到http://127.0.0.1:5173/#/ai?siteCode=xxx页面
找到页面的换一换元素，点击换一换，发现下面推荐的信息变了，over👏 👏 👏
// import { test, expect, chromium } from '@playwright/test';
const { chromium } = require('playwright')
;(async () => {
const browser = await chromium.launch({
headless: false
})
const context = await browser.newContext()
const page = await browser.newPage()
// console.log('page',page)
// 跳转到ai页面
await page.goto('http://127.0.0.1:5173/#/ai?siteCode=xxx')
// 找到一键登录按钮然后登录
await page.getByText('一键登录', { exact: true }).click()
// 执行测试用例-点击报表数据能够出来数据
clickReportData(page)
})()
// 点击报表数据能够出来数据
function clickReportData(page) {
// TODO
// 查找到推荐元素点击推荐元素
page.locator(".change-btn-container").click()
//
}
image.png
默认推荐
image.png
网友评论