$ npx playwright test --ui 
$ npx playwright test

Running 3 tests using 1 worker

  ✓  1 example.spec.ts:3:1 › シナリオ1.ページのタイトル (174ms)
  ✓  2 …pec.ts:10:1 › シナリオ2.ユーザー名、パスワードを入力してログイン (220ms)
  ✓  3 example.spec.ts:33:1 › シナリオ3.年齢とジェンダーを選択して登録 (800ms)

  3 passed (1.6s)
$

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

test('シナリオ1.ページのタイトル', async ({ page }) => {
  await page.goto('http://localhost:5173/');

  // ページのタイトル
  await expect(page).toHaveTitle(/Playwright Test/);
});

test('シナリオ2.ユーザー名、パスワードを入力してログイン', async ({ page }) => {
  await page.goto('http://localhost:5173/');

  // ユーザー名を入力
  const textUser = page.getByRole("textbox", { name: "ユーザー名" });
  await textUser.fill('user01');
  await textUser.press('Enter');

  // パスワードを入力
  const textPassword = page.getByRole("textbox", { name: "パスワード" });
  await textPassword.fill('pass01');
  await textPassword.press('Enter');

  // await page.waitForTimeout(1000);

  // ログインボタンをクリック
  await page.getByRole('button', { name: 'LOGIN' }).click();

  // ページのURL
  await expect(page).toHaveURL(/dashboard/);

});

test('シナリオ3.年齢とジェンダーを選択して登録', async ({ page }) => {
  await page.goto('http://localhost:5173/dashboard/');

  // Selectのアイテムを選択
  await page.getByLabel('Age').click();
  await page.getByRole('option', { name: 'Thirty' }).click();

  // Radioのアイテムを選択
  await page.getByRole('radio', { name: 'Male', exact: true }).check();

  // 登録ボタンをクリック
  await page.getByRole('button', { name: '登録' }).click();

  // 結果の確認
  const textResult = page.getByRole("textbox", { name: "結果" });
  await expect(textResult).toHaveValue("Clicked 30歳 male")

});