코드 진입점
Autospec은 비전 및 텍스트 언어 모델을 사용하여 웹 애플리케이션에 대한 상식 테스트 사양을 탐색하고 생성하는 엔드투엔드 테스트/QA 에이전트입니다. 이는 엄격하게 정의된 이전 동작에 대한 회귀를 파악하는 대신 각 상호 작용 후 전체 UI 출력에 대한 사용자와 유사한 판단을 모방하여 애플리케이션 동작 방식에 대한 오류를 발생시킬지 여부를 결정하는 것을 목표로 합니다.
전형적인 예제 웹 앱인 TodoMVC에서 10개의 사양을 생성하고 실행합니다.
npx autospecai --url https://todomvc.com/examples/react/dist/ --apikey YOUR_OPENAI_API_KEY
autospecai 패키지를 설치하려면 "예"라고 대답해야 하며, 첫 번째 실행에서 테스트 환경을 실행하는 데 사용되는 브라우저 바이너리와 같은 종속성을 다운로드하는 데 몇 분이 걸릴 수 있습니다.
실행이 완료되면 실행된 테스트 요약과 테스트의 통과 또는 실패 여부가 표시됩니다.
성공적인 사양은 작업 디렉터리의 trajectories
폴더에 저장됩니다. 다음을 실행하여 언제든지 이러한 테스트를 다시 실행할 수 있습니다.
npx playwright test
기존 Playwright 설정에 따라 playwright.config.js 파일의 testDir에 "궤적"을 추가해야 할 수도 있습니다.
앱을 실행하기 전에 샘플 .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 스냅샷과 함께 trajectories/** 폴더뿐만 아니라 콘솔에도 인쇄됩니다.
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 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.