今天我們要把 Playwright 安裝起來，確認環境沒問題後，就來撰寫第一支測試。

前置需求

開始之前先確認電腦有 Node.js（建議 LTS 版本，18 以上）。

node -v
npm -v

如果沒裝過 Node.js，先到 nodejs.org 下載 LTS 版本安裝，裝完重開一次終端機再檢查。

安裝 Playwright

Playwright 測試專案跟「被測試的網頁」demo 是分開的兩個東西，不用裝進 demo 裡面。在 repo 根目錄下新建一個資料夾（例如 playwright-tests），跟 demo 同一層，進去該資料夾執行：

npm init playwright@latest

這時會問幾個問題，照下面選就好：

• Do you want to use TypeScript or JavaScript? → TypeScript（如果習慣使用Javascript也可以，這邊會以Typescript為主）
• Where to put your end-to-end tests? → 直接 Enter，預設 tests
• Add a GitHub Actions workflow? → 先選 False，之後有需要再加
• Install Playwright browsers? → 選 True，讓它自動下載 Chromium、Firefox、WebKit，方便後續想透過瀏覽器看測試過程可以使用，不想要的話也可以之後再下載

安裝過程會跑一段時間，因為要下載三套瀏覽器核心。裝完之後資料夾會多出這些東西：

├── tests/
│   └── example.spec.ts       # 官方範例測試
├── playwright.config.ts       # 測試設定檔
├── package.json
└── package-lock.json

先跑一次官方範例，確認環境沒問題：

npx playwright test

沒問題的話，你會看到他跑的tests都通過了

如果想看瀏覽器實際跑起來的樣子，在剛剛的command加上 --headed：

npx playwright test --headed

認識練習目標：demo 的登入頁

第一天我們已經把練習的目標專案準備好了，啟動後該網頁會在瀏覽器上開啟 (url為http://localhost:8000，設定在 demo/vite.config.ts 的 server.port）。首先會看到一個登入表單，畫面上會提示 demo / demo，但實際上這個假登入（authProvider.ts）接受任何帳號密碼，所以測試時輸入什麼都能登入成功。

寫第一支測試

在寫第一支測試前，我們先了解一下測試的程式會長什麼樣子

自動化測試的結構

先在 tests/ 資料夾新增 login.spec.ts，然後把下面的程式碼複製進去：

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

test('測試標題', async ({ page }) => {
  // 1. 開啟登入頁
  await page.goto('http://localhost:8000/');  // 導航到指定的網址

  // 2. 填入帳號密碼(demo這個範例可以輸入任何帳密皆可登入)
  // 定位到「使用者名稱」的欄位，並填入 demo
  await page.getByRole('textbox', { name: 'Username' }).fill('demo'); 
  // 定位到「密碼」的欄位，並填入 demo
  await page.getByRole('textbox', { name: 'Password' }).fill('demo');  

  // 3. 點擊登入
  // 定位到「登入」按鈕，並點擊
  await page.getByRole('button', { name: 'Sign in' }).click();  

  // 4. 驗證登入成功，看得到儀表板歡迎訊息
  await expect(
    page.getByRole('heading', {
      name: 'Welcome to the react-admin e-commerce demo',
    })
  ).toBeVisible();
});

有使用過jest的人會對這個結構感到很熟悉，這兩個test和expect的語法幾乎一樣，只是playwright多了一個page參數，這個參數就是用來操作瀏覽器的。首先要先匯入 test 和 expect，test 是用來定義測試，expect 是用來驗證操作後結果是否符合預期。

整個測試的步驟會需要先抓到網頁上要操作的元素，之後使用expect來對該元素進行驗證，expect會回傳一個Promise，因此需要使用await來等待他完成。

這段程式是導航到登入頁後，在「使用者名稱」欄位輸入demo，再到「密碼」欄位輸入demo，最後點擊「登入」按鈕後，確認畫面變成登入成功後的歡迎訊息。上面看到的getByRole是Playwright提供的Locator，它們可以很方便地抓到網頁上的元素，具體的Locator用法會在之後的文章詳細說明。

存檔後在playwright-tests資料夾執行：

npx playwright test login.spec.ts --headed

執行後會看到瀏覽器自動打開、輸入帳密、點登入，Terminal最後會顯示測試通過的結果。
恭喜你，你完成了第一支 Playwright 測試。

看測試報告

Playwright 內建 HTML 報告，測試跑完可以直接打開看：

npx playwright show-report

裡面會有每個測試的執行步驟，未來還可以在程式碼內要求playwright截圖或是錄影，截圖跟錄影的結果也都可以在這個報告上看到。

今日小結

今天我們成功安裝了playwright，簡單瞭解了一下測試的程式架構，並且執行了第一支登入測試，雖然只是簡單的登入測試，但已經成功踏出了自動化測試的第一步。
下一篇會介紹怎麼利用Locator來抓取要操作的元素，以及建議的選取方式。