ສຳລັບທີມພັດທະນາ ແລະ ທີມ QA

ມາດຕະຖານດຽວສຳລັບ test idPlaywright ທີ່ບໍ່ພັງເມື່ອມີການ refactor

AI ສະເໜີ id ສ່ວນຄົນຍັງເປັນຜູ້ຄວບຄຸມ

tidwright ໃຫ້ AI ເພີ່ມ data-testid ຕາມຂໍ້ກຳນົດດຽວກັນທົ່ວທັງໂປຣເຈັກ ພ້ອມການກວດສອບເພື່ອໃຫ້ໂຄດຍັງ build ໄດ້ ຈາກນັ້ນ QA ຂຽນ E2E ເທິງ id ເຫຼົ່ານັ້ນຜ່ານ getByTestId ໂດຍບໍ່ຕ້ອງອ່ານ source ຫຼື ຄາດເດົາ CSS selector

ເບິ່ງຄວາມແຕກຕ່າງເລີ່ມຕົ້ນໃຊ້ງານ
/plugin install tidwright@tidwright-marketplace
  • ບໍ່ມີ runtime dependency
  • ບໍ່ຂຽນໄຟລ໌ຖ້າຍັງບໍ່ໄດ້ຮັບການອະນຸມັດ
  • ຄືນໄຟລ໌ທັງໝົດຖ້າ build ບໍ່ຜ່ານ

React · Next · Vue · Nuxt · Svelte · Angular · HTML

01ປຽບທຽບ02ຂັ້ນຕອນການເຮັດວຽກ03ປະໂຫຍດທີ່ໄດ້ຮັບ04ມາດຕະຖານ id05ຄວາມປອດໄພຫຼັກຖານ
TL;DR

tidwright ເພີ່ມ data-testid ໃຫ້ໂຄດຂອງທ່ານຕາມມາດຕະຖານດຽວ ໂດຍເຄື່ອງມືເຮັດການແກ້ໄຂຊຸດທີ່ປອດໄພ ສ່ວນທີ່ເຫຼືອ AI ຕັດສິນຜ່ານ plan ທີ່ຜ່ານການກວດສອບ parser ເປັນຜູ້ກຳນົດຕຳແໜ່ງການແກ້ໄຂທຸກຈຸດ build ຕ້ອງຜ່ານ ບໍ່ດັ່ງນັ້ນໄຟລ໌ທັງໝົດຈະຖືກຄືນສະພາບ ແລະ ບໍ່ມີການຂຽນໄຟລ໌ຖ້າຍັງບໍ່ໄດ້ຮັບການອະນຸມັດ ຈາກນັ້ນ QA ຂຽນ Playwright test ເທິງ id ເຫຼົ່ານັ້ນ

01ປຽບທຽບ

ຄວາມແຕກຕ່າງລະຫວ່າງການໃຊ້ ແລະ ບໍ່ໃຊ້

ປຽບທຽບວິທີເຮັດວຽກຂອງທີມ ກ່ອນ ແລະ ຫຼັງມີມາດຕະຖານ

