Playwright là gì

  -  

Như chúng ta đã biết, những headles browsers có khả năng thực thi mã JavaScript cấp tốc và mô phỏng việc nhấp hoặc di loài chuột vào các phần tử trên trang trên các thiết bị khác nhau. Những headles browsers cũng cực kì hữu ích lúc kiểm tra vận động mạng, bắt chước các hành vi của người dùng khi sử dụng và tạo các requests. Chúng thường cấp tốc hơn các trình chăm chú thực vì ta không bắt buộc khởi động GUI của trình duyệt, vậy phải ta có thể bỏ qua thời gian trình để ý thực yêu cầu để sở hữu CSS cùng JavaScript với hiển thị HTML. Bởi vì vậy, chúng thường được áp dụng trong quy trình kiểm test tự đông nhằm bảo đảm mọi thứ hoạt động như dự định trước khi mã nguồn được tiến hành lên môi trường xung quanh production. Gồm nhiều chiến thuật để viết các ca kiểm thử thực hiện headless browser với trong bài viết này, bọn họ sẽ cùng mọi người trong nhà tìm hiều về thư viện Playwright.

Bạn đang xem: Playwright là gì

Playwright là gì?

Playwright is a Node.js library to automate Chromium, Firefox và WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

Dựa vào phần reviews Playwright, ta có thể hiểu qua rằng nó là 1 thư viện Node.js để auto hóa Chromium, Firefox với WebKit bằng một API duy nhất. Thư viện Playwright được xây dựng làm cho phép tự động hóa hóa website trên nhiều trình duyệt, luôn được update các phiên bản mới nhất, ổn định, hiệu quả, đáng tin cậy và nhanh chóng. Playwright được viết vày đội ngũ lập trình viên tới từ Microsoft, là dữ án mã mối cung cấp mở, mã nguồn của nó được hỗ trợ trên Github tại https://github.com/microsoft/playwright

*
Playwright được phát hành để auto hóa phần lớn các bản lĩnh trình chăm bẵm web, hồ hết thứ ngày càng thịnh hành rộng rãi được sử dụng bởi Single Page Apps cùng Progressive website Apps. Cùng với Playwright hỗ trợ cho chúng ta nhiều tiện ích như sau:

Thực hiện những kịch bản kiểm demo kéo dài bao hàm nhiều trang, tên miền cùng iframeTự động chờ các thành phần sẵn sàng trước khi triển khai các hành vi (như nhấp chuột, điền form, ...)Chặn vận động mạng so với các yêu ước mạng bắt trước và giả mạoMô phỏng thiết bị di động, địa chỉ địa lý, và sự cai quản quyềnHỗ trợ những thành phần web thông qua shadow-piercing selectorsSự kiện đầu vào native cho chuột với bàn phímTải lên và mua xuống tệpBắt đầu làm cho quen với Playwright

Giả sử bạn đã setup Node cũng chính vì Playwright là 1 trong những thư viện của Node mà lại :v (Nếu không, không sao, hãy truy cập trang web chính thức của Node.js và mua xuống và thiết đặt nó.)

Tiếp theo, hãy tạo nên một thư mục đến project của người sử dụng và khởi tạo một project Node mới phía bên trong thư mục bởi câu lệnh sau:

mkdir playright-example && cd playright-example && npm init -ySau khi tùy chỉnh thiết lập xong project, bạn có thể bắt đầu viết các headless tests. Để làm cho được điều đó, chúng ta cần setup thư viện Playwright và tạo ra một tệp mang tên là index.js nơi công ty chúng tôi viết mã cho quy trình kiểm thử.

touch index.js && npm i --save playwrightCâu lệnh trên thiết đặt Playwright và những tệp nhị phân cho Chromium, Firefox cùng WebKit. Sau khi cài đặt, bạn cũng có thể import thư viện Playwright.

Xem thêm: Cover Letter Là Gì - Mẫu Và Cách Viết Cover Letter Tiếng Anh Chuẩn

Viết các headless tests

Để solo giản, đối với ca kiểm demo đầu tiên, bọn họ sẽ truy vấn whatsmyuseragent.org và chụp lại hình ảnh màn hình của trang. Nếu chúng ta chưa biết thì whatsmyuseragent.org là 1 trong trang website hiển thị phiên bản tác nhân người dùng và dữ liệu, cũng như add IP của bạn.

