Page d'accueil>Lié à la programmation>Autre code source
Télécharger

Dramaturge automatique

Exécutez les tests de dramaturge en utilisant l'IA.

Installation

  1. Installez la dépendance auto-playwright : 
npm install auto-playwright -D
  1. Ce package repose sur la discussion avec Openai (https://openai.com/). Vous devez exporter le jeton API en tant que variable Enviroment ou l'ajouter à votre fichier .env : 
 export OPENAI_API_KEY= ' sk-..."
  1. Importer et utiliser la fonction 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 ) ;
} ) ;

Configuration avec Azure Openai

Incluez le type de Stepoptions avec les valeurs nécessaires à la connexion à 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 ) ;
} ) ;

Usage

Au minimum, la fonction auto nécessite une invite de texte brut et un argument qui contient votre page et test les objets (facultatifs). 

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

Automatisation du navigateur

Exécution sans le paramètre 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 ( ) ;
} ) ( ) ;

Déboguer

Vous pouvez transmettre un attribut debug comme troisième paramètre à la fonction auto . Cela imprimera l'invite et les commandes exécutées par OpenAI. 

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

Vous pouvez également définir la variable d'environnement AUTO_PLAYWRIGHT_DEBUG=true , ce qui permettra le débogage de tous les appels auto . 

 export AUTO_PLAYWRIGHT_DEBUG=true

Navigateurs pris en charge

Chaque navigateur soutient le dramaturge.

Options supplémentaires

Il existe des options supplémentaires que vous pouvez passer comme troisième argument: 

 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 ) ;

Actions prises en charge et valeurs de retour

Selon le type d'action (déduit par la fonction auto ), il existe différents comportements et types de retour.

Action

Une action (par exemple "cliquez") est une interaction utilisateur simulée avec la page, par exemple, cliquez sur un lien. Les actions renvoient «Undefined» s'ils ont réussi et lancent une erreur s'ils échouaient, par exemple 

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

Requête

Une requête renvoiera les données demandées à la page en tant que chaîne, par exemple 

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

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

Affirmer

Une affirmation est une question qui reviendra true ou false , par exemple 

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

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

Pourquoi utiliser le dramaturge automatique?

Aspect Approche conventionnelle Test avec le dramaturge automatique
Accouplement avec un balisage Fortement lié au balisage de l'application. Élimine l'utilisation de sélecteurs; Les actions sont déterminées par l'assistant AI lors de l'exécution.
Vitesse de mise en œuvre Implémentation plus lente en raison de la nécessité d'une traduction de code précise pour chaque action. Création de test rapide en utilisant des instructions de texte brut simples pour les actions et les affirmations.
Gérer des scénarios complexes L'automatisation des scénarios complexes est difficile et sujette à des échecs fréquents. Facilite le test de scénarios complexes en se concentrant sur les résultats des tests prévus.
Tester le timing de l'écriture Ne peut écrire des tests qu'après le développement complet de la fonctionnalité. Permet une approche de développement axée sur le test (TDD), permettant une écriture de test en même temps que le développement des fonctionnalités ou avant.

Actions du dramaturge soutenues

  • 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

L'ajout de nouvelles actions est facile: il suffit de mettre à jour les functions dans src/completeTask.ts .

Prix

Cette bibliothèque est gratuite. Cependant, il y a des coûts associés à l'utilisation d'OpenAI. Vous pouvez trouver plus d'informations sur les prix ici: https://openai.com/pricing/.

Exemple

En utilisant https://ray.run/ à titre d'exemple, le coût d'exécution d'une étape de test est d'environ 0,01 $ en utilisant GPT-4 Turbo (et 0,001 $ en utilisant GPT-3,5 turbo).

Le faible coût est en partie parce que auto-playwright utilise la désinfection HTML pour réduire la taille de la charge utile, par exemple ce qui suit est la charge utile qui serait soumise pour https://ray.run/.

Naturellement, le prix variera considérablement en fonction de la charge utile. 

 < 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 >

Mise en œuvre

Désinfection HTML

La fonction auto utilise la désinfecture-HTML pour désinfecter le HTML de la page avant de l'envoyer à Openai. Ceci est fait pour réduire les coûts et améliorer la qualité du texte généré.

Zérostep

Ce projet s'inspire de Zerostep. Zerostep propose une API similaire mais avec une implémentation plus robuste via son backend propriétaire. Auto Playwright a été créé dans le but d'explorer la technologie sous-jacente de Zerostep et d'établir une base pour une version open source de leur logiciel. Pour les environnements de production, je suggère d'opter pour Zerostep.

Voici une comparaison côte à côte de Auto Playwright et Zerostep:

Critères Dramaturge automatique Zérostep
Utilise une API Openai Oui N ° 1
Utilise des invites de texte brut Oui Non
Utilise functions SDK Oui Non
Utilise la désinfection HTML Oui Non
Utilise l'API du dramaturge Oui No 2
Utilise des captures d'écran Non Oui
Utilise la file d'attente Non Oui
Utilise les websockets Non Oui
Instantanés Html Dom
Implémente le parallélisme Non Oui
Permet de faire défiler Non Oui
Fournit des luminaires Non Oui
Licence Mit Mit
Licence zéro pas 
 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.

Notes de bas de page

  1. Utilise une API propriétaire de Zerostep. ↩

  2. Utilise une API du dramaturge, mais s'appuie principalement sur le protocole Chrome Devtools (CDP). ↩

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout