ホーム>プログラミング関連>その他のソースコード
ダウンロード

オートプレイライト

AIを使用して劇作家テストを実行します。

設定

  1. auto-playwright依存関係をインストールします： 
npm install auto-playwright -D
  1. このパッケージは、Openai（https://openai.com/）との会話に依存しています。 APIトークンを環境変数としてエクスポートするか、 .envファイルに追加する必要があります。 
 export OPENAI_API_KEY= ' sk-..."
  1. auto機能をインポートして使用します。 
 import { test , expect } from "@playwright/test" ;
import { auto } from "auto-playwright" ;

test ( "auto Playwright example" , async ( { page } ) => {
  await page . goto ( "/" ) ;

  // `auto` can query data
  // In this case, the result is plain-text contents of the header
  const headerText = await auto ( "get the header text" , { page , test } ) ;

  // `auto` can perform actions
  // In this case, auto will find and fill in the search text input
  await auto ( `Type " ${ headerText } " in the search box` , { page , test } ) ;

  // `auto` can assert the state of the website
  // In this case, the result is a boolean outcome
  const searchInputHasHeaderText = await auto ( `Is the contents of the search box equal to " ${ headerText } "?` , { page , test } ) ;

  expect ( searchInputHasHeaderText ) . toBe ( true ) ;
} ) ;

Azure Openaiでセットアップ

azure openaiに接続するために必要な値を備えたstepoptionsタイプを含めます。 

 import { test , expect } from "@playwright/test" ;
import { auto } from "auto-playwright" ;
import { StepOptions } from "../src/types" ;

const apiKey = "apikey" ;
const resource = "azure-resource-name" ;
const model = "model-deployment-name" ;

const options : StepOptions = {
   model : model ,
   openaiApiKey : apiKey ,
   openaiBaseUrl : `https:// ${ resource } .openai.azure.com/openai/deployments/ ${ model } ` ,
   openaiDefaultQuery : { 'api-version' : "2023-07-01-preview" } ,
   openaiDefaultHeaders : { 'api-key' : apiKey }
} ;

test ( "auto Playwright example" , async ( { page } ) => {
  await page . goto ( "/" ) ;

  // `auto` can query data
  // In this case, the result is plain-text contents of the header
  const headerText = await auto ( "get the header text" , { page , test } , options ) ;

  // `auto` can perform actions
  // In this case, auto will find and fill in the search text input
  await auto ( `Type " ${ headerText } " in the search box` , { page , test } , options ) ;

  // `auto` can assert the state of the website
  // In this case, the result is a boolean outcome
  const searchInputHasHeaderText = await auto ( `Is the contents of the search box equal to " ${ headerText } "?` , { page , test } , options ) ;

  expect ( searchInputHasHeaderText ) . toBe ( true ) ;
} ) ;

使用法

少なくとも、 auto関数には、プレーンテキストプロンプトと、 pageとtest （オプション）オブジェクトを含む引数が必要です。 

 auto ( "<your prompt>" , { page , test } ) ;

ブラウザオートメーション

testパラメーターなしで実行する： 

 import { chromium } from "playwright" ;
import { auto } from "auto-playwright" ;

( async ( ) => {
  const browser = await chromium . launch ( { headless : true } ) ;
  const context = await browser . newContext ( ) ;
  const page = await context . newPage ( ) ;
  // Navigate to a website
  await page . goto ( "https://www.example.com" ) ;

  // `auto` can query data
  // In this case, the result is plain-text contents of the header
  const res = await auto ( "get the header text" , { page } ) ;

  // use res.query to get a query result.
  console . log ( res ) ;
  await page . close ( ) ;
} ) ( ) ;

デバッグ

debug属性を3番目のパラメーターとしてauto関数に渡すことができます。これにより、プロンプトとOpenAIによって実行されたコマンドが印刷されます。 

 await auto ( "get the header text" , { page , test } , { debug : true } ) ;

また、環境変数AUTO_PLAYWRIGHT_DEBUG=trueを設定することもできます。これにより、すべてのauto呼び出しのデバッグが可能になります。 

 export AUTO_PLAYWRIGHT_DEBUG=true

サポートされているブラウザ

劇作家がサポートするすべてのブラウザ。

追加のオプション

3番目の引数として渡すことができる追加のオプションがあります。 

 const options = {
  // If true, debugging information is printed in the console.
  debug : boolean ,
  // The OpenAI model (https://platform.openai.com/docs/models/overview)
  model : "gpt-4-1106-preview" ,
  // The OpenAI API key
  openaiApiKey : 'sk-...' ,
} ;

