Như bọn họ đã biết, các headles browsers có công dụng thực thi mã JavaScript cấp tốc và tế bào phỏng câu hỏi nhấp hoặc di chuột vào các bộ phận trên trang trên các thiết bị không giống nhau. Những headles browsers cũng cực kỳ hữu ích lúc kiểm tra chuyển động mạng, bắt chước các hành vi của người dùng khi áp dụng và tạo những requests. Bọn chúng thường cấp tốc hơn những trình duyệt thực vì chưng ta không buộc phải khởi đụng GUI của trình duyệt, vậy nên ta rất có thể bỏ qua thời hạn trình coi sóc thực nên để mua CSS và JavaScript cùng hiển thị HTML. Vày vậy, bọn chúng thường được áp dụng trong quá trình kiểm thử tự đông nhằm đảm bảo an toàn mọi thứ hoạt động như dự định trước khi mã nguồn được thực thi lên môi trường xung quanh production. Tất cả nhiều phương án để viết các ca kiểm thử sử dụng headless browser cùng trong nội dung bài viết này, họ sẽ bên nhau 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 khổng lồ automate Chromium, Firefox & WebKit with a single API. Playwright is built lớn enable cross-browser web automation that is ever-green, capable, reliablefast.

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

*
Playwright được sản xuất để tự động hóa hóa phần nhiều các tuấn kiệt trình cẩn thận web, phần đông thứ ngày càng phổ biến rộng rãi được thực hiện bởi Single Page Apps với Progressive website Apps. Cùng với Playwright cung ứng cho họ nhiều phầm mềm như sau:

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

Giả sử các bạn đã thiết lập Node bởi vì Playwright là 1 trong những thư viện của Node nhưng :v (Nếu không, ko sao, hãy truy vấn trang web đồng ý của Node.js và download xuống và thiết lập nó.)

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

mkdir playright-example && cd playright-example && npm init -ySau khi thiết lập xong project, bạn cũng có thể bắt đầu viết các headless tests. Để có tác dụng được điều đó, chúng ta cần cài đặt thư viện Playwright và tạo thành một tệp có tên là index.js nơi cửa hàng 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 lập Playwright và những tệp nhị phân mang đến Chromium, Firefox cùng WebKit. Sau khoản thời gian cài đặt, bạn có thể import tủ sách Playwright.

Viết các headless tests

Để solo giản, so với ca kiểm test đầu tiên, họ sẽ truy vấn whatsmyuseragent.org với chụp lại ảnh màn hình của trang. Nếu các bạn chưa biết thì whatsmyuseragent.org là một trong trang web hiển thị phiên bạn dạng tác nhân người dùng và dữ liệu, cũng như địa chỉ cửa hàng 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 phê duyệt từ playwright chẳng hạn như firefox. Sau đó bằng cách gọi thủ tục launch để chế tạo một đối tượng người dùng browser kế tiếp tạo một page, lắp thêm mà hoàn toàn có thể hiểu tương tự như một tab khi họ duyệt web bằng phương pháp sử dụng thủ tục newPage cuối cùng là dùng goto với screenshot để đi mang đến trang whatsmyuseragent.org với chụp màn hình. Mã nguồn rõ ràng cho file index.js rất 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 thực thi đoạn mã trong file index.js, chúng ta thu được 3 file ảnh mới được tạo có tên lần lượt là example-chromium.png, example-firefox.png, example-webkit.png cha file hình ảnh này bao gồm là hình ảnh chụp màn hình hiển thị được chế tạo ra 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 đặc biệt quan trọng cần để ý về Playwright, giống như nhiều chế độ kiểm tra auto khác, nó được thiết kế theo phong cách để tự động hóa địa chỉ với trình duyệt, nhưng bạn phải sử dụng công cụ chứng thực để tự động hóa hóa quy trình kiểm thử. Cùng trong bài viết này họ sẽ dùng thử thư viện Mocha cùng với Playwright. Trình làng qua thì Mocha là 1 trình chạy test Javascript / NodeJS phổ biến, tốt nhất cho thí điểm E2E. Thư viện này chuyển động rất tốt khi kết hợp với Playwright. Bạn cũng có thể tạo các ca kiểm thử, sử dụng những công cụ xác thực và chế tác các report kiểm thử.

Bây giờ ta hoàn toàn có thể tạo một kịch phiên bản kiểm demo cơ bản kiểm thử trang web http://todomvc.com/examples/react/#/ Thông thường, ta sẽ tạo các tệp này vào một thư mục test, với tên tệp ngừng 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 tiện ích 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") // kiểm tra list of ToDo const sel = "ul.todo-list li" await page.waitForSelector(sel) const các mục = 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ẽ sử dụng Playwright để kết nối với trình lưu ý Chrome. Nó đang mở http://todomvc.com/examples/react/#/ và tiến hành hai ca kiểm test được định nghĩa ở trên. Để chạy thử chúng ta dùng lệnh sau:

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

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

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

on: push: branches: - masterjobs: e2e-tests: runs-on: ubuntu-latest # or macos-latest, windows-latest steps: - uses: actions/ - uses: actions/setup- - uses: microsoft/playwright-github- - name: Install dependencies & run tests run: npm install && npm testSau đó phối kết hợp action này với Upload Artifact kích hoạt để upload demo artifacts (như screenshots hoặc logs).steps:- uses: microsoft/playwright-github-- name: Install dependencies & run tests run: npm install && npm test- uses: actions/upload- with: name: test-artifacts path: path/to/artifactsTổng kếtMỗi luật pháp trình duyệt đều phải sở hữu các luật lệ riêng nhằm hiển thị HTML với CSS bên trên màn hình. Vậy nên các thư viện kiểm test trên trình duyệt tự động có thể vô cùng có lợi khi bọn họ muốn đảm bảo an toàn bố viên ứng dụng chuyển động đúng giống như những gì ta mong muốn trên toàn bộ các thiết bị với trình duyệt không giống nhau mà playwright là một trong trong số đó.

Xem thêm: C/C++ Trả Lời Câu Hỏi Tìm Số Nhỏ Nhất Trong Mảng, Tìm Số Nhỏ Nhất Trong Mảng C/C++

Bài viết này ra mắt sơ qua về tủ sách playwright và bí quyết thư viện này hoạt động, Để hoàn toàn có thể tìm hiểu rõ hơn về tủ sách này, cũng tương tự tìm gọi về điểm khác biệt giữa nó cùng puppeteer tương tự như cách nó hoạt động với các khối hệ thống CI/CD, mọi người dân có thể đọc thêm tại băng thông bên dưới. Nội dung bài viết đến đấy là hết, cảm ơn mọi bạn đã giành thời gian đọc.