如果測試的頁面需要登入，每次執行測試時都會重新進行登入流程。這是因為 Playwright 在每個測試中都會啟動全新的無痕瀏覽器環境，導致登入狀態無法像一般瀏覽器一樣被保存在 localStorage 或 cookies 中。如此一來，不僅因為需要重複執行登入流程而增加測試執行時間，也會額外消耗系統資源。

因此，Playwright 提供了 storageState() 方法，讓我們能夠將登入後的驗證資訊保存下來，並在後續的測試中重複使用，透過這種方式，不僅能避免每次測試都重複登入，還能有效縮短測試時間並提升執行效率。那麼，我們就一步步來完成 storageState() 儲存驗證狀態吧！

取得驗證資訊與儲存驗證資訊檔案

先來看一下需要新增的檔案：

1. setup/auth.setup.ts ：執行以取得驗證資訊
2. .auth 資料夾：用來儲存驗證資訊 (記得將此資料夾加入 .gitignore)

取得驗證資訊

在 setup/auth.setup.ts 檔案內加入以下內容：

// setup/auth.setup.ts
import { test as setup, expect } from '@playwright/test';
import path from 'path';

// 建立登入狀態檔的路徑
const authFile = path.join(__dirname, '../.auth/auth.json');

setup('authenticate', async ({ page }) => {
  // 執行登入驗證步驟，請替換成你所需的流程
  await page.goto('/');
  await page.locator().fill(username);
  await page.locator().fill(password);
  await page.getByRole('button', { name: 'login' }).click();
  // 可加入一些驗證斷言，確保登入驗證已完成
  await expect(page.locator()).toBeVisible();
  // 驗證步驟結束。
    
  // 將驗證資訊儲存到 authFile
  await page.context().storageState({ path: authFile });
});

如果手動執行 setup，可以看見 .auth 資料夾與 auth.json 檔案自動產生：

開啟 auth.json 則能看見所有登入驗證資訊，到這邊我們就成功地將驗證資訊保存下來了。

在 playwright.config.ts 中建立 setup 專案

1. 建立 setup 專案，執行登入驗證流程，以取得登入驗證資訊
2. 在其他專案中使用準備好的登入驗證資訊及依賴 setup 專案

// playwright.config.ts
projects: [
    {
      name: 'setup', 
      testMatch: /.*\.setup\.ts/
    },
    {
      name: 'chromium',
      use: {
          ...devices['Desktop Chrome'],
          storageState: 'authFile 路徑',
      },
      dependencies: ['setup'],
    },
  ]

執行測試

上面設定完成之後，由於在 project 內已設定好 depensencies，因此無須預先執行 setup 專案，當執行測試時，會先執行 setup 專案，再進行 project 內的測試。

以下面的測試為例，測試案例完全不需要任何登入驗證步驟：

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

test.beforeEach(async ({ page }) => {
  await page.goto('/');
});

test('Auth Test', async ({ page }) => {
    const userid = await page.locator('div[id=UsrId]').innerText();
    console.log('Auth Test User Id', userid);
});

執行時，只需要前往測試頁面，就能使用已儲存的登入驗證資訊直接進入頁面並進行後續測試。

UI Mode

UI Mode 預設並不會執行 setup，Playwright 建議定期手動執行，如果要手動執行，先開啟左上角 filter 將 setup 勾選起來：

當我們手動執行一次 setup 後，接著即可將它關閉，之後在執行其他測試時，系統會直接使用由 setup 所產生的驗證資料，不必每次重新執行驗證流程，這樣一來能有效縮短測試時間、提升執行效率。

到這裡，我們已經認識了如何透過 storageState() 保存驗證資料，並在每次測試中重複使用，成功跳過繁瑣的登入流程，接下來，我們要更進一步改以 API 方式 取得並設定 storageState()，並且整合進 POM（Page Object Model） 中。這麼做不僅能讓不同的測試以不同角色進行登入，還能大幅加速驗證流程，實現「無需實際登入即可取得驗證狀態」的高效率自動化體驗。