Playwright コードスニペット

はじめに

Webアプリケーションのよくある操作について、Playwrightのコードスニペットを記述します。
随時更新予定です。

イベント

新しいタブを開く

BrowserContext クラスの waitForEvent("page") メソッドを使用します。

import { test, Page } from "@playwright/test";

test("新しいタブを開く", async ({ context, page }) => {
  const newTabPromise: Promise<Page> = context.waitForEvent("page");
  // 新しいタブを開く操作
  await page.getByRole('button', {name: "新しいページ"}).click();
  const newTab: Page = await newTabPromise;
  await newTab.waitForLoadState("domcontentloaded");
  // 新しいタブでの操作

});

ダイアログを開く

Page クラスの waitForEvent("dialog") メソッドを使用します。

import { test } from "@playwright/test";

test("ダイアログを開く", async ({ page }) => {
  // ダイアログを開く操作
  await page.getByRole("button", { name: "ログアウト" }).click();
  page.on("dialog", async (dialog) => {
    await dialog.accept();
  });
  // ログアウトしたことを確認
});

ファイルのダウンロード

Page クラスの waitForEvent("download") メソッドを使用します。

import fs from "fs";
import { Download } from "playwright";
import { test, expect } from "@playwright/test";

test("ファイルのダウンロード", async ({ page }) => {
  const downloadPromise: Promise<Download> = page.waitForEvent("download");
  // ファイルのダウンロード操作
  await page.getByRole("button", { name: "ダウンロード" }).click();
  const download: Download = await downloadPromise;
  const filePath: string = "downloaded.txt";
  await download.saveAs(filePath);
  // ダウンロードしたファイルの存在確認
  expect(fs.existsSync(filePath)).toBeTruthy();
});

ファイルのアップロード

Page クラスの waitForEvent("filechooser") メソッドを使用します。

import fs from "fs";
import { FileChooser } from "playwright";
import { test, expect } from "@playwright/test";

test("ファイルのダウンロード", async ({ page }) => {
  const fileChooserPromise: Promise<FileChooser> = page.waitForEvent("filechooser");
  await page.getByRole("button", { name: "ファイル選択" }).click();
  const fileChooser: FileChooser = await fileChooserPromise;
  const filePath: string = "toUpload.txt";
  await fileChooser.setFiles(filePath);
  await page.getByRole("button", { name: "アップロード" }).click();
  // アップロードが完了したことを確認
});

セッションの保存

参考: Authentication - Playwright docs

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

const sessionFile = '.session/user.json';

setup('ログイン', async ({ page }) => {
  // Perform authentication steps. Replace these actions with your own.
  await page.goto('/login');
  await page.getByLabel('アカウント名').fill('username');
  await page.getByLabel('パスワード').fill('password');
  await page.getByRole('button', { name: 'ログイン' }).click();
  await page.waitForURL('/home');
  await expect(page.getByRole('heading', { name: 'Welcome to HOME' })).toBeVisible();

  // End of authentication steps.

  await page.context().storageState({ path: authFile });
});

Fixture の override

テストケースによって Fixture の値を変更したい場合 test.use を test.describe の中で使用する。

type MyFixtures = {
  environment: string;
  username: string;
  password: string;
};

import { test as base } from "@playwright/test";
const test = base.extend<MyFixtures>({
  environment: async ({}, use) => {
    const env = "dev";
    await use(env);
  },
});

test.describe("Login as user", {} =>
  test.describe("As Taro", {} =>
    test.use({
        username: "Taro",
        password: "passwordOfTaro",
    })
    test("login", async ({ page, username, password }) => {
      await page.goto("/login");
      await page.getByLabel("アカウント名").fill(username);
      await page.getByLabel("パスワード").fill(password);
      await page.getByRole("button", { name: "ログイン" }).click();
      await page.waitForURL("/home");
      await expect(
        page.getByRole("heading", { name: "Welcome to HOME" })
      ).toBeVisible();
    })
  );

  test.describe("As John", {} =>
    test.use({
      username: "John",
      password: "passwordOfJohn",
    })
    test("login", async ({ page, username, password }) => {
      await page.goto("/login");
      await page.getByLabel("アカウント名").fill(username);
      await page.getByLabel("パスワード").fill(password);
      await page.getByRole("button", { name: "ログイン" }).click();
      await page.waitForURL("/home");
      await expect(
        page.getByRole("heading", { name: "Welcome to HOME" })
      ).toBeVisible();
    })
  );
);