auto ( "<your prompt>" , { page , test } , options ) ;

サポートされているアクションと返品値

アクションのtype （ auto関数によって推測される）に応じて、異なる動作とリターンタイプがあります。

アクション

アクション（「クリック」など）は、リンクをクリックするなど、ページとのシミュレートされたユーザーインタラクションです。アクションは、成功した場合、「未定義」を返し、失敗した場合にエラーを投げかけます。 

 try {
  await auto ( "click the link" , { page , test } ) ;
} catch ( e ) {
  console . error ( "failed to click the link" ) ;
}

クエリ

クエリは、ページから文字列として要求されたデータを返します。 

 const linkText = await auto ( "Get the text of the first link" , { page , test } ) ;

console . log ( "The link text is" , linkText ) ;

アサート

アサーションは、 trueまたはfalseを返す質問です。 

 const thereAreThreeLinks = await auto ( "Are there 3 links on the page?" , {
  page ,
  test ,
} ) ;

console . log ( `"There are 3 links" is a ${ thereAreThreeLinks } statement` ) ;

なぜオートプレイライトを使用するのですか？

側面従来のアプローチオートプレイライトでのテスト
マークアップとのカップリングアプリケーションのマークアップに強くリンクしています。セレクターの使用を排除します。アクションは、実行時にAIアシスタントによって決定されます。
実装速度各アクションの正確なコード翻訳が必要なため、実装が遅くなります。アクションとアサーションのためのシンプルで単純なテキストの指示を使用した迅速なテスト作成。
複雑なシナリオの処理複雑なシナリオの自動化は挑戦的であり、頻繁に失敗する傾向があります。意図したテスト結果に焦点を当てることにより、複雑なシナリオのテストを容易にします。
テストライティングタイミング機能の完全な開発後にのみテストを作成できます。テスト駆動型開発（TDD）アプローチを可能にし、機能開発と同時にテストライティングを可能にします。

サポートされた劇作家の行動

  • locator.blur
  • locator.boundingBox
  • locator.check
  • locator.clear
  • locator.click
  • locator.count
  • locator.fill
  • locator.getAttribute
  • locator.innerHTML
  • locator.innerText
  • locator.inputValue
  • locator.isChecked
  • locator.isEditable
  • locator.isEnabled
  • locator.isVisible
  • locator.textContent
  • locator.uncheck
  • page.goto

新しいアクションの追加は簡単です。SRC src/completeTask.tsのfunctionsを更新するだけです。

価格設定

このライブラリは無料です。ただし、OpenAIの使用にはコストがあります。価格の詳細については、https：//openai.com/pricing/をご覧ください。

例

例として、https：//ray.run/を使用すると、テストステップを実行するコストは、GPT-4ターボを使用して約0.01ドルです（GPT-3.5ターボを使用して0.001ドル）。

auto-playwright HTMLサニタイゼーションを使用してペイロードサイズを削減するため、低コストの一部です。たとえば、https：//ray.run/に送信されるペイロードです。