ຫົວຂໍ້
ບໍ່ໃຊ້ tidwright
ໃຊ້ tidwright
ການຕັ້ງຊື່ id
ບໍ່ໃຊ້ tidwrightແຕ່ລະຄົນຕັ້ງຊື່ເອງ (btn1, submitBtn) ເຮັດໃຫ້ test ພັງທຸກຄັ້ງທີ່ refactor
ໃຊ້ tidwrightໃຊ້ໄວຍາກອນດຽວ <area>-<element>-<type> ເຊັ່ນ login-submit-button ແລະ lint ບັງຄັບໃຊ້
ການຫາ selector ຂອງ QA
ບໍ່ໃຊ້ tidwrightອ່ານ source ຂອງແອັບ ຫຼື ຖອຍໄປໃຊ້ CSS, XPath ແລະ ຂໍ້ຄວາມ
ໃຊ້ tidwrightອ່ານລາຍການ e2e/TESTIDS.md ທີ່ສ້າງໃຫ້ ແລະ ໃຊ້ getByTestId ເທົ່ານັ້ນ
ການເພີ່ມ id ທັງຟີເຈີ
ບໍ່ໃຊ້ tidwrightເພີ່ມດ້ວຍມືເທື່ອລະ element ແລະ ບໍ່ເຄີຍສຳເລັດ
ໃຊ້ tidwrightເຄື່ອງມືເພີ່ມຊຸດທີ່ປອດໄພໃນຮອບດຽວ ສ່ວນທີ່ເຫຼືອ AI ຕັດສິນຜ່ານ plan ທີ່ຜ່ານການກວດສອບ ບໍ່ແກ້ໄຟລ໌ໂດຍກົງ
ຄວາມສ່ຽງທີ່ແອັບຈະພັງ
ບໍ່ໃຊ້ tidwrightຕ້ອງອ່ານ diff ທຸກແຖວດ້ວຍຕົນເອງ
ໃຊ້ tidwrightກວດດ້ວຍ parser ຂອງໂປຣເຈັກ ແລະ typecheck/build ຕ້ອງຜ່ານທັງກ່ອນ ແລະ ຫຼັງ ຖ້າບໍ່ດັ່ງນັ້ນໄຟລ໌ທັງໝົດຈະຖືກຄືນສະພາບ
id ຊ້ຳໃນ DOM
ບໍ່ໃຊ້ tidwrightພົບເມື່ອ test ເລີ່ມບໍ່ໝັ້ນຄົງ ຫຼື ບໍ່ພົບເລີຍ
ໃຊ້ tidwrightguard ໃນ unit test ແລະ E2E ເຮັດໃຫ້ test ລົ້ມເຫຼວ ພ້ອມລາຍງານ id ແລະ ຈຳນວນທີ່ຊ້ຳ
spec ໃຊ້ id ທີ່ source ລຶບໄປແລ້ວ
ບໍ່ໃຊ້ tidwrightພົບເມື່ອການຣັນລົ້ມເຫຼວ
ໃຊ້ tidwright/tidwright:audit ກວດພົບກ່ອນຣັນ ພ້ອມກວດ sleep, .only ແລະ credential ໃນ spec
ຜູ້ຮັບຜິດຊອບ selector
ບໍ່ໃຊ້ tidwrightທີມພັດທະນາ ແລະ QA ໂຕ້ແຍ້ງກັນ
ໃຊ້ tidwrightກຳນົດເປັນຂໍ້ຕົກລົງເປັນລາຍລັກອັກສອນ: ທີມພັດທະນາເປັນເຈົ້າຂອງ id, QA ເປັນເຈົ້າຂອງ test ແລະ auditor ກວດຈັບຄວາມຄາດເຄື່ອນ

ຕົວຢ່າງກ່ອນ ແລະ ຫຼັງ

- <button onClick={save}>Save</button>
+ <button data-testid="order-form-save-button" onClick={save}>Save</button>
- <input name="customerName" />
+ <input data-testid="order-form-customer-name-input" name="customerName" />

ຜົນລັບຈິງຂອງ scan --write ກັບໄຟລ໌ OrderForm.tsx ປຸ່ມ Save ທີ່ຊື່ມາຈາກຂໍ້ຄວາມເທົ່ານັ້ນ ຈະຖືກສະແດງເພື່ອໃຫ້ກວດສອບ ເວັ້ນແຕ່ລະບຸ --accept-text

02ຂັ້ນຕອນການເຮັດວຽກ

ຂັ້ນຕອນການເຮັດວຽກ

