😭 写 Playwright 脚本写到崩溃？Write E2E Tests 帮你搞定 tldraw 自动化测试，Cursor 用户必看！🔥-Skill优仓

说实话，做前端开发最烦的不是写业务逻辑，而是写 E2E 测试代码！尤其是像 tldraw 这种复杂的画布应用，光是搞清楚怎么获取 Editor 实例、怎么模拟鼠标在 Canvas 上的操作，就能浪费大半天时间。如果你正在给 tldraw 写扩展或者维护代码，这个 **Write E2E Tests** Skill 简直是救命稻草！它能直接帮你生成基于 Playwright 的高质量测试脚本，不管是测试 UI 交互还是覆盖边缘 Case，有了它，真的可以早点下班了！🚀

核心功能

这个 Agent Skill 不是随便写写代码，它是专门吃透了 tldraw 测试架构的“老司机”。它能帮你解决以下核心问题：

精准的目录结构把控：它非常清楚 tldraw 的测试文件应该放在 apps/examples/e2e/ 还是 apps/dotcom/client/e2e/，自动帮你组织好文件路径，完全不用你操心工程规范。
复杂的 Editor 交互：在 E2E 测试中操作 Canvas 极其麻烦，但这个 Skill 知道如何通过 page.evaluate() 直接调用内部的 editor 实例。比如快速创建形状、选中删除、或者获取当前选中的元素属性，比模拟键盘快捷键快得多，也更稳定。
智能 Fixtures 调用：它熟练掌握 tldraw 的测试夹具（Fixtures），无论是操作 Toolbar、Style Panel 还是右键菜单（Context Menu），它都能自动生成调用 toolbar.tools.rectangle.click() 这种语义化的代码，而不是让你去写那堆容易脆断的 CSS 选择器。
跨平台兼容处理：自动处理 Mac 和 Windows 的按键差异（Meta vs Control），还会贴心地为移动端测试添加跳过逻辑。

适用平台

这个 Skill 简直是为 AI 编程助手量身定制的“最强外挂”！它完美适配以下主流 IDE 和 AI 助手，能让你的 AI 瞬间理解 tldraw 的测试上下文：

Cursor（强烈推荐，配合 Composer 功能简直无敌）
GitHub Copilot
Claude Code
OpenAI Codex
Gemini Code Assist
文心快码
腾讯云 CodeBuddy
华为云 CodeArts

把这个 Skill 喂给你的 AI，它就不再是瞎写代码的机器人，而是一个懂 tldraw 内部 API 的资深测试工程师。😭

实操代码示例

看看它生成的代码有多地道！它不会傻傻地模拟鼠标点击来创建形状，而是直接通过 page.evaluate 调用底层 API，速度快且不 flaky：

import { expect } from '@playwright/test'
import test from '../fixtures/fixtures'
import { setupOrReset } from '../shared-e2e'

test.describe('Rectangle Tool', () => {
  test.beforeEach(setupOrReset)

  test('creates a rectangle and verifies properties', async ({ page }) => {
    // 直接在浏览器上下文中执行代码，速度极快
    const shape = await page.evaluate(() => {
      editor.createShapes([{ type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } }])
      return editor.getOnlySelectedShape()
    })

    // 验证结果
    expect(shape).toMatchObject({
      type: 'geo',
      props: { w: 100, h: 100 }
    })
  })
})

优势分析

市面上通用的 Playwright 教程根本不适用于 tldraw 这种重交互应用。**Write E2E Tests** 的独家优势在于：

懂内部 API：通用 AI 只会教你 page.click('.btn')，但这个 Skill 知道用 editor.createShapes() 和 editor.getSelectedShapeIds()，这才是 tldraw 测试的最佳实践。
防 flaky 机制：它生成的代码倾向于使用逻辑重置（Reset）而不是刷新页面，测试运行速度快且稳定，极大减少了 CI/CD 里的随机失败。
开箱即用：它生成的代码直接引用了 ../fixtures/fixtures 和 ../shared-e2e，复制粘贴就能跑，连 import 路径都帮你对齐了。

应用场景

什么情况下你绝对需要它？

新功能回归测试：当你给 tldraw 开发了一个新工具，需要快速编写测试脚本，验证它在 Canvas 上是否能正常绘制。
交互细节验证：比如测试“按住 Shift 旋转是否以15度递增”，这种复杂的 UI 事件监听，用它生成的代码一测一个准。
跨端兼容性测试：需要确保你的改动在 PC 端和移动端都不会崩，它能帮你生成针对 isMobile 的条件判断逻辑。

最佳实践

在使用这个 Skill 生成代码时，有几个小技巧可以让你的测试更稳：

优先使用 Test ID：尽量让它生成基于 getByTestId('tools.rectangle') 的选择器，而不是依赖文本内容，这样文案修改不会弄挂测试。
善用 setupOrReset：在 beforeEach 中坚持使用 setupOrReset，它比每次都重新创建页面（browser.newPage）要快得多，能显著缩短整个测试套件的运行时间。
类型声明：记得检查生成的代码中是否包含 declare const editor: Editor，这对于 TypeScript 的类型检查至关重要。

这绝对是提升 tldraw 开发体验的神仙工具！如果你也想让复杂的 E2E 测试变得像切菜一样简单，建议去 Skill优仓获取这个 Skill，搭配你的 Cursor 食用，效果真的绝了！💎