kintone を Playwright でテストする（CLI）

手順

1. Playwright のインストール

npm install --save-dev @playwright/test

2. dotenv のインストール

kintoneのURL、ログイン名、パスワードの保存に利用する。

npm install --save-dev dotenv

3. kintone の URL、ログイン名、パスワードを設定

.env を作成し、次の内容を記載する。

baseUrl="xxx.cybozu.com"
username="xxxxx"
password="xxxxx"

4. Playwright の設定

playwright.config.ts を作成し、次の内容を記載する。

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "playwright/tests",
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: "html",
  projects: [
    {
      name: "setup",
      testMatch: /.*\.setup\.ts/,
    },
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],
        storageState: "playwright/.auth/user.json",
      },
      dependencies: ["setup"],
    },
    {
      name: "firefox",
      use: {
        ...devices["Desktop Firefox"],
        storageState: "playwright/.auth/user.json",
      },
      dependencies: ["setup"],
    },
    {
      name: "webkit",
      use: {
        ...devices["Desktop Safari"],
        storageState: "playwright/.auth/user.json",
      },
      dependencies: ["setup"],
    },
  ],
});

playwright/tests/auth.setup を作成し、次の内容を記載する。

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

import "dotenv/config";

const { baseUrl, username, password } = process.env;

const authFile = "playwright/.auth/user.json";

test("authenticate", async ({ page }) => {
  if (!baseUrl || !username || !password) return;

  await page.goto(`https://${baseUrl}`);

  await page.getByPlaceholder("Login Name").fill(username);
  await page.getByPlaceholder("Password").fill(password);

  await page.getByRole("button", { name: "Login" }).click();

  await page.getByTitle("kintone").first().waitFor({ state: "visible" });

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

playwright/tests/portal.spec.ts を作成し、次の内容を記載する。

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

const { baseUrl } = process.env;

test.describe("ポータル", () => {
  test("タイトル", async ({ page }) => {
    await page.goto(`https://${baseUrl}/k/`);
    await expect(page).toHaveTitle(/ポータル/);
  });
});

5. .gitignore の設定

.gitignore に次の内容を追記する。

.env
playwright/.auth/

6. テストの実行

npx playwright test

参考

• Playwright