ຫ້າຂັ້ນຕອນ ແລະ ຈະບໍ່ມີການຂຽນໄຟລ໌ຖ້າຍັງບໍ່ໄດ້ຮັບການອະນຸມັດ

  1. Scanparser ຂອງໂປຣເຈັກລະບຸຕຳແໜ່ງຂອງທຸກ element ທີ່ test ຈະໃຊ້ (ປຸ່ມ ລິ້ງ ຊ່ອງປ້ອນຂໍ້ມູນ ຟອມ) ແລະ ສະເໜີຊື່ມາດຕະຖານ ມີພຽງຊຸດຍ່ອຍທີ່ຈຳກັດເທົ່ານັ້ນທີ່ຖືກຈັດວ່າປອດໄພ ສ່ວນທີ່ເຫຼືອເປັນຄິວກວດສອບພ້ອມເຫດຜົນກຳກັບທຸກລາຍການ
  2. ເພີ່ມ idເຄື່ອງມືຂຽນຊຸດທີ່ປອດໄພ ສ່ວນທີ່ເຫຼືອ AI ເປັນຜູ້ຕັດສິນຜ່ານ plan ທີ່ຜ່ານການກວດສອບ (element ໃນ loop ຈະໄດ້ ${key} ທີ່ຄົງທີ່) ແລະ ຕ້ອງມີຜູ້ອະນຸມັດກ່ອນຂຽນທຸກຄັ້ງ
  3. ກວດສອບໃນ transaction ດຽວໄຟລ໌ທີ່ແກ້ໄຂຖືກ parse ຄືນ typecheck/build ຕ້ອງຜ່ານ ແລະ ຖ້າລະບຸ --smoke ຈະມີການກວດໃນບຣາວເຊີວ່າ id ບໍ່ຊ້ຳ ແລະ ຄົບຖ້ວນ ຖ້າຂັ້ນຕອນໃດທີ່ຣັນລົ້ມເຫຼວ ໄຟລ໌ທັງໝົດຈະຖືກຄືນສະພາບ
  4. Catalogໄຟລ໌ e2e/TESTIDS.md ຖືກສ້າງໃຫ້ QA ທຸກຄັ້ງທີ່ຂຽນ ໂດຍລະບຸວິທີກຳນົດຂອງແຕ່ລະ id
  5. QA ຂຽນ testspec ໃຊ້ getByTestId ແລະ ການ audit ກວດພົບ id ທີ່ spec ໃຊ້ແຕ່ source ບໍ່ມີແລ້ວ
Scan, ເພີ່ມ id ດ້ວຍ AI, ກວດ compile, catalog, QA ຂຽນ test

03ປະໂຫຍດທີ່ໄດ້ຮັບ

ປະໂຫຍດທີ່ໄດ້ຮັບ

ສິ່ງທີ່ທີມໄດ້ເພີ່ມເຕີມຈາກທີ່ບໍ່ເຄີຍມີມາກ່ອນ

ມາດຕະຖານ ແລະ lint

ລາຍການ type ແບບປິດ (button input select row modal toast page ແລະອື່ນໆ) ຫ້າມໃຊ້ຄຳຄຸມເຄືອ ເຊັ່ນ btn div red ແລະ ຫ້າມໃຊ້ຕົວເລກລອຍ ໃຫ້ໃຊ້ business id ແທນ

ສູດສຳລັບແຕ່ລະ component

recipe modal orders-delete ໃຫ້ຊຸດ id ທີ່ກຳນົດໄວ້ສຳລັບ modal, table, form, tabs ແລະ toast ບໍ່ຕ້ອງອອກແບບໃໝ່ທຸກໜ້າ

Locator helper

modal(page,"orders-delete").confirm ແລະ table(page,"orders").row(id) ສອດຄ່ອງກັບສູດທີ່ກຳນົດ

Guard ກວດ id ຊ້ຳ

template ສຳລັບ vitest/jest ແລະ Playwright fixture ທີ່ເຮັດໃຫ້ test ລົ້ມເຫຼວເມື່ອ data-testid ດຽວກັນປາກົດໃນ DOM ຫຼາຍກວ່າໜຶ່ງບ່ອນ

Auditor

ກວດພົບ sleep, .only, credential ທີ່ຂຽນຕົງໆ, selector ແບບ CSS/XPath/ຂໍ້ຄວາມ ແລະ id ທີ່ source ບໍ່ໄດ້ກຳນົດ

ຄວາມປອດໄພດ້ານ host

template playwright.config.ts ປະຕິເສດ host ທີ່ບໍ່ແມ່ນ local ເວັ້ນແຕ່ຢູ່ໃນ allow list ປ້ອງກັນການຣັນກັບ production ໂດຍບໍ່ຕັ້ງໃຈ

ລາຍງານຈາກຜູ້ພັດທະນາ (ຜູ້ອື່ນບໍ່ສາມາດກວດສອບຊ້ຳໄດ້): ກັບແອັບ React/TSX ຂະໜາດໃຫຍ່ພາຍໃນອົງກອນ guard ພົບ id ຊ້ຳ 49 ລາຍການ ເຊິ່ງ typecheck, lint ແລະ unit test ປະມານ 9,000 ລາຍການຜ່ານໄປໝົດ

04ມາດຕະຖານ id

ມາດຕະຖານ id

<area>-<element>-<type> · kebab-case ຕົວອັກສອນ ASCII · ສ່ວນທ້າຍເປັນ type ຈາກລາຍການແບບປິດ · ແຕ່ລະ id ກຳນົດໄດ້ຄັ້ງດຽວ (ລວມທັງ id ແບບ dynamic)

