Playwright 入門

簡介

說到瀏覽器自動化，大家第一個通常想到的會是Selenium吧？Playwright 也是一個用於網頁測試的自動化測試工具，在開始介紹Playwright之前，本篇著重在快速上手，希望讀者們看完之後可以立刻套用在自己想用的情境上


從零開始

系統需求：Node.js
https://nodejs.org/en

建立一個專屬資料夾

mkdir playwright-tests

cd playwright-tests

初始化

npm init -y

安裝

npm i -D playwright

安裝playwright 專用瀏覽器

npx playwright install

以上便完成初始設定了，接著建立一個簡單的測試

測試情境：

打開google，進到gmail，搜尋tpi相關的信件，截圖後登出

先上腳本 (in JavaScript)：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://google.com');

  // Click on the 'Gmail' link
  await page.click('text=Gmail');

  // Wait for navigation to complete
  await page.waitForLoadState();

  await page.click('text=Sign in')

  // Here you can add steps to fill in the login form
  await page.fill('input[type="email"]', '你的帳號@tpisoftware.com');
  // Add logic for password entry and submission here
  await page.getByRole('button' , { name: '下一步'}).click();
  await page.getByLabel('輸入您的密碼').fill('你信箱的密碼');
  await page.getByRole('button' , {name: '下一步'}).first().click();
  await page.getByPlaceholder('在郵件中搜尋').fill('tpi');
  await page.getByPlaceholder('在郵件中搜尋').press('Enter');
  await page.screenshot({ path: '想要放截圖的路徑/screenshot.png' });
  await page.getByLabel('Google 帳戶： 預設會是你的中英文名稱\n(帳號@tpisoftware.com)').click();
  await page.frameLocator('iframe[name="account"]').getByRole('link', { name: '登出' }).click();


  
  // Close the browser
  await browser.close();
})();

關鍵步驟說明：

導入 playwright 函式庫

const { chromium } = require('playwright');

非同步設定

(async () => {

    // 執行步驟在這

})();

啟動Playwright，打開瀏覽器，這邊用的是Chromium

const browser = await chromium.launch({ headless: false });

開新分頁

const page = await browser.newPage();

後面的步驟比較直觀，這邊就不展開說明。

若要對網頁元素進行操作，例如特定按鈕、文字輸入…

Playwright 裡面有個專門的術語叫：Locators

常見的有以下

GetByRole()

GetByText()

GetByLabel()

GetByPlacholder()

GetByAltText()

GetByTitle()

說明到這邊，如果讀者有按照腳本執行，應該會發現這個情況：

“怎麼沒有截到我想要的畫面啊？”

網頁自動化工具很常碰到這個情況，通常這類型的處理方式有兩種：

一、 設定等待時間

二、 等待特定元素出現/結束*

這兩個方法都可以解決問題，但是第一個做法較不彈性(但很有效)，雖然在這個範例中Gmail已經相當成熟，但專案開發的過程載入時間不一定相同，設定太長的時間會失去自動化的本意，所以建議採用二的方式。

如何快速找到我們要的元素呢？

和Selenium網頁版一樣，Playwright也有提供專屬的錄製工具Playwright Inspector，用滑鼠就可以快速找到需要的元素

在專案資料夾裡面開啟終端輸入：

PWDEBUG=1 node google_test.js

會出現視窗如下

點擊綠色執行，然後到截圖完成後的步驟，按暫停

再把滑鼠移到測試瀏覽器上，就可以看到滑鼠位置底下的locators

“這個信件是在我執行搜尋後才出現的，就用它吧！“

那可不行，因為 [新人自我介紹] 並不會每次都出現在第一頁

仔細看，這個按鈕是在 搜尋 > Loading 之後會出現

而且他並沒有特殊標籤，所以就決定用他了！

在截圖的指令前面加上：

  const nextPage = page.locator('div:nth-child(3) > .a5D');
  await nextPage.waitFor();

鏘鏘 這樣就成功截到我們想要的內容啦

小結：

Playwright 還有許多實用的指令以及功能可以使用，請參考他們的文件

*特定元素的消失：這邊因為gmail跑得太快所以我找不到那個元素的位置，對專案熟悉的話，可以放個等待spanner消失的指令，這會是最佳做法之一