auto playwright
v1.16.0
Führen Sie Dramatiker -Tests mit KI aus.
auto-playwright : npm install auto-playwright -D.env -Datei hinzufügen: 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 ) ;
} ) ;Fügen Sie den Stepopions -Typ mit den Werten hinzu, die für die Verbindung zu Azure OpenAI benötigt werden.
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 ) ;
} ) ; Zumindest erfordert die auto Funktion eine einfache Textaufforderung und ein Argument , das Ihre page und Ihre test (optionale) Objekte enthält.
auto ( "<your prompt>" , { page , test } ) ; Ausführen ohne den 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 ( ) ;
} ) ( ) ; Sie können ein debug -Attribut als dritter Parameter an die auto übergeben. Dadurch wird die Eingabeaufforderung und die von OpenAI ausgeführten Befehle gedruckt.
await auto ( "get the header text" , { page , test } , { debug : true } ) ; Sie können auch die Umgebungsvariable AUTO_PLAYWRIGHT_DEBUG=true festlegen, was das Debugging für alle auto Anrufe ermöglicht.
export AUTO_PLAYWRIGHT_DEBUG=trueJeder Browser, den Dramatiker unterstützt.
Es gibt zusätzliche Optionen, die Sie als drittes Argument verabschieden können:
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 ) ; Abhängig von der type der Aktion (abgeleitet durch die auto ) gibt es unterschiedliche Verhaltensweisen und Rückgabetypen.
Eine Aktion (z. B. "Click") ist eine simulierte Benutzerinteraktion mit der Seite, z. B. Klick auf einen Link. Aktionen werden "undefiniert" zurückgeben, wenn sie erfolgreich waren und einen Fehler werfen, wenn sie fehlgeschlagen sind, z. B.
try {
await auto ( "click the link" , { page , test } ) ;
} catch ( e ) {
console . error ( "failed to click the link" ) ;
}Eine Abfrage gibt angeforderte Daten von der Seite als Zeichenfolge zurück, z. B.
const linkText = await auto ( "Get the text of the first link" , { page , test } ) ;
console . log ( "The link text is" , linkText ) ; Eine Behauptung ist eine Frage, die true oder false zurückgibt, z. B.
const thereAreThreeLinks = await auto ( "Are there 3 links on the page?" , {
page ,
test ,
} ) ;
console . log ( `"There are 3 links" is a ${ thereAreThreeLinks } statement` ) ; | Aspekt | Konventioneller Ansatz | Testen mit Auto -Dramatikern |
|---|---|---|
| Kopplung mit Markup | Stark mit dem Markup der Anwendung verbunden. | Eliminiert die Verwendung von Selektoren; Die Aktionen werden zur Laufzeit vom AI -Assistenten bestimmt. |
| Implementierungsgeschwindigkeit | Langsamere Implementierung aufgrund der Bedarf an präziser Codeübersetzung für jede Aktion. | Schnelle Testerstellung mit einfachen, einfachen Textanweisungen für Aktionen und Behauptungen. |
| Umgang mit komplexen Szenarien | Die Automatisierung komplexer Szenarien ist eine Herausforderung und anfällig für häufige Ausfälle. | Erleichtert das Testen komplexer Szenarien, indem sie sich auf die beabsichtigten Testergebnisse konzentrieren. |
| Testen des Schreibens des Schreibens | Kann nur Tests nach der vollständigen Entwicklung der Funktionalität schreiben. | Ermöglicht einen testgetriebenen Entwicklungsansatz (TDD), sodass das Schreiben von Tests mit oder vor der Funktionalitätsentwicklung übereinstimmt. |
locator.blurlocator.boundingBoxlocator.checklocator.clearlocator.clicklocator.countlocator.filllocator.getAttributelocator.innerHTMLlocator.innerTextlocator.inputValuelocator.isCheckedlocator.isEditablelocator.isEnabledlocator.isVisiblelocator.textContentlocator.uncheckpage.goto Das Hinzufügen neuer Aktionen ist einfach: Aktualisieren Sie einfach die functions in src/completeTask.ts .
Diese Bibliothek ist kostenlos. Mit der Verwendung von OpenAI sind jedoch Kosten verbunden. Weitere Informationen zu Preisen finden Sie hier: https://openai.com/pricing/.
Unter Verwendung https://ray.run/ als Beispiel betragen die Kosten für den Ausführen eines Testschritts ungefähr 0,01 USD mit GPT-4-Turbo (und 0,001 USD mit GPT-3,5 Turbo).
Die niedrigen Kosten sind teilweise darauf zurückzuführen, dass auto-playwright HTML-Bereinigung verwendet, um die Nutzlastgröße zu reduzieren, z. B. was folgt die Nutzlast, die für https://ray.run/ eingereicht wird.
Natürlich variiert der Preis je nach Nutzlast dramatisch.
< 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 > Die auto Funktion verwendet sanitize-HTML, um die HTML der Seite zu sanitieren, bevor sie an Openai gesendet wird. Dies geschieht, um die Kosten zu senken und die Qualität des generierten Textes zu verbessern.
Dieses Projekt lässt sich von Zerostp inspirieren. Zerostp bietet eine ähnliche API an, jedoch mit einer robusteren Umsetzung durch das proprietäre Backend. Auto-Dramatiker wurde mit dem Ziel erstellt, die zugrunde liegende Technologie von Zerostp zu untersuchen und eine Grundlage für eine Open-Source-Version ihrer Software zu erstellen. Für Produktionsumgebungen schlage ich vor, mich für Zerostep zu entscheiden.
Hier ist ein Side-by-Side-Vergleich von Auto-Dramatikern und Zerostp:
| Kriterien | Auto -Dramatiker | Zerostp |
|---|---|---|
| Verwendet OpenAI -API | Ja | Nr . 1 |
| Verwendet einfache Textanforderungen | Ja | NEIN |
Verwendet functions SDK | Ja | NEIN |
| Verwendet HTML -Sanitisierung | Ja | NEIN |
| Verwendet Dramatiker -API | Ja | Nr . 2 |
| Verwendet Screenshots | NEIN | Ja |
| Verwendet Warteschlange | NEIN | Ja |
| Verwendet Websockets | NEIN | Ja |
| Schnappschüsse | Html | Dom |
| Implementiert Parallelität | NEIN | Ja |
| Ermöglicht das Scrollen | NEIN | Ja |
| Bietet Vorrichtungen | NEIN | Ja |
| Lizenz | 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.
Verwendet Zerostp -proprietäre API. ↩
Verwendet einige Dramatiker -API, stützt sich jedoch vorwiegend auf das Chrom Devtools -Protokoll (CDP). ↩
