Playwright + Amazon ECSでE2Eテストが秒で廃墟になる問題を解決する

QAメンバー / PM
    ↓ ブラウザでポータルにアクセス、テストを選択して実行
AWS App Runner（ポータルサイト / Go）
    ↓ ECS RunTaskを呼び出し
Amazon ECS（Playwright入りコンテナを起動してテスト実行）
    ↓ 結果を保存
Amazon S3（HTMLレポートを静的サイトとして公開）
    ↑ イメージを取得
Amazon ECR（コンテナイメージを保管）

# Stage 1: バッチ処理のビルド（Go）
FROM golang:1.24-alpine AS builder
WORKDIR /src
COPY go.mod go.sum ./
RUN go mod download
COPY . .
RUN CGO_ENABLED=0 go build -o /out/runner ./cmd/runner

# Stage 2: Playwright環境にテストスクリプトを載せる
FROM mcr.microsoft.com/playwright:v1.50.0-noble
WORKDIR /app

# Node.js依存のインストール
COPY package.json package-lock.json ./
RUN npm ci

COPY --from=builder /out/runner ./runner
COPY playwright.config.ts ./
COPY pages/ ./pages/
COPY testCases/ ./testCases/
COPY scenarios/ ./scenarios/

ENTRYPOINT ["./runner"]

// こういうセレクタはHTMLの構造変更で簡単に壊れる
await page.click('#root > div > form > div:nth-child(3) > button');

// こちらはHTMLの構造が変わっても壊れにくい
await page.getByRole('button', { name: '送信' }).click();
await page.getByLabel('ユーザー名').fill('tanaka');
await page.getByPlaceholder('パスワードを入力').fill('secret');

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './scenarios',
  retries: process.env.CI ? 2 : 0, // CI環境では2回リトライ、ローカルではリトライなし
  fullyParallel: true,
  workers: 4,
  reporter: [['html', { open: 'never' }]],
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',   // 失敗時のみ動画を保持
    trace: 'on-first-retry',      // リトライ時にトレースを記録
  },
  projects: [
    { name: 'chrome', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'safari', use: { ...devices['Desktop Safari'] } },
  ],
});

// pages/loginPage.ts
import { type Page, type Locator } from '@playwright/test';

export class LoginPage {
  private readonly userField: Locator;
  private readonly passField: Locator;
  private readonly loginBtn: Locator;

  constructor(private page: Page) {
    this.userField = page.getByLabel('ユーザー名');
    this.passField = page.getByLabel('パスワード');
    this.loginBtn = page.getByRole('button', { name: 'ログイン' });
  }

  async login(user: string, pass: string) {
    await this.userField.fill(user);
    await this.passField.fill(pass);
    await this.loginBtn.click();
  }
}

// pages/dashboardPage.ts
import { type Page, type Locator, expect } from '@playwright/test';

export class DashboardPage {
  private readonly welcomeText: Locator;

  constructor(private page: Page) {
    this.welcomeText = page.getByRole('heading', { level: 1 });
  }

  async expectWelcomeMessage(name: string) {
    await expect(this.welcomeText).toContainText(name);
  }
}

// scenarios/login.spec.ts
import { test } from '@playwright/test';
import { LoginPage } from '../pages/loginPage';
import { DashboardPage } from '../pages/dashboardPage';

test('ログイン後にダッシュボードが表示される', async ({ page }) => {
  await page.goto('https://example.com/login');

  const loginPage = new LoginPage(page);
  await loginPage.login('tanaka', 'secret');

  const dashboard = new DashboardPage(page);
  await dashboard.expectWelcomeMessage('tanaka');
});

./
├── pages/               # ページオブジェクト層
│   ├── loginPage.ts
│   ├── dashboardPage.ts
│   ├── searchPage.ts
│   └── cartPage.ts
├── testCases/           # テストケース層
│   ├── authTestCase.ts
│   └── shoppingTestCase.ts
├── scenarios/           # テストシナリオ層
│   ├── login.spec.ts
│   └── purchase.spec.ts
└── playwright.config.ts