*
Để có tác dụng được điều đó, chúng ta cần import những engine của các trình chuyên chú từ playwright chẳng hạn như firefox. Sau đó bằng phương pháp gọi cách làm launch để tạo một đối tượng người tiêu dùng browser tiếp nối tạo một page, vật dụng mà hoàn toàn có thể hiểu giống như như một tab khi chúng ta duyệt web bằng cách sử dụng thủ tục newPage sau cuối là dùng goto và screenshot để đi cho trang whatsmyuseragent.org với chụp màn hình. Mã nguồn cụ thể cho tệp tin index.js có thể tham khảo như sau:

const webkit, firefox, chromium = require("playwright");const simulate = async (engine) => const browser = await engine.launch(); const page = await browser.newPage(); await page.goto("http://whatsmyuseragent.org/"); await page.screenshot( path: `example-$engine._initializer.name.png` ); await browser.close();;simulate(firefox)simulate(webkit)simulate(chromium)Sau khi tiến hành đoạn mã trong file index.js, bọn họ thu được 3 file hình ảnh mới được tạo mang tên lần lượt là example-chromium.png, example-firefox.png, example-webkit.png ba file ảnh này chủ yếu là ảnh chụp screen được sản xuất khi cách thức screenshot được gọi.

example-chromiumexample-firefox.pngexample-webkit.png
*
Sử dụng Playwright với Mocha

Một điều quan trọng đặc biệt cần để ý về Playwright, y hệt như nhiều luật kiểm tra auto khác, nó được thiết kế với để auto hóa liên can với trình duyệt, nhưng các bạn phải áp dụng công cụ chứng thực để auto hóa quá trình kiểm thử. Và trong nội dung bài viết này bọn họ sẽ trải nghiệm thư viện Mocha cùng rất Playwright. Trình làng qua thì Mocha là một trình chạy chạy thử Javascript / NodeJS phổ biến, cực tốt cho xem sét E2E. Tủ sách này chuyển động rất giỏi khi kết hợp với Playwright. Chúng ta cũng có thể tạo những ca kiểm thử, sử dụng các công cụ chứng thực và sinh sản các báo cáo kiểm thử.

Xem thêm: Ontario Securities Commission ( Osc Là Gì ? Ý Nghĩa Của Từ Osc

Bây tiếng ta hoàn toàn có thể tạo một kịch bản kiểm thử cơ bản kiểm thử website http://todomvc.com/examples/react/#/ Thông thường, ta sẽ khởi tạo các tệp này vào một folder test, với tên tệp dứt bằng .spec.js:

const playwright = require("playwright")const chai = require("chai")const expect = chai.expectconst BASE_URL = "http://todomvc.com/examples/react/#/"let page, browser, contextdescribe("TO DO ứng dụng TESTS - PLAYWRIGHT", () => beforeEach(async () => browser = await playwright<"chromium">.launch( headless: false ) context = await browser.newContext() page = await context.newPage(BASE_URL) ) afterEach(async function() await page.screenshot( path: `$this.currentTest.title.replace(/s+/g, "_").png` ) await browser.close() ) it("List is loaded empty", async() => const sel = "ul.todo-list li" const danh mục = await page.$$(sel) expect(list.length).to.equal(0) ) it("Adds a new todo in empty list", async() => await page.waitForSelector("input") const element = await page.$("input") await element.type("Practice microsoft playwright") await element.press("Enter") // check list of ToDo const sel = "ul.todo-list li" await page.waitForSelector(sel) const danh sách = await page.$$(sel) expect(list.length).to.equal(1) expect(await page.$eval(sel, node => node.innerText)).to.be.equal("Practice microsoft playwright") ))Ví dụ này sẽ áp dụng Playwright để kết nối với trình ưng chuẩn Chrome. Nó đã mở http://todomvc.com/examples/react/#/ và thực hiện hai ca kiểm demo được tư tưởng ở trên. Để chạy thử họ dùng lệnh sau:

mocha # hoặc node_modules/mocha/bin/mochaKết quả thu được như hình sau, chạy thử case thứ có lỗi có thể do bị timeout. Mocha cung cấp chúng ta biến đổi giá trị mặc định bằng cách thêm --timeout cùng giá trị thời hạn khi hotline mocha nhằm chạy test.

Sử dụng cùng với GitHub Action

Chúng ta hồ hết biết tự thành lập và hoạt động của chạy thử automation cùng Continuous Integration/Continuous Development(CI-CD) là phương án được tạo thành để bảo vệ quá trở nên tân tiến phần mềm hoạt động một biện pháp liên tục, thướt tha trong lúc vẫn bảo vệ chất lượng hàng hóa là một yêu cầu cần phải có mà GitHub Action là một trong những trong số đó. Để có thể sử dụng Playwright cùng với khối hệ thống này, bọn họ cần thực hiện một số trong những bước như sau: