Playwrightでpage.waitForTimeoutは使うと遅くなるので使ってはいけない

await page.click('#submit')
await page.waitForTimeout(2000) // 1秒で送信完了した場合、無駄な待ち時間が発生
await expect(page.getByText('送信完了')).toBeVisible()

await page.click('a.delayed-navigation')
await page.waitForURL('**/target.html')

await page.waitForLoadState() // デフォルトは 'load' なので省略可
await page.waitForLoadState('domcontentloaded')
await page.waitForLoadState('networkidle') // 非推奨

await page.goto('https://example.com')
await page.waitForSelector('h1')

// ローディングの要素がDOMにあればOK
await page.waitForSelector('.loading')

// ローディングが表示されるのを待つ
await page.waitForSelector('.loading', { state: 'visible' })

// ローディングが非表示になるのを待つ
await page.waitForSelector('.loading', { state: 'hidden' })

// ローディングがDOMから削除されて消えるのを待つ
await page.waitForSelector('.loading', { state: 'detached' })

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

test('別タブで開いた先のURLが正しいかテスト', async ({ page }) => {
  await page.setContent(`
    <button onclick="window.open('https://example.com/')">open</button>
    <a href="https://example.com/" target="_blank">link</a>
  `)

  for (const selector of ['button', 'a']) {
    const [newPage] = await Promise.all([
      page.waitForEvent('popup'),
      page.click(selector)
    ])
    expect(newPage.url()).toBe('https://example.com/')
  }
})

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

test('ファイルダウンロードのテスト', async ({ page }) => {
  await page.goto('https://iwb.jp/s/download.html')

  const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.click('a.download')
  ])

  const fileName = download.suggestedFilename()
  await download.path()
  console.log(`${fileName}のダウンロード完了`)
  // sample.jpgのダウンロード完了
})

test('DummyJSONボタンのクリックとリクエスト検証', async ({ page }) => {
  // ページに移動
  await page.goto('https://iwb.jp/s/download.html')

  // ボタンが表示されるのを待機
  const button = page.getByRole('button', { name: 'DummyJSON' })
  await expect(button).toBeVisible()

  // リクエストの監視を開始（URLパラメータを動的に検証）
  const requestPromise = page.waitForRequest('https://dummyjson.com/test?*')

  // ボタンをクリック
  await button.click()

  // リクエストの完了を待機
  const request = await requestPromise
  console.log('リクエストURL:', request.url())
  // リクエストURL: https://dummyjson.com/test?delay=1000

  // レスポンスの待機と検証（URLパラメータを動的に検証）
  const response = await page.waitForResponse('https://dummyjson.com/test?*')
  const responseData = await response.json()
  console.log('レスポンスデータ:', responseData)
  // レスポンスデータ: { status: 'ok', method: 'GET' }

  // レスポンスデータの検証
  expect(responseData).toEqual({
    status: 'ok',
    method: 'GET'
  })
})

test('要素の待機と検証', async ({ page }) => {
  await page.goto('https://www.google.com/');

  const result = await page.waitForFunction(async () => {
    return !!document.querySelector('textarea[name="q"]')
  });
  console.log(await result.jsonValue()) // true

  const result2 = await page.waitForFunction(async () => {
    return !!document.querySelector('foo[name="q"]')
  });
  console.log(await result2.jsonValue()) // false
})