ความเร็วของการใช้งานเว็บไซท์ นอกจากฝั่ง Server และ Database หลังบ้านแล้ว อีกส่วนที่มีผลมากๆเช่นกันก็คือ Performance Client-Side โดยเฉพาะ Web App ที่ถูกสร้างด้วย Single Page Application framework ต่างๆ

มารู้จักกับ Lighthouse

Lighthouse เป็น Developer Tool ที่ถูกติดตั้งมากับ Chrome Browser โดย Lighthouse จะเป็น Tool ที่ช่วยวัดประสิทธิภาพเว็บไซต์ของเราเน้นไปที่ Page speed

โดยเราสามารถใช้งาน Lighthouse ได้ง่ายๆโดยเปิดไปที่เว็บไซต์ที่เราอยากตรวจสอบ แล้วเปิด Developer Tool แล้วเลือก Lighthouse แล้วกดปุ่ม Generate report ได้เลย

รัน Lighthouse ด้วย Playwright กัน

ก่อนอื่นต้องติดตั้ง Library เพิ่มก่อนคือ lighthouse และ playwright-lighthouse โดยรันคำสั่งตามนี้ได้เลย

npm install --save-dev lighthouse playwright-lighthouse

คราวนี้มาดูตัวอย่างโค้ดกันเลย โดยตัวอย่างแรกผมจะรัน Lighthouse ที่หน้า home page
ก่อนอื่นเราต้องทำการเพิ่ม launch option –remote-debugging-port=9222 ใน Playwright config ก่อน

import * as path from 'path';
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';

const config: PlaywrightTestConfig = {
  testDir: './tests',
  /* Maximum time one test can run for. */
  timeout: 30 * 1000,
  expect: {
    timeout: 5000
  },
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    actionTimeout: 0,
    trace: 'on-first-retry',
    headless: false,
    permissions: ['camera'],
    channel: 'chromium',
    ...devices['Desktop Chrome'],
    launchOptions: {
      args: [
        // LIGHTHOUSE
        '--remote-debugging-port=9222', 
      ],
    },
  },
};

export default config;

ถัดมาใน test step ให้เพิ่มขั้นตอนเรียกใช้ Lighthouse โดยการใช้คำสั่ง playAudit โดยเราสามารถระบุ thresholds ที่ Page นั้นต้องผ่านได้เช่น performance, accessibility และ best-practices

import { expect, test } from '@playwright/test';
import { playAudit } from 'playwright-lighthouse';

test('able to check client side performance testing', async ({ page }) => {
  await page.goto('https://demoqa.com');

  test.setTimeout(0);
  await playAudit({
    page: page,
    port: 9222,
    thresholds: {
      performance: 20,
      accessibility: 20,
      'best-practices': 20,
    },
    reports: {
      formats: {
        html: true,
        csv: true,
      }
    }
  });
});

พอเรารันเทสเสร็จ Lighthouse จะทำการสร้าง file ไว้ที่ folder lighthouse เราสามารถเปิด html ขึ้นมาดูได้เลย ก็จะได้ข้อมูลประมาณนี้ครับ

รัน Lighthouse แบบที่ต้อง Login ก่อน

ตัวอย่างเช่นหากต้องการวัด Performance ของหน้า User profile หลังจากที่ Login เสร็จแล้ว โดยการที่จะทำแบบนี้ได้จำเป็นจะต้องสร้าง page โดยใช้คำสั่ง launchPersistentContext เนื่องจาก Lighthouse จะเปิด Page ใหม่ทำให้ information ที่ได้มาจากการ Login หายหมดนั่นเอง แต่พอเราใช้ launchPersistentContext จะเป็นการใช้งาน context ร่วมกันทำให้ Authentication ต่างๆยังอยู่ครบครับ

ดูรตัวอย่างจากด้านล่างนี้ได้เลย

import { expect, test } from '@playwright/test';
import { playAudit } from 'playwright-lighthouse';

const os = require('os');
const fs = require('fs');
const path = require('path');
const appPrefix = 'pl-lh';

test('able to check client side performance testing', async ({ playwright }) => {
  let tmpDir = os.tmpdir();
  tmpDir = fs.mkdtempSync(path.join(tmpDir, appPrefix));
  const context = await playwright['chromium'].launchPersistentContext(tmpDir, {
    args: ['--remote-debugging-port=9222'],
    headless: false
  });

  const page = await context.newPage();

  await page.goto('https://demoqa.com/login');
  await page.fill('id=userName', 'demoqahive');
  await page.fill('id=password', '[email protected]');
  await Promise.all([
    page.waitForNavigation(),
    page.click('id=login')
  ]);
  expect(page.locator('id=userName-label').nth(0)).toBeVisible();
  
  test.setTimeout(0);
  await playAudit({
    page: page,
    port: 9222,
    thresholds: {
      performance: 20,
      accessibility: 20,
      'best-practices': 20,
    },
    reports: {
      formats: {
        html: true,
        csv: true,
      }
    }
  });
});

Download Code ตัวอย่างได้ที่ Github

บทความก่อนหน้านี้เทส Webcam ด้วย Playwright ยังไงดี
Quality On Top