// testCases/authTestCase.ts
import { LoginPage } from '../pages/loginPage';
import { DashboardPage } from '../pages/dashboardPage';
import { type Page } from '@playwright/test';

export class AuthTestCase {
  private loginPage: LoginPage;
  private dashboardPage: DashboardPage;

  constructor(private page: Page) {
    this.loginPage = new LoginPage(page);
    this.dashboardPage = new DashboardPage(page);
  }

  async loginAndVerifyDashboard(user: string, pass: string) {
    await this.loginPage.login(user, pass);
    await this.dashboardPage.expectWelcomeMessage(user);
  }
}

// scenarios/purchase.spec.ts
import { test } from '@playwright/test';
import { AuthTestCase } from '../testCases/authTestCase';
import { ShoppingTestCase } from '../testCases/shoppingTestCase';

test('ログインして商品を購入する', async ({ page }) => {
  await page.goto('https://example.com/login');

  const auth = new AuthTestCase(page);
  await auth.loginAndVerifyDashboard('tanaka', 'secret');

  const shopping = new ShoppingTestCase(page);
  await shopping.searchAndAddToCart('Playwright入門');
  await shopping.checkout();
});

test('ログインして商品を購入する', async ({ page }) => {
  await test.step('ログインページに移動する', async () => {
    await page.goto('https://example.com/login');
  });

  await test.step('認証情報を入力してログインする', async () => {
    const auth = new AuthTestCase(page);
    await auth.loginAndVerifyDashboard('tanaka', 'secret');
  });

  await test.step('商品を検索してカートに追加する', async () => {
    const shopping = new ShoppingTestCase(page);
    await shopping.searchAndAddToCart('Playwright入門');
  });

  await test.step('購入を完了する', async () => {
    const shopping = new ShoppingTestCase(page);
    await shopping.checkout();
  });
});

test('商品検索が動作する', {
  tag: ['@search', '@sprint-42'],
}, async ({ page }) => {
  // ...
});

test('カートに商品を追加できる', {
  tag: ['@cart', '@sprint-42'],
}, async ({ page }) => {
  // ...
});

# sprint-42のテストだけ実行
$ npx playwright test --grep "@sprint-42"

# 検索機能のテストだけ実行
$ npx playwright test --grep "@search"

func (s *TestRunner) Execute(ctx context.Context, tags []string) error {
    for _, tag := range tags {
        cmd := []string{"npx", "playwright", "test", "--grep", tag}
        _, err := s.ecs.RunTask(ctx, &ecs.RunTaskInput{
            TaskDefinition: aws.String(s.taskDef),
            Cluster:        aws.String(s.cluster),
            Count:          aws.Int32(1),
            Overrides: &types.TaskOverride{
                ContainerOverrides: []types.ContainerOverride{
                    {
                        Name:    aws.String("playwright"),
                        Command: cmd,
                    },
                },
            },
        })
        if err != nil {
            return fmt.Errorf("failed to run task for tag %s: %w", tag, err)
        }
    }
    return nil
}

{
  "containerDefinitions": [
    {
      "name": "playwright",
      "cpu": 1024,
      "memoryReservation": 2048,
      "image": "123456789.dkr.ecr.ap-northeast-1.amazonaws.com/e2e-tests:latest"
    }
  ]
}

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "ecs:RunTask",
        "ecs:DescribeTaskDefinition"
      ],
      "Resource": "arn:aws:ecs:<region>:<account-id>:task-definition/<task-def-name>:*"
    },
    {
      "Effect": "Allow",
      "Action": [
        "ecs:StopTask",
        "ecs:DescribeTasks",
        "ecs:ListTasks"
      ],
      "Resource": "arn:aws:ecs:<region>:<account-id>:cluster/<cluster-name>"
    },
    {
      "Effect": "Allow",
      "Action": "iam:PassRole",
      "Resource": [
        "arn:aws:iam::<account-id>:role/<ecs-task-role>",
        "arn:aws:iam::<account-id>:role/<ecs-task-execution-role>"
      ]
    }
  ]
}