เทส Mobile Web ด้วย Playwright

May 3, 2022

2799

Playwright นอกจากเปิดให้เราเทสกับ Browser ที่หลากหลาย ยังมีออฟชั่นให้เราสามารถเทสโหมด Mobile ได้ด้วย โดย Playwright จะรองรับการเทส Mobile แบบ Simulator โหมด หรือก็คือการปรับ view port และ user agent

วิธีการเทสแบบ Mobile Simulator จะไม่ได้เหมือนกับแบบ Mobile Emulator ซะทีเดียว เนื่องจาก Mobile Emulator จะเป็นการรัน Emulator ของ Android/iOS แล้วค่อยใช้ Browser บน Emulator เครื่องนั้นๆ ซึ่งผลลัพธ์จะเหมือนกับการใช้งานจริงมากกว่า แต่ก็ต้องแลกมากับการรันที่ช้ามาก และพึ่งพิง OS ที่จะเทสนั่นเอง ซึ่งการใช้ Mobile Simulator จะช่วยให้การเทส Mobile Web เป็นเรื่องงาน เพราะไม่ต้องพึ่งพา OS และรันได้เร็วมากๆเลย

Config Mobile mode

เราสามารถกำหนด Mobile โหมดได้ผ่าน Playwright Config ได้เลย โดยเพิ่มเป็น Project ย่อยๆ เพื่อให้สามารถ รันได้หลายๆโหมดก็ได้เช่นกัน

ตัวอย่าง

    
projects: [
  {
    name: 'Chrome',
    use: {
      ...devices['Desktop Chrome'],
      headless: false,
    },
  },
  {
    name: 'Mobile',
    use: {
      channel: 'chrome',
      ...devices['Pixel 5'],
      headless: false,
    },
  },
],

จากตัวอย่างโค้ดข้างบน เป็นการประกาศ test project ขึ้นมาคือ Chrome และ Mobile โดยกำหนดให้มีขนาดหน้าจอเท่ากับ Pixel 5

การรันเทส

เราสามารถสั่งรันเทสด้วยคำสั่งปกติได้เลย npx playwright test ซึ่งก็จะเป็นการเทสทั้ง 2 Project เป็น 2 รอบ ซึ่งผลที่ได้ก็จะประมาณนี้ครับ

นอกจากนี้เรายังสามารถรันเทส เฉพาะแต่ละ test project ได้โดยใช้คำสั่ง –project เช่น
npx playwright test --project Mobile
เพื่อรันเทสเฉพาะ Mobile project นั่นเอง

การเลือกเทสที่จะรันบน Mobile

เรามักต้องการเลือกเทสเคสบางข้อเท่านั้นมารันบน Mobile Mode โดยสามารถ config ได้ตามนี้เลย

เช็คจาก Mobile โหมด

test('should allow me to add todo items', async ({ page, isMobile }) => {
  test.skip(isMobile, 'This feature is not implemented for Mobile');

  // Create 1st todo.
  await page.locator('.new-todo').fill(TODO_ITEMS[0]);
  await page.locator('.new-todo').press('Enter');
}

จากตัวอย่างโค้ด เป็นการให้ข้ามเทสข้อนี้ไป ถ้าเจอว่าเทสรันด้วย Mobile mode

เช็คจาก Project Name

test('should allow me to add todo items', async ({ page }, workerInfo) => {
  test.skip(workerInfo.project.name === 'Mobile', 'This feature is not implemented for Mobile');

  // Create 1st todo.
  await page.locator('.new-todo').fill(TODO_ITEMS[0]);
  await page.locator('.new-todo').press('Enter');
}

จากตัวอย่างโค้ด เป็นการให้ข้ามเทสข้อนี้ไป ถ้าเจอว่าเทสรันด้วย project ที่ชื่อว่า Mobile