当然、価格はペイロードによって劇的に異なります。 

 < div class =" cYdhWw dKnOgO geGbZz bGoBgk jkEels " >
  < div class =" kSmiQp fPSBzf bnYmbW dXscgu xJzwH jTWvec gzBMzy " >
    < h1 class =" fwYeZS fwlORb pdjVK bccLBY fsAQjR fyszFl WNJim fzozfU " >
      Learn Playwright
    </ h1 >
    < h2 class =" cakMWc ptfck bBmAxp hSiiri xJzwS gnfYng jTWvec fzozfU " >
      Resources for learning end-to-end testing using Playwright automation
      framework
    </ h2 >
    < div
      class =" bLTbYS gvHvKe cHEBuD ddgODW jsxhGC kdTEUJ ilCTXp iQHbtH yuxBn ilIXfy gPeiPq ivcdqp isDTsq jyZWmS ivdkBK cERSkX hdAwi ezvbLT jNrAaV jsxhGJ fzozCb "
    > </ div >
  </ div >
  < div class =" cYdhWw dpjphg cqUdSC fasMpP " >
    < a
      class =" gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group "
      href =" /blog "
      > < div class =" plfYl bccLBY hSiiri fNBpvX " > Blog </ div >
      < div class =" jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu " >
        < p > Learn in depth subjects about end-to-end testing. </ p >
      </ div > </ a
    > < a
      class =" gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group "
      href =" /ask "
      > < div class =" plfYl bccLBY hSiiri fNBpvX " > Ask AI </ div >
      < div class =" jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu " >
        < p > Ask ChatGPT Playwright questions. </ p >
      </ div > </ a
    > < a
      class =" gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group "
      href =" /tools "
      > < div class =" plfYl bccLBY hSiiri fNBpvX " > Dev Tools </ div >
      < div class =" jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu " >
        < p > All-in-one toolbox for QA engineers. </ p >
      </ div > </ a
    > < a
      class =" gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group "
      href =" /jobs "
      > < div class =" plfYl bccLBY hSiiri fNBpvX " > QA Jobs </ div >
      < div class =" jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu " >
        < p > Handpicked QA and Automation opportunities. </ p >
      </ div > </ a
    > < a
      class =" gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group "
      href =" /questions "
      > < div class =" plfYl bccLBY hSiiri fNBpvX " > Questions </ div >
      < div class =" jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu " >
        < p > Ask AI answered questions about Playwright. </ p >
      </ div > </ a
    > < a
      class =" gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group "
      href =" /discord-forum "
      > < div class =" plfYl bccLBY hSiiri fNBpvX " > Discord Forum </ div >
      < div class =" jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu " >
        < p > Archive of Discord Forum posts about Playwright. </ p >
      </ div > </ a
    > < a
      class =" gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group "
      href =" /videos "
      > < div class =" plfYl bccLBY hSiiri fNBpvX " > Videos </ div >
      < div class =" jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu " >
        < p > Tutorials, conference talks, and release videos. </ p >
      </ div > </ a
    > < a
      class =" gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group "
      href =" /browser-extension "
      > < div class =" plfYl bccLBY hSiiri fNBpvX " > Browser Extension </ div >
      < div class =" jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu " >
        < p > GUI for generating Playwright locators. </ p >
      </ div > </ a
    > < a
      class =" gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group "
      href =" /wiki "
      > < div class =" plfYl bccLBY hSiiri fNBpvX " > QA Wiki </ div >
      < div class =" jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu " >
        < p > Definitions of common end-to-end testing terms. </ p >
      </ div > </ a
    >
  </ div >
  < div
    class =" kSmiQp fPSBzf pKTba eTDpsp legDhJ hSiiri hdaZLM jTWvec gzBMzy bGySga fzoybr "
  >
    < p class =" dXhlDK leOtqz glpWRZ fNCcFz " >
      Use < kbd class =" bWhrAL XAzZz cakMWc bUyOMB bmOrOm fyszFl dTmriP " > ⌘ </ kbd > +
      < kbd > k </ kbd > + "Tools" to quickly access all tools.
    </ p >
  </ div >
</ div >

実装

HTML消毒

auto FunctionはSanitize-HTMLを使用して、ページのHTMLをSanitize sanitize openaiに送信します。これは、コストを削減し、生成されたテキストの品質を向上させるために行われます。

ZEROSTEP

このプロジェクトは、Zerostepからインスピレーションを得ています。 Zerostepは同様のAPIを提供しますが、独自のバックエンドを通じてより堅牢な実装を備えています。 Auto Playwrightは、Zerostepの基礎となるテクノロジーを探索し、ソフトウェアのオープンソースバージョンの基礎を確立することを目的として作成されました。生産環境については、Zerostepを選択することをお勧めします。

これは、オートプレイライトとゼロステップの並んで比較しています。

基準オートプレイライトZEROSTEP
Openai APIを使用しますはいいいえ1
プレーンテキストプロンプトを使用しますはいいいえ
functions sdkを使用しますはいいいえ
HTML消毒を使用しますはいいいえ
Playwright APIを使用しますはいいいえ2
スクリーンショットを使用しますいいえはい
キューを使用しますいいえはい
WebSocketsを使用しますいいえはい
スナップショットHTML dom
並列性を実装しますいいえはい
スクロールを許可しますいいえはい
備品を提供しますいいえはい
ライセンスmit mit
ゼロステップライセンス
 MIT License

Copyright (c) 2023 Reflect Software Inc

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

脚注

  1. Zerostep独自のAPIを使用します。 ↩

  2. いくつかの劇作家APIを使用しますが、主にChrome Devtoolsプロトコル（CDP）に依存しています。 ↩

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて