Mobile Device Emulator

Mobile Device Emulator

Posted on by Test Viewpoint

Mô Phỏng Thiết Bị Di Động Với Playwright

Playwright kiểm soát các trình duyệt máy tính để bàn không có giao diện cũng có thể mô phỏng các thiết bị di động. Mặc dù mô phỏng thiết bị không thể thay thế hoàn toàn việc thử nghiệm trên các thiết bị di động, nhưng đây là phương pháp thiết thực và nhanh chóng để thử nghiệm các tình huống di động.

import { defineConfig, devices } from '@playwright/test'; // import devices

export default defineConfig({
  projects: [
    {
      name: 'Mobile Safari',
      use: {
        ...devices['iPhone 13'],
      },
    },
  ],
});

Playwright hỗ trợ mô phỏng nhiều thiết bị di động, nhưng nếu thiết bị di động mà bạn cần kiểm thử không nằm trong danh sách mà Playwriight hỗ trợ sẵn thì cũng đừng lo, bạn hoàn toàn có thể tự định nghĩa thông qua các tham số sau đây:

  • viewport: Kích thước màn hình (chiều rộng và chiều cao).
  • userAgent: Chuỗi User-Agent của trình duyệt trên thiết bị.
  • deviceScaleFactor: Tỷ lệ màn hình (DPI).
  • isMobile: Xác định đây là thiết bị di động (true).
  • hasTouch: Xác định thiết bị có hỗ trợ cảm ứng (true).

Ví Dụ: Cấu Hình Thiết Bị Di Động Tùy Chỉnh Trong Bài Kiểm Thử

import { test } from "@playwright/test";

test.use({
  viewport: { width: 414, height: 896 }, // Kích thước màn hình (ví dụ: iPhone 11 Pro Max)
  userAgent:
    "Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1",
  deviceScaleFactor: 3, // Tỷ lệ màn hình
  isMobile: true, // Bật chế độ di động
  hasTouch: true, // Bật hỗ trợ cảm ứng
});

test("Test on custom mobile device", async ({ page }) => {
  await page.goto("<https://example.com>");
  await page.screenshot({ path: "custom-device-screenshot.png" });
});

Tích Hợp Thiết Bị Tùy Chỉnh Vào Playwright Config

import { defineConfig } from "@playwright/test";

export default defineConfig({
  projects: [
    {
      name: "Custom Mobile Device",
      use: {
        viewport: { width: 414, height: 896 }, // Kích thước màn hình
        userAgent:
          "Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1",
        deviceScaleFactor: 3, // Tỷ lệ màn hình
        isMobile: true, // Bật chế độ di động
        hasTouch: true, // Bật hỗ trợ cảm ứng
      },
    },
  ],
});

Cám ơn bạn đón đọc bài viết hôm nay. Bài viết này nằm trong chuỗi bài viết về kiểm thử tự động với Playwright. Nếu bạn thích thú với những chia sẻ của mình, hãy kéo xuống và cùng tìm hiểu những bài chia sẻ khác nữa nhé. Một lần nữa xin cảm ơn bạn đã đồng hành cùng mình. Hẹn gặp lại các bạn trong các bài viết tiếp theo.

Happy testing!

Category: Test Automation