MindStudio Insight GUI Test

Project Setup

1、安装依赖

npm install

2、下载浏览器二进制文件

npx playwright install

3、准备测试数据

测试数据可以在数据仓库中下载: https://gitcode.com/zhangruoyu2/msinsight-quick-start-demo.git

在utils/constants.ts 中可以定义测试文件路径，目前所有测试数据都放在 C:\msinsight-quick-start-demo\GUI-test-data 路徑测试目录下，请自行创建该目录或将配置更改为本地文件路径。

4、运行用例

运行GUI前，请分别完成前端和后端的构建。

# 运行所有用例
npm run test
# 运行预冒烟用例
npm run test:smoke
# 在 UI 模式下运行
npm run test -- --ui
# 运行单个测试文件
npm run test timeline.spec.ts
# 运行单个测试用例
npm run test -- -g test_unitsExpandAndCollapse_when_click
# 查看测试报告
npx playwright show-report
# 更新某个测试文件所有快照
npx playwright test tests/full-test/framework.spec.ts -u
# 更新某个测试用例快照
npx playwright test -g test_lock_selected_area_then_click_operator_detail -u

自动化写用例

npx playwright codegen localhost:5174 --viewport-size=1920,1080

Lint with ESLint

npm run lint

⚠️ 注意

默认运行模式是无头模式，也就是不会有浏览器界面出现，如果为了方便调试与定位，可以更改playwright.config.ts配置，将headless改为false

由于无头模式与有头模式下快照有差异，为确保用例的一致性，生成快照时必须要设置 headless: true

运行前请关闭浏览器中已打开的 Insight 页面，否则无法建立 ws 连接，这是因为 ws 同时只能保持一个连接

建议

1、定位器选择

不要使用不稳定的类名，如css-4lza26, 它是由Emotion库自动生成的，可能会在每次构建时发生变化，因此具有不稳定性。优先使用确定的id、class、attribute选择器、以及官方内置的定位器：

page.getByRole()：用于根据显式和隐式辅助功能属性进行定位。

page.getByText()：用于根据文本内容进行定位。

page.getByLabel()：用于根据关联标签的文本定位表单控件。

page.getByPlaceholder()：用于根据占位符定位输入框。

page.getByAltText()：用于根据备用文本定位元素，通常是图像。

page.getByTitle()：用于根据 title 属性定位元素。

如果仍然无法获取到元素，可以给节点增加data-testid来辅助定位：

page.getByTestId()：用于根据元素的 data-testid 属性进行定位（可以配置其他属性）。

2、不建议使用 page.waitForTimeout()

page.waitForTimeout() 只能用于调试。在生产中使用计时器进行的测试不稳定，而且会增加用例执行时间。建议使用网络事件、选择器可见等方式来代替。

3、缩小快照范围

在使用快照断言时，尽量将快照范围缩小到功能影响区域内，比如在测试图表功能时，只需要比对图表本身的变化即可。另外，在快照比对前，可以将鼠标移出截图区域，避免影响截图。

 await page.mouse.move(0, 0);
 await expect(timelineFrame.locator('#main-container')).toHaveScreenshot('unit-offset.png');

4、快照需要在无头模式下更新

因为无头模式下的页面是没有滚动条的，所以为了保持用例一致性，更新快照需要在无头模式下进行。

5、并行、串行

默认test都是并行执行的，如果想要某些tests串行执行，可以在这组describe内设置test.describe.configure({ mode: 'serial' });

常见问题

Q: 如何禁用无头模式？

A: 在 playwright.config.ts 配置文件中，将 headless 设置为 false，即可显示浏览器窗口。

use: {
    headless: false
}