Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Penulis naskah otomatis

Jalankan tes penulis naskah menggunakan AI.

Pengaturan

  1. Instal auto-playwright Dependency: 
npm install auto-playwright -D
  1. Paket ini bergantung pada berbicara dengan openai (https://openai.com/). Anda harus mengekspor token API sebagai variabel lingkungan atau menambahkannya ke file .env Anda: 
 export OPENAI_API_KEY= ' sk-..."
  1. Impor dan gunakan fungsi 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 ) ;
} ) ;

Pengaturan dengan Azure Openai

Sertakan jenis stepoptions dengan nilai yang diperlukan untuk menghubungkan ke 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 ) ;
} ) ;

Penggunaan

Paling tidak, fungsi auto memerlukan prompt teks biasa dan argumen yang berisi page dan objek test (opsional) Anda. 

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

Otomasi Browser

Berjalan tanpa parameter 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

Anda dapat melewati atribut debug sebagai parameter ketiga ke fungsi auto . Ini akan mencetak prompt dan perintah yang dieksekusi oleh OpenAI. 

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

Anda juga dapat mengatur variabel lingkungan AUTO_PLAYWRIGHT_DEBUG=true , yang akan memungkinkan debugging untuk semua panggilan auto . 

 export AUTO_PLAYWRIGHT_DEBUG=true

Browser yang didukung

Setiap browser yang didukung penulis naskah.

Opsi tambahan

Ada opsi tambahan yang dapat Anda lewati sebagai argumen ketiga: 

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

Tindakan yang Didukung & Nilai Pengembalian

Bergantung pada type tindakan (disimpulkan oleh fungsi auto ), ada perilaku dan jenis pengembalian yang berbeda.

Tindakan

Suatu tindakan (misalnya "klik") adalah beberapa interaksi pengguna yang disimulasikan dengan halaman, misalnya klik tautan. Tindakan akan mengembalikan `tidak terdefinisi`` jika mereka berhasil dan akan melakukan kesalahan jika gagal, misalnya 

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

Pertanyaan

Kueri akan mengembalikan data yang diminta dari halaman sebagai string, misalnya 

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

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

Menegaskan

Pernyataan adalah pertanyaan yang akan mengembalikan true atau false , misalnya 

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

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

Mengapa menggunakan penulis naskah otomatis?

Aspek Pendekatan konvensional Menguji dengan penulis naskah otomatis
Menggabungkan dengan markup Sangat terkait dengan markup aplikasi. Menghilangkan penggunaan pemilih; Tindakan ditentukan oleh asisten AI saat runtime.
Kecepatan implementasi Implementasi yang lebih lambat karena kebutuhan untuk terjemahan kode yang tepat untuk setiap tindakan. Penciptaan Tes Cepat Menggunakan instruksi teks sederhana dan sederhana untuk tindakan dan pernyataan.
Menangani skenario yang kompleks Mengotomatiskan skenario kompleks sangat menantang dan rentan terhadap kegagalan yang sering. Memfasilitasi pengujian skenario kompleks dengan berfokus pada hasil tes yang dimaksud.
Waktu Menulis Tes Hanya dapat menulis tes setelah pengembangan fungsionalitas yang lengkap. Memungkinkan pendekatan pengembangan uji-driven (TDD), memungkinkan penulisan tes bersamaan dengan atau sebelum pengembangan fungsionalitas.

Tindakan Playwright yang didukung

  • 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

Menambahkan tindakan baru itu mudah: cukup perbarui functions di src/completeTask.ts .

Harga

Perpustakaan ini gratis. Namun, ada biaya yang terkait dengan penggunaan OpenAI. Anda dapat menemukan informasi lebih lanjut tentang harga di sini: https://openai.com/pricing/.

Contoh

Menggunakan https://ray.run/ sebagai contoh, biaya menjalankan langkah uji sekitar $ 0,01 menggunakan GPT-4 turbo (dan $ 0,001 menggunakan GPT-3.5 Turbo).

Biaya rendah sebagian karena auto-playwright menggunakan sanitasi HTML untuk mengurangi ukuran muatan, misalnya yang berikut adalah muatan yang akan dikirimkan untuk https://ray.run/.

Secara alami, harganya akan bervariasi secara dramatis tergantung pada muatannya. 

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

Pelaksanaan

Sanitasi HTML

Fungsi auto menggunakan Sanitasi-HTML untuk membersihkan HTML halaman sebelum mengirimnya ke OpenAI. Ini dilakukan untuk mengurangi biaya dan meningkatkan kualitas teks yang dihasilkan.

Zerostep

Proyek ini menarik inspirasinya dari Zerostep. Zerostep menawarkan API yang serupa tetapi dengan implementasi yang lebih kuat melalui backend miliknya. Auto Playwright dibuat dengan tujuan menjelajahi teknologi yang mendasari Zerostep dan membangun dasar untuk versi open-source dari perangkat lunak mereka. Untuk lingkungan produksi, saya sarankan memilih nolostep.

Berikut perbandingan berdampingan dari penulis naskah otomatis dan Zerostep:

Kriteria Penulis naskah otomatis Zerostep
Menggunakan API OpenAI Ya No 1
Menggunakan petunjuk teks biasa Ya TIDAK
Menggunakan functions SDK Ya TIDAK
Menggunakan sanitasi HTML Ya TIDAK
Menggunakan API Playwright Ya No 2
Menggunakan tangkapan layar TIDAK Ya
Menggunakan antrian TIDAK Ya
Menggunakan websockets TIDAK Ya
Snapshots Html Dom
Mengimplementasikan paralelisme TIDAK Ya
Memungkinkan pengguliran TIDAK Ya
Memberikan perlengkapan TIDAK Ya
Lisensi Mit Mit
Lisensi Langkah Nol 
 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.

Catatan kaki

  1. Menggunakan Zerostep Proprietary API. ↩

  2. Menggunakan beberapa API penulis naskah, tetapi sebagian besar bergantung pada protokol Chrome Devtools (CDP). ↩

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua