Playwright là công cụ testing đình đám đến từ nhà Microsoft, nổi tiếng với sự nhẹ nhàng, hiệu quả và linh hoạt. Trong bài viết này, mình sẽ cùng với các bạn tìm hiểu về một tính năng rất hay: block media, script và css.
Tại sao cần block?
Khi chạy test, đôi khi những thông tin không cần thiết như: ảnh, video, thậm chí là các quảng cáo sẽ khiến test:
- Tốn thêm băng thông để load trang
- Chạy chậm đi
- Test chạy bị flaky (vì ads/ các phần tử không cần thiết hiển thị không ổn định)
- …
Do vậy, việc block các tài nguyên không cần thiết này là việc…cần thiết.
Quảng cáo nhanh: khoá học Playwright Master Class
Click vào đây xem hộ tui: Playwright Master Class
Block thế nào?
Đơn giản:
Cơ chế hoạt động
Để block một resource bất kì, chúng ta sử dụng page.route hoặc context.route kết hợp với hàm abort() để từ chối load 1 resource.
await page.route('**/*.css', (route) => {
// and abort the request
route.abort();
});
await context.route('**/*.js', (route) => route.abort());Hỏi nhanh: page.route và context.route có gì khác nhau?
Trả lời: context áp dụng cho: toàn bộ browser (nghĩa là tất cả các tab), còn page áp dụng cho page hiện tại.
Thực hành
Dưới đây là ví dụ với đủ các trường hợp khác nhau:
// Chỉ chặn file có tên đúng là style.css
await page.route('**/style.css', route => {
route.abort();
});
// Chặn file CSS có chứa từ abc trong tên file
await page.route(/.*abc.*\.css$/, route => {
route.abort();
});
// Chặn tất cả file từ một domain cụ thể
await page.route('https://example.com/**/*.css', route => {
route.abort();
});
// Chặn tất cả CSS trừ một số file nhất định
await page.route('**/*.css', route => {
const url = route.request().url();
if (url.includes('keep.css')) {
route.continue();
} else {
route.abort();
}
});
// Chặn file CSS nếu tên file dài hơn 10 ký tự
await page.route('**/*.css', route => {
const url = route.request().url();
const fileName = url.split('/').pop();
if (fileName.length > 10) {
route.abort();
} else {
route.continue();
}
});
// Chặn theo content type
await page.route('**/*', (route) => {
if (route.request().resourceType() === 'image') {
return route.abort();
}
route.continue();
});Nâng cao hơn: chặn rồi bỏ chặn!!!
// Chặn load file js
await context.route('**/*.js', (route) => route.abort());
const page1 = await context.newPage();
await page1.goto('/');
const page2 = await context.newPage();
await page2.goto('/');
// Bỏ chặn load file js
await context.unroute('**/*.js');Chắc là… cũng cũng rùi đó.
Bạn có thêm góp ý gì không? Có gì comment cho tui biết nha.
Một ngày mới vui vẻ và làm việc hiệu quả đấy nhé ^^
Trả lời