Playwright เป็นเฟรมเวิร์กสำหรับการทดสอบเว็บและระบบอัตโนมัติ อนุญาตให้ทดสอบ Chromium, Firefox และ WebKit ด้วย API เดียว Playwright ถูกสร้างขึ้นเพื่อให้เว็บอัตโนมัติข้ามเบราว์เซอร์ที่เป็น มิตรกับสิ่งแวดล้อม มีความสามารถ เชื่อถือได้ และ รวดเร็ว
| ลินุกซ์ | ระบบปฏิบัติการ macOS | หน้าต่าง | |
|---|---|---|---|
| โครเมียม 131.0.6778.33 | |||
| เว็บคิท 18.0 | |||
| ไฟร์ฟอกซ์ 132.0 |
รองรับการดำเนินการ Headless สำหรับเบราว์เซอร์ทั้งหมดบนทุกแพลตฟอร์ม ตรวจสอบข้อกำหนดของระบบเพื่อดูรายละเอียด
กำลังมองหานักเขียนบทละครสำหรับ Python, .NET หรือ Java อยู่ใช่ไหม?
Playwright มีผู้ทดสอบของตัวเองสำหรับการทดสอบแบบ end-to-end เราเรียกมันว่า Playwright Test
วิธีที่ง่ายที่สุดในการเริ่มต้นใช้งาน Playwright Test คือการรันคำสั่ง init
# Run from your project's root directory
npm init playwright@latest
# Or create a new project
npm init playwright@latest new-projectซึ่งจะสร้างไฟล์การกำหนดค่า โดยอาจเพิ่มตัวอย่าง เวิร์กโฟลว์ GitHub Action และตัวอย่างการทดสอบแรกก็ได้ ตอนนี้คุณสามารถข้ามไปยังส่วนการเขียนคำยืนยันได้โดยตรง
เพิ่มการพึ่งพาและติดตั้งเบราว์เซอร์
npm i -D @playwright/test
# install supported browsers
npx playwright installคุณสามารถเลือกติดตั้งเฉพาะเบราว์เซอร์ที่เลือกได้ โปรดดูรายละเอียดเพิ่มเติมในการติดตั้งเบราว์เซอร์ หรือคุณสามารถติดตั้งเบราว์เซอร์ไม่ได้เลยและใช้ช่องเบราว์เซอร์ที่มีอยู่
รออัตโนมัติ นักเขียนบทละครรอให้องค์ประกอบต่างๆ ดำเนินการได้ก่อนที่จะดำเนินการ นอกจากนี้ยังมีกิจกรรมวิปัสสนามากมาย ทั้งสองอย่างรวมกันช่วยลดความจำเป็นในการหมดเวลาปลอม ซึ่งเป็นสาเหตุหลักของการทดสอบที่ไม่สม่ำเสมอ
การยืนยันเว็บครั้งแรก การยืนยันนักเขียนบทละครถูกสร้างขึ้นโดยเฉพาะสำหรับเว็บไดนามิก การตรวจสอบจะถูกลองอีกครั้งโดยอัตโนมัติจนกว่าจะตรงตามเงื่อนไขที่จำเป็น
การติดตาม กำหนดค่ากลยุทธ์การลองทดสอบใหม่ บันทึกการติดตามการดำเนินการ วิดีโอ และภาพหน้าจอเพื่อกำจัดข้อบกพร่อง
เบราว์เซอร์เรียกใช้เนื้อหาเว็บที่เป็นของต้นกำเนิดที่แตกต่างกันในกระบวนการที่แตกต่างกัน นักเขียนบทละครสอดคล้องกับสถาปัตยกรรมของเบราว์เซอร์สมัยใหม่และทำการทดสอบนอกกระบวนการ สิ่งนี้ทำให้ Playwright ปราศจากข้อจำกัดทั่วไปของตัวดำเนินการทดสอบในกระบวนการ
หลายอย่างทุกอย่าง ทดสอบสถานการณ์ที่ครอบคลุมหลายแท็บ หลายต้นทาง และผู้ใช้หลายราย สร้างสถานการณ์ที่มีบริบทที่แตกต่างกันสำหรับผู้ใช้ที่แตกต่างกัน และเรียกใช้กับเซิร์ฟเวอร์ของคุณ ทั้งหมดในการทดสอบเดียว
เหตุการณ์ที่เชื่อถือได้ วางองค์ประกอบต่างๆ โต้ตอบกับการควบคุมแบบไดนามิก และสร้างเหตุการณ์ที่เชื่อถือได้ นักเขียนบทละครใช้ไปป์ไลน์อินพุตของเบราว์เซอร์จริงซึ่งแยกไม่ออกจากผู้ใช้จริง
ทดสอบเฟรม เจาะ Shadow DOM ตัวเลือกนักเขียนบทละครเจาะเงา DOM และอนุญาตให้เข้าสู่เฟรมได้อย่างราบรื่น
บริบทของเบราว์เซอร์ นักเขียนบทละครสร้างบริบทของเบราว์เซอร์สำหรับการทดสอบแต่ละครั้ง บริบทของเบราว์เซอร์เทียบเท่ากับโปรไฟล์เบราว์เซอร์ใหม่ล่าสุด ซึ่งให้การแยกการทดสอบเต็มรูปแบบโดยไม่มีค่าใช้จ่ายเป็นศูนย์ การสร้างบริบทเบราว์เซอร์ใหม่ใช้เวลาเพียงไม่กี่มิลลิวินาทีเท่านั้น
เข้าสู่ระบบครั้งเดียว บันทึกสถานะการรับรองความถูกต้องของบริบทและนำมาใช้ใหม่ในการทดสอบทั้งหมด วิธีนี้จะข้ามการดำเนินการเข้าสู่ระบบซ้ำๆ ในการทดสอบแต่ละครั้ง แต่ยังให้การทดสอบอิสระที่แยกออกจากกันอย่างสมบูรณ์
โคเดเจน . สร้างการทดสอบโดยบันทึกการกระทำของคุณ บันทึกเป็นภาษาใดก็ได้
สารวัตรนักเขียนบทละคร . ตรวจสอบหน้า สร้างตัวเลือก ดำเนินการทดสอบทีละขั้นตอน ดูจุดคลิก และสำรวจบันทึกการดำเนินการ
โปรแกรมดูการติดตาม รวบรวมข้อมูลทั้งหมดเพื่อตรวจสอบความล้มเหลวในการทดสอบ การติดตามนักเขียนบทละครประกอบด้วย Screencast การดำเนินการทดสอบ, สแน็ปช็อต DOM แบบสด, Action Explorer, แหล่งที่มาของการทดสอบ และอื่นๆ อีกมากมาย
กำลังมองหานักเขียนบทละครสำหรับ TypeScript, JavaScript, Python, .NET หรือ Java อยู่ใช่ไหม?
หากต้องการเรียนรู้วิธีเรียกใช้ตัวอย่าง Playwright Test เหล่านี้ โปรดดูเอกสารเริ่มต้นใช้งานของเรา
ข้อมูลโค้ดนี้จะนำทางไปยังหน้าแรกของ Playwright และบันทึกภาพหน้าจอ
import { test } from '@playwright/test' ;
test ( 'Page Screenshot' , async ( { page } ) => {
await page . goto ( 'https://playwright.dev/' ) ;
await page . screenshot ( { path : `example.png` } ) ;
} ) ; ข้อมูลโค้ดนี้จะจำลอง Mobile Safari บนอุปกรณ์ตามตำแหน่งทางภูมิศาสตร์ที่กำหนด ไปที่ map.google.com ดำเนินการและถ่ายภาพหน้าจอ
import { test , devices } from '@playwright/test' ;
test . use ( {
... devices [ 'iPhone 13 Pro' ] ,
locale : 'en-US' ,
geolocation : { longitude : 12.492507 , latitude : 41.889938 } ,
permissions : [ 'geolocation' ] ,
} )
test ( 'Mobile and geolocation' , async ( { page } ) => {
await page . goto ( 'https://maps.google.com' ) ;
await page . getByText ( 'Your location' ) . click ( ) ;
await page . waitForRequest ( / .*preview/pwa / ) ;
await page . screenshot ( { path : 'colosseum-iphone.png' } ) ;
} ) ; ข้อมูลโค้ดนี้จะนำทางไปยัง example.com และรันสคริปต์ในบริบทของหน้า
import { test } from '@playwright/test' ;
test ( 'Evaluate in browser context' , async ( { page } ) => {
await page . goto ( 'https://www.example.com/' ) ;
const dimensions = await page . evaluate ( ( ) => {
return {
width : document . documentElement . clientWidth ,
height : document . documentElement . clientHeight ,
deviceScaleFactor : window . devicePixelRatio
}
} ) ;
console . log ( dimensions ) ;
} ) ; ข้อมูลโค้ดนี้ตั้งค่าการกำหนดเส้นทางคำขอสำหรับเพจเพื่อบันทึกคำขอเครือข่ายทั้งหมด
import { test } from '@playwright/test' ;
test ( 'Intercept network requests' , async ( { page } ) => {
// Log and continue all network requests
await page . route ( '**' , route => {
console . log ( route . request ( ) . url ( ) ) ;
route . continue ( ) ;
} ) ;
await page . goto ( 'http://todomvc.com' ) ;
} ) ; 
