讓我們也把 Web Component 頁面加上一點自動化測試吧！(/≧▽≦)/

第一步老樣子就是來新增測試檔案。◝( •ω• )◟

e2e\web-component.spec.ts

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

test.beforeEach(async ({ page }) => {
  await page.goto('http://127.0.0.1:5500/web-component.html');
});

test('頁面必須存在', async ({ page }) => {
  const title = await page.title();
  expect(title).toContain('Web Component Test');
});

執行腳本開始運行 e2e 測試。

npm run test:e2e-ui

完成測試

經過那麼多次的洗禮，想必大家對 e2e 測試很熟悉惹。ԅ(´∀` ԅ)

...

test('頁面必須存在', async ({ page }) => {
  const title = await page.title();
  expect(title).toContain('Web Component Test');
});

test('必須包含 checkbox、slider', async ({ page }) => {
  const checkbox = page.getByRole('checkbox');
  expect(checkbox).toBeVisible();

  const slider = page.getByRole('slider');
  expect(slider).toBeVisible();
});

test('disabled 後，slider 數值不會變動', async ({ page }) => {
  const checkbox = page.getByRole('checkbox');
  const slider = page.getByRole('slider');

  // 建立一段自定義的 JS 程式碼，接收 update:modelValue 事件數值
  const valueListHandle = await page.evaluateHandle(() => {
    const list: number[] = [];

    const slider = document.getElementById('slider');
    // 接收 Slider 事件
    slider?.addEventListener('update:modelValue', (event: any) => {
      list.push(event.detail);
    });

    return list;
  });

  // 拉到最左邊
  await slider.click({
    position: { x: 0, y: 0 },
    force: true,
  });
  await slider.click({
    position: { x: 50, y: 0 },
    force: true,
  });

  // 停用
  await checkbox.check();

  await slider.click({
    position: { x: 100, y: 0 },
    force: true,
  });

  // 取得自定義程式碼目標數值
  const valueList = await valueListHandle.evaluate((list) => list);

  // 停用後就不會觸發 update:modelValue，所以數值只會有 2 個
  expect(valueList).toHaveLength(2);
  expect(valueList[0]).toBeLessThan(valueList[1]);
});

順利通過！✧⁑｡٩(ˊᗜˋ*)و✧⁕｡

以上我們完成基本 e2e 測試了，大家可以想想還有甚麼更細緻的案例。

歡迎大家自由發揮！( ´ ▽ ` )ﾉ

恭喜一路看到此的讀者們，旅程終於告一個段落了，感謝各位的支持！(´▽`ʃ♡ƪ)

總結

• 完成 Web Component 頁面 e2e 測試

以上程式碼已同步至 GitLab，大家可以前往下載：

GitLab - D29