团队和AI代理的开源视觉测试平台.
官方Argos Vitest 集成系统
直接取自您的 Argos 截图 Vest 浏览器测试。 。 。 .
访问 测试 SDK 文档 向导 API 等.
安装
安装软件包 :
npm install --save-dev @argos-ci/vitest
argosSnapshot 运行在任何Vitest测试中——浏览器或节点,不需要其他的.
用来捕捉截图 argosScreenshot测试
Vest 浏览器模式 与
剧作家提供商 并安装
以下对等关系:
npm install --save-dev vitest @vitest/browser @vitest/browser-playwright playwright
使用量
在您的 Vitest 配置中注册插件 :
// vitest.config.ts
import { defineConfig } from "vitest/config";
import { playwright } from "@vitest/browser-playwright";
import { argosVitestPlugin } from "@argos-ci/vitest/plugin";
export default defineConfig({
plugins: [
argosVitestPlugin({
// Upload the screenshots to Argos at the end of the run.
uploadToArgos: process.env.CI === "true",
}),
],
test: {
browser: {
enabled: true,
headless: true,
provider: playwright(),
instances: [{ browser: "chromium" }],
},
},
});
然后取取浏览器测试的截图 :
import { test } from "vitest";
import { render } from "vitest-browser-react";
import { argosScreenshot } from "@argos-ci/vitest";
import { Button } from "./Button";
test("Button", async () => {
render(<Button>Click me</Button>);
await argosScreenshot("button");
});
自动命名
此名可选. 如果省略,阿尔戈斯从目前的测试中得出一个, 模仿 虚拟快照数个未命名 在同一测试中捕获到一个增量计数器,所以它们保持独特性:
test("Button", async () => {
render(<Button>Click me</Button>);
await argosScreenshot(); // -> "src/Button.test.tsx > Button 1"
await argosScreenshot(); // -> "src/Button.test.tsx > Button 2"
});
不像Vitest——它保留每个文件 .snap,所以它的键只需要
文件内独有的——Argos names are 全球 整个建筑。 这个
因此生成的名称包括测试文件路径, 所以两个测试是相同的
不同文件中的标题从不碰撞.
抓图
argosSnapshot 抓取任何价值的快照——而不仅仅是截图——和
上传到 Argos 到 diff 横跨建筑,模仿
虚拟快照不同 argosScreenshot, (中文(简体) ),
它不需要浏览器并在其中工作 两者 浏览器和节点测试.
值先出;名可选. 关闭它自动命名快照
从当前测试( 类似于上面的截图), 或通过 options.name 设置它
明确:
import { test } from "vitest";
import { argosSnapshot } from "@argos-ci/vitest";
test("API response", async () => {
const user = await fetchUser();
// Objects are serialized with `@vitest/pretty-format`, strings are written
// verbatim.
await argosSnapshot(user); // -> "src/user.test.ts > API response 1"
await argosSnapshot(user, { name: "user" }); // explicit name
});
使用 extension 选项来控制Argos如何制作和播放快照,
财务报告和审定财务报表 tag 添加标签 :
await argosSnapshot(JSON.stringify(config, null, 2), {
name: "config",
extension: ".json",
tag: "config",
});
截图和快照都写给 ./snapshots 目录
默认( 通过插件可配置) root 选项),并由记者上传
何时 uploadToArgos 已启用.