auto playwright
v1.16.0
AI를 사용하여 극작가 테스트를 실행하십시오.
auto-playwright 의존성 설치 : npm install auto-playwright -D.env 파일에 추가해야합니다. export OPENAI_API_KEY= ' sk-..."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에 연결하는 데 필요한 값이 포함 된 단계 수술 유형을 포함하십시오.
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 속성을 auto 기능에 세 번째 매개 변수로 전달할 수 있습니다. 이렇게하면 프롬프트와 OpenAI에서 실행 된 명령이 인쇄됩니다.
await auto ( "get the header text" , { page , test } , { debug : true } ) ; 환경 변수 AUTO_PLAYWRIGHT_DEBUG=true 설정할 수도 있습니다. 이는 모든 auto 호출에 대한 디버깅을 가능하게합니다.
export AUTO_PLAYWRIGHT_DEBUG=true극작가가 지원하는 모든 브라우저.
세 번째 인수로 전달할 수있는 추가 옵션이 있습니다.
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 기능으로 유추)에 따라 다른 동작과 반환 유형이 있습니다.
액션 (예 : "클릭")은 페이지와의 시뮬레이션 된 사용자 상호 작용 (예 : 링크 클릭)입니다. 행동이 성공적이면`Zondefined ''가 반환되고 실패하면 오류가 발생합니다.
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.blurlocator.boundingBoxlocator.checklocator.clearlocator.clicklocator.countlocator.filllocator.getAttributelocator.innerHTMLlocator.innerTextlocator.inputValuelocator.isCheckedlocator.isEditablelocator.isEnabledlocator.isVisiblelocator.textContentlocator.uncheckpage.goto 새로운 동작 추가는 쉽습니다. src/completeTask.ts 에서 functions 업데이트하기 만하면됩니다.
이 라이브러리는 무료입니다. 그러나 OpenAI 사용과 관련된 비용이 있습니다. 가격에 대한 자세한 내용은 https://openai.com/pricing/를 참조하십시오.
예를 들어 https://ray.run/를 사용하여 테스트 단계를 실행하는 비용은 GPT-4 터보 (및 GPT-3.5 터보를 사용하여 $ 0.001)를 사용하여 약 $ 0.01입니다.
auto-playwright HTML 소생 화를 사용하여 페이로드 크기를 줄이기 때문에 저렴한 비용이 부분적입니다.
당연히 가격은 페이로드에 따라 크게 다릅니다.
< 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 > auto 기능은 Sanitize-HTML을 사용하여 페이지의 HTML을 소독하기 전에 OpenAI로 보냅니다. 이것은 비용을 줄이고 생성 된 텍스트의 품질을 향상시키기 위해 수행됩니다.
이 프로젝트는 Zerostep에서 영감을 얻습니다. Zerostep은 유사한 API를 제공하지만 독점 백엔드를 통해보다 강력한 구현을 제공합니다. Auto Playwright는 Zerostep의 기본 기술을 탐색하고 오픈 소스 버전의 소프트웨어를위한 기초를 설정하기 위해 만들어졌습니다. 생산 환경의 경우 Zerostep을 선택하는 것이 좋습니다.
자동차 극작가와 Zerostep의 나란히 비교가 있습니다.
| 기준 | 자동차 극작가 | Zerostep |
|---|---|---|
| OpenAI API를 사용합니다 | 예 | 아니요 1 |
| 일반 텍스트 프롬프트를 사용합니다 | 예 | 아니요 |
functions SDK를 사용합니다 | 예 | 아니요 |
| HTML 소독을 사용합니다 | 예 | 아니요 |
| 극작가 API를 사용합니다 | 예 | 아니오 2 |
| 스크린 샷을 사용합니다 | 아니요 | 예 |
| 대기열을 사용합니다 | 아니요 | 예 |
| Websockets를 사용합니다 | 아니요 | 예 |
| 스냅 샷 | HTML | 돔 |
| 평행을 구현합니다 | 아니요 | 예 |
| 스크롤을 허용합니다 | 아니요 | 예 |
| 비품을 제공합니다 | 아니요 | 예 |
| 특허 | 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.
Zerostep 독점 API를 사용합니다. ↩
일부 극작가 API를 사용하지만 주로 Chrome Devtools 프로토콜 (CDP)에 의존합니다. ↩
