Skip to main content
Categories
Git及びツール中級の学習学習

Playwrightでちょっと待ってからスクリーンショットを取る方法

  • Post Author
    By pitang1965
  • Post Date
    Thu Aug 24 2023
adorable-baby-blur-459976

概要

  • Playwrightを用いて、コードでプルダウンメニューを切り替えた結果のスクリーンショットを保存させたら、プルダウンメニューが閉じる前のスクリーンショットとなってしまいました。
  • プルダウンメニューを切り替え、メニューが閉じた後の状態のスクリーンショットを取得できるようにするための対策のメモです。

結果

  • 次の末尾の2つのawaitの行のように2段構えとしまし。
    • セレクタ(この場合はclass)の出現又は消去(この場合は消去)を待つ
    • 更に一定時間待機する
  • 1段目だとうまくいかなかったのですが、おそらくアニメーション効果のせいかなと思っています。
// ドロップダウンの切り替え
async function selectDropdownOption(page, selectorTestId, buttonText) {
  await page.getByTestId(selectorTestId).locator('svg').click();
  await page
    .locator('div')
    .filter({ hasText: new RegExp(`^${buttonText}$`) })
    .first()
    .click();
  await page.waitForSelector('.n-base-selection:not(.n-base-selection--active)');
  await page.waitForTimeout(200);
}

スクリーンショットの保存

  • スクリーンショットの保存自体はpage.screenshotで可能です。つまり、上記の関数を呼んだ後に、次を呼ぶ感じです。
await page.screenshot({path: 'screenshot.png'}); // ルートフォルダに保存される。
  • スクリーンショットの保存については公式文書に記載がありますが、以下が可能です。
    • 全画面のスクリーンショット。
    • スクロール可能な全ページのスクリーンショット。
    • 要素のスクリーンショット。
    • 画像ファイルでなくバッファにキャプチャ。
      • そこからbase64の出力などができる。
  • 保存先がルートフォルダなので、変更したい場合は例えば次のようにします。
  const screenshotFolder = isDarkMode ? 'test-results/dark' : 'test-results/light';

  // 条件1
  await selectDropdownOption(page, 'theme-color-selector', 'ライトモード');
  await selectDropdownOption(page, 'editor-color-selector', 'テーマカラーと連動する');
  await page.screenshot({ path: `${screenshotFolder}/1.png` });

  // 条件2
  await selectDropdownOption(page, 'theme-color-selector', 'ダークモード');
  await selectDropdownOption(page, 'editor-color-selector', 'テーマカラーと連動する');
  await page.screenshot({ path: `${screenshotFolder}/2.png` });