autospec下載 - autospec原始碼下載

autospec

其他源碼

1.0.0

下載

自動規範

Web 應用程式的開源端對端 (e2e) 測試生成

代碼入口點

Autospec 是一個端到端測試/QA 代理，使用視覺和文字語言模型來探索和產生 Web 應用程式的常識測試規範。它的目的是在每次互動後模仿使用者對整個 UI 輸出的判斷，以決定是否引發有關應用程式行為的錯誤，而不是捕捉針對嚴格定義的先前行為的回歸。

這種方法允許 autospec 在實施後立即測試新功能，而不僅僅是檢查回歸。
它不需要配置，因此使用起來很簡單。

快速啟動

在 TodoMVC（一個經典的範例 Web 應用程式）上產生並執行 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/