autospec
1.0.0
نقطة دخول الكود
Autospec هو وكيل اختبار/ضمان الجودة شامل، يستخدم نماذج الرؤية واللغة النصية لاستكشاف وإنشاء مواصفات اختبار منطقية لتطبيقات الويب. ويهدف إلى محاكاة حكم المستخدم على مخرجات واجهة المستخدم بأكملها بعد كل تفاعل لتحديد ما إذا كان سيتم إثارة خطأ حول كيفية تصرف التطبيق، بدلاً من اكتشاف الانحدارات مقابل السلوك السابق المحدد بشكل صارم.
قم بإنشاء وتشغيل 10 مواصفات على TodoMVC، وهو مثال كلاسيكي لتطبيق الويب:
npx autospecai --url https://todomvc.com/examples/react/dist/ --apikey YOUR_OPENAI_API_KEY
ستحتاج إلى قول "نعم" لتثبيت حزمة autospecai، وقد يستغرق التشغيل الأول بضع دقائق لتنزيل التبعيات مثل ثنائيات المتصفح المستخدمة لتنفيذ بيئة الاختبار.
عند اكتمال التشغيل، سترى ملخصًا للاختبارات التي تم إجراؤها وما إذا كانت قد نجحت أم فشلت.
سيتم حفظ المواصفات الناجحة داخل مجلد trajectories في دليل العمل الخاص بك. يمكنك إعادة تنفيذ هذه الاختبارات في أي وقت عن طريق تشغيل:
npx playwright test
اعتمادًا على إعداد Playwright الموجود لديك، قد تحتاج إلى إضافة "مسارات" إلى 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
تتم طباعة السجلات على وحدة التحكم بهذه الطريقة، بالإضافة إلى مجلد المسارات/** بجانب مقطع فيديو ولقطات 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. راجع ملف الترخيص للحصول على التفاصيل.
