上一篇認識了定位元素的方法，定位到元素之後，那麼要如何模擬使用者在網頁上的行為呢？這時候就必須加上 Actions 了，Playwright 提供完整的 Actions API 來實現拖拉、點選、按鍵盤、填寫、滾動頁面等使用網頁時的操作行為，接下來，讓我們一一認識這些動作吧！

點擊：click( )

這是操作瀏覽器時最常使用的動作之一，模擬滑鼠點擊任何元素的動作，常見的 button、link、input、checkbox、radio、download 等等都可以與 click() 結合運用。

// 點擊按鈕
await page.getByRole('button').click();

// 點擊兩次
await page.getByRole('link').dbclick();

// 點擊右鍵
await page.getByRole('link').dbclick({ button: right });

// Windows 作業系統：Ctrl + 點擊滑鼠
// macOS 作業系統：Meta + 點擊滑鼠
await page.getByText('Cat').click({ modifiers: ['ControlOrMeta'] });

填寫：fill( )

這是另一個常用的動作，常用於 input、textarea 等需要填寫文字的欄位，會直接將元素內的值清空，再輸入指定字串，也就是「幫你打好字」，以下這個步驟，會直接再輸入框填入「Ada」：

await page.locator('input[id="username"]').fill('Ada');

鍵入：press( )

會先聚焦到指定的元素，然後模擬「按下按鍵」行為，一次只會送出一個鍵，並且必須使用鍵盤的鍵名，例如：

字母鍵 : KeyA - KeyZ(A 到 Z 的所有字母按鍵)
數字鍵 : Digit0 - Digit9 (0 到 9 的所有數字按鍵)
符號與標點 : Backquote (`) 反引號、Minus ( - ) 減號、Equal ( = ) 等號、Backslash ( \ ) 反斜線
功能鍵 : F1 - F12(F1 到 F12 的所有功能鍵)
控制鍵 : Tab 定位鍵(跳格)、Enter 輸入/換行鍵、Backspace 向後刪除鍵、Escape 跳出/取消鍵
文字編輯鍵 : Insert 插入/覆寫模式切換、Delete 向後刪除鍵 (與 Backspace 方向相反)
導航鍵 : ArrowUp 向上箭頭 ( ↑ )、ArrowDown 向下箭頭 ( ↓ )、ArrowLeft 向左箭頭 ( ← )、ArrowRight 向右箭頭 ( → )、Home 行首/頁首鍵、End 行尾/頁尾鍵、PageUp 向上翻頁、PageDown 向下翻頁

如果我們要像 fill 那樣填入 Ada ，那我們就必須寫成：

await page.locator('input[id="username"]').press('A');
await page.locator('input[id="username"]').press('d');
await page.locator('input[id="username"]').press('a');

雖然 press() 在輸入一段文字時會寫起來較冗長，但如果需要按下鍵盤上的某個按鍵才會觸發下一個動作時，press()就是非常重要的 Actions API 了，像是以下操作，就必須使用 press() 才能完成：

// 按下 Enter 輸入鍵
await page.locator('input[name="submit"]').press('Enter');
// 按下 Delete 刪除鍵
await page.locator('input[name="submit"]').press('Delete');
// 同時按下 Shift + A 
await page.locator('input[name="submit"]').press('Shift+A ');

懸停：hover( )

停留在某個元素上方，觀察 hover 效果，例如：樣式變化、tooltip 是否出現、debug 時想插入暫停...等等

await page.getByText('Cat').hover();

滑鼠移動：mouse.move( )

hover() 在測試流程中看起來會是瞬移到元素上方，如果想更真實模擬滑鼠移動，並且更精準地控制滑鼠位置，就可以使用 mouse.move()，但必須注意的是，mouse.move() 只接受「座標」，不能傳入 locator：

// 正確寫法
await page.mouse.move(0, 0);
// 錯誤寫法
await page.mouse.move(getByText('Cat'));

假設真的想要「移動到某個 locator」上方，那我們必須先拿到目標元素的邊界值，再計算出中心點：

const target = await page.locator('#target').boundingBox();
if (target) {
  await page.mouse.move(
    box.x + box.width / 2,
    box.y + box.height / 2
  );
}

拖拉：dragTo( )

如果要將 A 元素拖拉到 B 元素的位置，我們可以使用 dragTo() 來實現：

await page.locator('#A').dragTo(page.locator('#B'));

這個動作其實是將以下 4 個步驟封裝起來：

await page.locator('#A').hover();  // 懸停在要拖拉的元素上方 
await page.mouse.down();  // 按下滑鼠左鍵
await page.locator('#B').hover(); // 懸停在要放置的元素上方
await page.mouse.up();  // 放開滑鼠左鍵

這樣我們不僅不需要自己手動寫這些步驟，這個方法也大大增加程式碼的可讀性，閱讀時可以很清楚的看出是從 A 元素拖拉到 B 元素。

滾動：scrollIntoViewIfNeeded( )

雖然 Playwright 會自動定位到某個元素，但有兩個情況可能會需要手動滾動：

1. 強制載入無限清單：此時可透過定位至清單底部的元素，將其滾動到可視範圍，以觸發後續資料加載。
2. 改善觀察測試過程：在測試執行時，如果元素未自動滾動到可視範圍，加入手動滾動可更直觀地觀察測試執行情況。

這個方法非常簡單，只需定位希望出現的元素，在後方加上 scrollIntoViewIfNeeded() 即可

await page.getByText('Cat').scrollIntoViewIfNeeded();

到這裡，我們認識了執行動作的 Actions，在撰寫腳本時，透過 Locators(找到目標) 與 Actions(模擬操作) 的搭配，讓測試流程貼近實際操作情境，接下來，更重要的是要驗證操作後的結果是否正確，因此，下一篇將介紹測試腳本裡很重要的角色：Assertion (斷言)，它幫我們檢查、判斷結果是否符合預期結果，確保測試真正發揮「守門員」的作用。