Component
id (<n> = ຊື່ທີ່ຕັ້ງ)
modal / drawer
<n>-modal · -title-text · -close-button · -confirm-button · -cancel-button · -error-banner
form + field
<n>-form · -submit-button · <form>-<field>-input · …-error
table
<n>-table · -row-${id} · -cell-${id}-${col} · -sort-button-${col} · -empty · -loading · -error
tabs · menu · pagination · toast
<n>-tab-${key} / -panel-${key} · -trigger-button / -item-${key} · -prev-button / -next-button · <action>-success-toast

05ຄວາມປອດໄພ

ຄວາມປອດໄພທີ່ອອກແບບໄວ້

ບໍ່ຂຽນໄຟລ໌ຖ້າບໍ່ໄດ້ສັ່ງ

scan ອ່ານຢ່າງດຽວ ການຂຽນຕ້ອງໃຊ້ --write ແລະ ຂັ້ນຕອນຂອງ AI ຈະສະແດງ dry run ແລະ ຂໍອະນຸມັດກ່ອນສະເໝີ ໄຟລ໌ທີ່ມີການແກ້ໄຂຄ້າງຢູ່ໃນ git ຈະຖືກຂ້າມ

ຊຸດອັດຕະໂນມັດທີ່ຈຳກັດໂດຍເຈດຕະນາ

ເພີ່ມສະເພາະ native element ທີ່ມີຊື່ໜ້າເຊື່ອຖື ບໍ່ຊ້ຳ ບໍ່ມີ spread ແລະ ສະແດງຜົນຈິງ ສ່ວນທີ່ເຫຼືອສະແດງເປັນລາຍການພ້ອມເຫດຜົນ

ຕຳແໜ່ງມາຈາກ parser

ໃຊ້ parser ຂອງໂປຣເຈັກເອງ (TypeScript, Vue, Svelte, Angular, parse5) ຈຶ່ງບໍ່ເຂົ້າໃຈຜິດວ່າ string, regex ຫຼື comment ເປັນ element ຖ້າບໍ່ມີ parser ຈະສະແດງລາຍການເທົ່ານັ້ນ ບໍ່ຂຽນ

build ຕ້ອງຜ່ານ ບໍ່ດັ່ງນັ້ນຄືນໄຟລ໌

--write ບັງຄັບ --verify ເຊິ່ງຕ້ອງຜ່ານທັງກ່ອນ ແລະ ຫຼັງ ຖ້າບໍ່ໄດ້ຣັນການກວດໃນບຣາວເຊີ ລາຍງານຈະລະບຸວ່າ NOT run

repo ທີ່ clone ມາສັ່ງຣັນຄຳສັ່ງເອງບໍ່ໄດ້

ຄຳສັ່ງ verify ທີ່ມາຈາກໄຟລ໌ໃນ repository ເທົ່ານັ້ນຈະບໍ່ຖືກຣັນຈົນກວ່າຜູ້ໃຊ້ຈະອະນຸມັດ

ນຳໄປໃຊ້ກັບໂຄດເດີມໄດ້

lint --write-baseline ຍອມຮັບບັນຫາທີ່ມີຢູ່ໃນປັດຈຸບັນ ຈາກນັ້ນ CI ຈະລົ້ມເຫຼວສະເພາະບັນຫາໃໝ່

06ຫຼັກຖານ

ຫຼັກຖານ

ຣັນຊ້ຳໄດ້ດ້ວຍ node tools/corpus-check.mjs ເທິງແອັບໂອເພນຊອດ 9 ໂຕທີ່ລະບຸ commit ໄວ້ (RealWorld Conduit ໃນ Vue / SvelteKit / Angular / React, elk, ngx-admin, shadcn-svelte, excalidraw, vercel/commerce)

