概要

• 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` });