autospec
1.0.0
จุดเข้ารหัส
Autospec เป็นตัวแทนการทดสอบ/QA แบบ end-to-end โดยใช้โมเดลการมองเห็นและภาษาข้อความเพื่อสำรวจและสร้างข้อกำหนดการทดสอบทั่วไปสำหรับเว็บแอปพลิเคชัน โดยมีจุดมุ่งหมายเพื่อเลียนแบบการตัดสินแบบผู้ใช้บนเอาต์พุต UI ทั้งหมดหลังจากการโต้ตอบแต่ละครั้ง เพื่อตัดสินใจว่าจะสร้างข้อผิดพลาดเกี่ยวกับวิธีการทำงานของแอปพลิเคชันหรือไม่ แทนที่จะจับการถดถอยจากพฤติกรรมก่อนหน้านี้ที่กำหนดไว้อย่างเข้มงวด
สร้างและรันข้อกำหนด 10 รายการบน TodoMVC ซึ่งเป็นเว็บแอปตัวอย่างสุดคลาสสิก:
npx autospecai --url https://todomvc.com/examples/react/dist/ --apikey YOUR_OPENAI_API_KEY
คุณจะต้องพูดว่า "ใช่" เพื่อติดตั้งแพ็คเกจ autospecai และการรันครั้งแรกอาจใช้เวลาสักครู่เพื่อดาวน์โหลดการขึ้นต่อกัน เช่น ไบนารีของเบราว์เซอร์ที่ใช้ในการรันสภาพแวดล้อมการทดสอบ
เมื่อการรันเสร็จสิ้น คุณจะเห็นสรุปการทดสอบที่ดำเนินการและไม่ว่าการทดสอบจะผ่านหรือล้มเหลว
ข้อมูลจำเพาะที่สำเร็จจะถูกบันทึกไว้ในโฟลเดอร์ trajectories ในไดเร็กทอรีการทำงานของคุณ คุณสามารถดำเนินการทดสอบเหล่านี้ใหม่ได้ตลอดเวลาโดยเรียกใช้:
npx playwright test
ขึ้นอยู่กับการตั้งค่า Playwright ที่คุณมีอยู่ คุณอาจต้องเพิ่ม "trajectories" ให้กับ testDir ในไฟล์ playwright.config.js ของคุณ
คัดลอกไฟล์ .env ตัวอย่าง และกรอก OPENAI_API_KEY หรือ GOOGLE_GENERATIVE_AI_API_KEY ก่อนเรียกใช้แอป:
mv .env.example .env # rename the example to .env
nano .env # edit as you like > npx autospecai --help
Usage: npx autospecai --url < url > [--model < model > ] [--spec_limit < limit > ] [--help | -h ]
Required:
--url < url > The target URL to run the autospec tests against.
Optional:
--help, -h Show this help message.
--spec_limit < limit > The max number of specs to generate. Default 10.
--model < model > The model to use for spec generation
* " gpt-4o " (default)
* " gemini-1.5-flash-latest "
* " claude-3-haiku "
* (note: Gemini flash is free up to rate limits)
--apikey < key > The relevant API key for the chosen model ' s API.
* If not specified, we ' ll fall back on the
following environment variables:
* OPENAI_API_KEY
* GOOGLE_GENERATIVE_AI_API_KEY
* ANTHROPIC_API_KEY
บันทึกจะถูกพิมพ์ไปยังคอนโซลเช่นเดียวกับโฟลเดอร์ trajectories/** ข้างสแนปช็อตวิดีโอ PNG และ HTML/JSON DOM:
Test Summary:
✔ 1. Check if the page loads successfully
1.1) action: markSpecAsComplete, reason: The spec passed, fullProseExplanationOfReasoning100charmax: The page loaded successfully with all expected elements visible., planningThoughtAboutTheActionIWillTake: The page has loaded successfully as indicated by the presence of the header, input field, and footer. I will mark the spec as complete.
✔ 2. Check if the title 'todos' is displayed
2.1) action: markSpecAsComplete, reason: The spec passed, fullProseExplanationOfReasoning100charmax: The title 'todos' is displayed as an h1 element in the header section., planningThoughtAboutTheActionIWillTake: I will verify if the title 'todos' is displayed by checking the presence of the h1 element with the text 'todos'.
✔ 3. Check if the input box with placeholder 'What needs to be done?' is present
3.1) action: markSpecAsComplete, reason: The spec passed, fullProseExplanationOfReasoning100charmax: The input box with the placeholder 'What needs to be done?' is present in the HTML snapshot., planningThoughtAboutTheActionIWillTake: I will check if the input box with the placeholder 'What needs to be done?' is present in the HTML snapshot.
✔ 4. Check if a new todo item can be added
4.1) action: clickOn, cssSelector: input.new-todo, nth: 0, planningThoughtAboutTheActionIWillTake: I will move the mouse cursor to the input field to add a new todo item.
4.2) action: keyboardInputString, cssSelector: input.new-todo, nth: 0, string: Buy groceries, planningThoughtAboutTheActionIWillTake: I will type a new todo item into the input field.
4.3) action: keyboardInputSingleKey, cssSelector: input.new-todo, nth: 0, key: Enter, planningThoughtAboutTheActionIWillTake: I will press the Enter key to add the new todo item.
4.4) action: markSpecAsComplete, reason: The spec passed, fullProseExplanationOfReasoning100charmax: The new todo item 'Buy groceries' was successfully added to the list., planningThoughtAboutTheActionIWillTake: I will mark the spec as complete because the new todo item 'Buy groceries' has been successfully added.
✔ 5. Check if a todo item can be marked as completed
5.1) action: keyboardInputString, cssSelector: input.new-todo, nth: 0, string: Test Todo Item, planningThoughtAboutTheActionIWillTake: To check if a todo item can be marked as completed, I first need to add a new todo item. I will type a new todo item in the input field and press Enter.
5.2) action: keyboardInputSingleKey, cssSelector: input.new-todo, nth: 0, key: Enter, planningThoughtAboutTheActionIWillTake: I need to press Enter to add the new todo item to the list.
5.3) action: clickOn, cssSelector: input.toggle, nth: 0, planningThoughtAboutTheActionIWillTake: Now that the todo item is added, I will mark it as completed by clicking the checkbox next to the todo item.
5.4) action: markSpecAsComplete, reason: The spec passed, fullProseExplanationOfReasoning100charmax: The todo item was successfully marked as completed., planningThoughtAboutTheActionIWillTake: The todo item has been marked as completed, as indicated by the strikethrough text and the checkbox being checked. I will mark the spec as complete.
...
autospec passed for https://todomvc.com/examples/react/dist/
autospec เป็นโอเพ่นซอร์สและเรายินดีต้อนรับผู้มีส่วนร่วม! โปรดเปิดปัญหาหรือดึงคำขอเพื่อเริ่มต้น
โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ใบอนุญาตสำหรับรายละเอียด