9ແອັບຈິງ
4,691ໄຟລ໌ source ທີ່ສະແກນ
431id ທີ່ເພີ່ມໃນ 199 ໄຟລ໌
0ການແກ້ໄຂທີ່ບໍ່ແມ່ນການແຊກ attribute ລ້ວນ
0id ທີ່ເພີ່ມແລ້ວຂັດກັບມາດຕະຖານ
0ໄຟລ໌ທີ່ແກ້ໄຂແລ້ວມີ syntax error ເພີ່ມຂຶ້ນ
ພິສູດແລ້ວ
  • ເຄື່ອງມືຣັນເທິງໂຄດຈິງໄດ້ໂດຍບໍ່ລົ້ມ
  • ສິ່ງທີ່ຂຽນເປັນການແຊກ attribute ລ້ວນ (ເມື່ອລຶບ attribute ທີ່ເພີ່ມອອກຈະໄດ້ໄຟລ໌ເດີມທຸກໄບຕ໌)
  • id ທີ່ເພີ່ມເປັນໄປຕາມມາດຕະຖານ ແລະ ບໍ່ຊົນກັນ
ຍັງພິສູດບໍ່ໄດ້
  • ວ່າແອັບທີ່ແກ້ໄຂແລ້ວຍັງ compile ໄດ້ (ໃຊ້ --verify ໃນໂປຣເຈັກຂອງທ່ານ)
  • ວ່າຊື່ທີ່ສະເໜີເປັນຊື່ທີ່ດີທີ່ສຸດ
  • ວ່າ test ທີ່ຂຽນເທິງ id ເຫຼົ່ານີ້ບໍ່ໝັ້ນຄົງໜ້ອຍລົງ

07ຂໍ້ຈຳກັດ

ຂໍ້ຈຳກັດ

  • ຊື່ມາຈາກ attribute, i18n key, route ແລະ handler ບໍ່ໄດ້ມາຈາກຄວາມຮູ້ທາງທຸລະກິດ ສິ່ງທີ່ບໍ່ມີຊື່ໜ້າເຊື່ອຖືຈະສົ່ງໃຫ້ AI ຫຼື ຜູ້ໃຊ້ຕັດສິນ ຄວນ dry-run ເທື່ອລະໂຟນເດີຟີເຈີ ແລະ ອ່ານ diff ກ່ອນ --write
  • ຕ້ອງມີ parser ຂອງໂປຣເຈັກ ຖ້າບໍ່ມີ ເຄື່ອງມືຈະສະແດງລາຍການເທົ່ານັ້ນ ແລະ ບໍ່ຂຽນ
  • ສິ່ງທີ່ static analysis ບໍ່ສາມາດຮູ້ໄດ້ (portal, conditional branch, dynamic component) ຕ້ອງອາໄສການກວດໃນບຣາວເຊີ ແລະ ຜູ້ອ່ານ diff
  • ຍັງບໍ່ມີ benchmark ທີ່ສະແດງວ່າດີກວ່າ skill ຕົ້ນແບບທັງສາມໂຕ ຫຼື ວ່າ test ທີ່ຂຽນເທິງ id ເຫຼົ່ານີ້ບໍ່ໝັ້ນຄົງໜ້ອຍລົງ
  • ໃຊ້ກັບ Codex ແລະ Cursor ໄດ້ຜ່ານ AGENTS.md ແຕ່ຍັງບໍ່ເຄີຍທົດສອບໃນ Codex ຫຼື Cursor ຈິງ

08ເລີ່ມຕົ້ນໃຊ້ງານ

ເລີ່ມຕົ້ນໃຊ້ງານ

ຂັ້ນຕອນສະບັບເຕັມຂອງແຕ່ລະເອເຈນຢູ່ໃນ README ຂອງ repository (ຂໍ URL ຂອງ repository ໄດ້ຈາກທີມ)

Claude Code

ຕິດຕັ້ງ plugin ແລ້ວໃຊ້ສາມຄຳສັ່ງດ້ານລຸ່ມ

Codex

ອ່ານ AGENTS.md ທີ່ຮາກຂອງໂປຣເຈັກ ເຊິ່ງມີຂັ້ນຕອນ ແລະ ຄຳສັ່ງທີ່ຖືກຕ້ອງ

Cursor

ສຳເນົາ .cursor/rules/tidwright.mdc ເຊິ່ງຊີ້ເອເຈນໄປຍັງ AGENTS.md

# ຕິດຕັ້ງ
/plugin install tidwright@tidwright-marketplace

# ສຳຫຼວດ repo → ຂຽນ profile → scaffold (ຕ້ອງອະນຸມັດ)
/tidwright:init

# ເພີ່ມ id ໃຫ້ໜຶ່ງຟີເຈີ ແລ້ວເຜີຍແຜ່ catalog
/tidwright:testid src/features/orders

# ກວດ spec
/tidwright:audit