【Playwright】「Add/Remove Elements」のボタン操作を練習する

🔘 Playwrightで「Add/Remove Elements」のボタン操作を練習する

The Internet は、E2E テストツールの練習にぴったりなデモサイトです。
その中でも今回は、「Add/Remove Elements」という、シンプルながらも 要素の追加と削除 を学べるページを使って、Playwright でのボタン操作を試してみます。

---

🌐 対象ページ

📎 https://the-internet.herokuapp.com/add_remove_elements/

このページには、以下のような動作が用意されています：

• 「Add Element」ボタンをクリックすると、「Delete」ボタンが追加される
• 追加された「Delete」ボタンをクリックすると、それが削除される

---

🧪 Playwright スクリプト例

以下のスクリプトは、ボタンのクリック操作と、追加された要素の検証・削除を行うものです：

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

test.use({ headless: false });

test('Add/Remove Elements のボタン操作をテストする', async ({ page }) => {
  // 対象ページへ移動
  await page.goto('https://the-internet.herokuapp.com/add_remove_elements/');

  // Add Element ボタンをクリック
  await page.waitForTimeout(2000);
  await page.getByRole('button', { name: 'Add Element' }).click();
  await page.waitForTimeout(2000);

  // Delete ボタンが表示されていることを確認
  const deleteButton = page.getByRole('button', { name: 'Delete' });
  await expect(deleteButton).toBeVisible();

  // Delete ボタンをクリックして削除
  await deleteButton.click();
  await page.waitForTimeout(2000);

  // Delete ボタンがなくなったことを確認
  await expect(deleteButton).toHaveCount(0);
});

📕 補足

目視で確認しやすいように2秒のスリープを入れています。

await page.waitForTimeout(2000);

💻 追記 Addelementボタンを5回押したい時の例

// tests/add_remove_element.spec.js
import { test, expect } from '@playwright/test';

test.use({ headless: false });

test('Add/Remove ElementsページでAddボタンを5回クリックする', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/add_remove_elements/');

  const addButton = page.getByRole('button', { name: 'Add Element' });

  for (let i = 0; i < 5; i++) {
    await addButton.click();
    await page.waitForTimeout(1000);
  }

  await page.pause();
});