How to set up Playwright and get started to use it ʕ•ᴥ•ʔ
Let’s get to know “Playwright “ ✨
ก่อนที่เราจะเริ่มทำ automation testing ด้วยเจ้าตัว Playwright เรามาทำความรู้จักกับ Playwright กันก่อนค่ะ
Playwright เป็น end-to-end testing framework ตัวนึงที่นอกจากจะโฟกัสที่การ test แล้ว ยังสามารถทำพวก browser automation ได้อีกด้วยค่ะ
โดยภาษาที่รองรับกับการใช้ Playwright ก็จะมีดังนี้
- TypeScript
- JavaScript
- Python
- .NET
- Java
ซึ่ง Playwright เป็น Test library ตัวใหม่ที่พึ่งพัฒนาขึ้นมาเมื่อไม่นานมานี้ แต่เพราะประสิทธิภาพในการทำงานของเจ้าตัวนี้ จึงทำให้ตอนนี้มีคนเริ่มหันมาสนใจใน Playwrightมากขึ้น โดยพุ่งสูงมากจนเทียบกับ library รุ่นพี่อย่าง Cypress เป็นที่เรียบร้อย
ref: https://www.libhunt.com/compare-playwright-vs-cypress
ความสามารถของเจ้าตัว Playwright ที่ถูกพูดถึงเป็นอย่างมากก็คงหนีไม่พ้น Featureต่างๆ ที่ครบครันมากกว่า Cypress ยกตัวอย่างเช่น
- Support Multiple Browser สามารถเทสแบบหลายๆ Domain พร้อมกันได้
- Support Multiple Tabs
- Support Iframe สามารถเข้าถึงตัว iframe ได้อย่างราบรื่น
- Network Event และ Mock
- รวมไปถึง Locator Strategy ที่ให้มาทุกแบบ ตั้งแต่ id, css, xpath ไปจนถึง chain และ data-test-id เป็นต้น
และอีกหนึ่งสิ่งที่ทำให้ Playwright เป็นที่นิยมอย่างรวดเร็วก็คือ Fast execution Time ซึ่งจากการทดสอบอ้างอิงจาก Checklyhq website
Speed test ref: https://blog.checklyhq.com/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/
โดยการทดสอบนี้จะทดสอบ เป็น Single end-to-end test ด้วย static website
จากรูปจะเห็นว่า Playwright ใช้เวลาโดยเฉลี่ยประมาณ 3.19 วินาทีเท่านั้นในการทดสอบ ซึ่งเร็วเป็นอันดับสอง 😲
จริงๆแล้ว Playwright ยังมี featureดีๆที่จะช่วยsupport การtestของเราอีกมากมาย นี่จะเป็นแค่ตัวอย่างส่วนนึงเท่านั้นค่ะ
สามารถเข้าไปดูและเรียนรู้ Playwright เพิ่มเติมได้ที่ → https://playwright.dev/
Let’s get started to automate testing with “Playwright “ ✨
เริ่มต้นด้วยการ Download VS Code (for mac)
1. สร้าง folder สำหรับตัว Project
mkdir newPJPlaywright2. cd Project ขึ้นมา
cd newPJPlaywright3. Install Playwright และ start project ด้วย command
npm init playwright@latest💬 You can choose for installing Playwright by using npm or yarn. Alternatively, you can also get started and run your tests using the VS Code Extension.
หลังจาก run command Playwright จะให้มี Initializing project ดังนี้
- Language → TypeScript หรือ Javascript (default is Typescript)
- Name of your Tests folder
- Add a GitHub Actions workflow to run tests on CI easily
หลังจากที่ Initial your project เสร็จ ก็จะได้หน้าตาประมาณนี้
4. เปิด Projectที่สร้างขึ้นมา ด้วย VS code
Let’s run the Example Test 🎉
เริ่มรัน Tests ด้วย command
npx playwright testเราก็จะได้ result ของ example test แบบนี้🎊
Code generator ฟีจเจอร์สำหรับ Newbies ที่ต้องการเริ่มต้นทำ automated 🫶🏻
Playwright มาพร้อมกับฟังก์ชันในการช่วยทดสอบและเป็นวิธีที่สะดวกใช้งานง่าย และรวดเร็วเหมาะสำหรับ ผู้ที่จะเริ่มเขียน automated มือใหม่ เพราะฟังก์ชัน Codegen ของ Playwright เป็นฟังก์ชันที่ไม่ซับซ้อนและใช้งานง่าย โดยที่playwright จะเปิดสองหน้าต่าง ประกอบไปด้วย หน้าต่างเบราว์เซอร์ที่เปิดเว็บไซต์ที่คุณต้องการทดสอบ และหน้าต่าง Playwright Inspector ที่คุณสามารถบันทึกการทดสอบของคุณหรือคัดลอกการทดสอบ เพื่อไปใช้งานการเขียน automate script ของคุณได้เลย
Running Codegen
การเรียกใช้ codegen ให้เปิดเบราว์เซอร์และเปิดPlaywright Inspector เพื่อให้คุณทำการทำ action ที่เบราว์เซอร์ที่คุณต้องการโดย Playwright จะ gencode มาให้อัติโนมัติใน Playwright Inspector
1. command สำหรับการเรียกใช้งาน codegen
npx playwright codegen https://playwright.dev/
2. ทำ action ตามที่คุณต้องการในฝั่งของเบราว์เซอร์และคุณสามารถ คัดลอก code ที่ Playwright Inspector เพื่อไปใช้งานการเขียน automate script ได้
Emulate viewport size
Playwright สามารถเปิดเบราว์เซอร์โดยตั้งค่าความกว้างและความสูงเฉพาะได้ คุณสามารถปรับขนาดได้ตามที่คุณต้องการที่จะทดสอบ
npx playwright codegen - viewport-size=800,600 https://playwright.dev/Emulate devices
Playwright สามารถเปิดเบราว์เซอร์โดยเลียนแบบมือถือได้
- command สำหรับการเรียกใช้งาน
npx playwright codegen - device="iPhone 11"2. ใส่ URL ที่คุณต้องการลงในฝั่งซ้ายที่เป็น เบราว์เซอร์จากนั้น Playwright Inspector จะเริ่มทำงานโดยการ generate code ให้คุณอัติโนมัติ
Emulate color scheme
Playwright สามารถเปิดเบราว์เซอร์โดยจำลองชุดสีได้
npx playwright codegen - color-scheme=darkนี่อาจจะเป็นอีกหนึ่งเหตุผลที่ทำไม Playwright เริ่มเป็นที่นิยมในวงการ automation testing เพราะการ install เพื่อใช้งานก็เป็นเรื่องที่ง่าย แถมยังมี feature สำหรับคนใหม่ๆที่ต้องการเริ่มทำ automated สามารถใช้งานง่ายและสนุกไปกับมันอีกด้วยค่ะ🥳
Environment file 🐈⬛
การ Setting environment เพื่อ support การทำTestingใน env ต่างๆตามที่เราต้องการ (io , staging, prod เป็นต้น) รวมถึงการกำหนด data test ต่างๆที่ใช้สำหรับ env นั้นๆก็เป็นสิ่งสำคัญมากๆ ซึ่งการ setting env สำหรับตัว Playwright ก็จะคล้ายๆกับการ setting สำหรับ Cypressที่เราคุ้นเคยกันค่ะ
สำหรับตัว ENV file ก็มีการ create ตัว folderขึ้นมาและใส่ตัว env ต่างๆเข้าไป
ซึ่งในตัวfile env ก็จะมีการใส่ BASE_URL ของ environment นั้นๆ รวมถึงการใส่ dataที่ใช้ในการ test envนั้นๆลงไป ตามตัวอย่างในรูปด้านล้างค่ะ
หลังจากนั้น ก็จะทำการ create common.env เพื่อไว้ใช้บอก path หรือที่อยู่ของ file env ต่างๆ แบบนี้ค่ะ
โดยที่การเรียกใช้ค่าใน file env ก็จะต้องมีการทำการ export ตัว porperty ใน file env ที่ถูกตั้งค่าไว้เพื่อให้เรียกใช้งานได้ค่ะ
หลังจากนั้นก็จะมีการ set path ด้วย globalSetup file เพื่อเรียก pathค่ะ ซึ่งจะเห็นได้ว่า จะมีการนำตัว library มาใช้ นั่นก็คือ เจ้าตัว “dotenv” ที่ไว้ใช้สำหรับ ใช้ดึงตัว env หรือ การcross env นั่นเองค่ะ
Dotenv is a zero-dependency module that loads environment variables from a
.envfile intoprocess.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology. You can see further info --> npm: dotenv
การ set up เพิ่มเติมก็จะมี file env ที่ใช้ support file globalSetup แบบนี้ค่ะ
หลังจากนั้นก็จะมีการทำ script สำหรับเรียกใช้ env ที่เรา setไว้ ใน file Package.json เพื่อให้ง่ายต่อการ run commamd ค่ะ
🗒 อย่าลืม setup ตัว globalSetup ที่อยู่ใน playwright.config.ts ให้ไปเรียกใช้ตัว globalSetup ที่เราทำไว้แบบนี้
หลังจากนั้นก็ทำการรันได้เลยย ยกตัวอย่างการรันให้เห็นภาพ
npm run env:io:chromium playwright/src/testcase/xxxx.spec.ts
เพียงเท่านี้เราก็จะสามารถรัน test ของเราได้ตาม env ที่เราต้องการแล้วว🎉
