PuppeteerでDARKモードを確認できるようになった

Webフロントエンドを担当しています、柳下(やぎー)です。
私が担当しているプロジェクトでは、E2Eテストに Puppeteer を使用しています。そのPuppeteerが先週めでたくv2に アップデート しました。

変更されたAPIの概要は下記の通りです。本記事ではこの中から、DARKモードを変更できるAPIを紹介したいと思います。その他については、こちら にまとめてみました。

  • DARKモードへの変更ができるようになった
  • timezoneを変更できるようになった
  • CSSメディアタイプを変更するAPIが新しくなった

DARKモードとは

まず、DARKモードについておさらいします。

macOS Mojaveにて、OSレベルで外観をDARKモードに変更できるようになりました。
そしてWebコンテンツも、 prefers-color-scheme というメディアクエリを用いて、DARK/LIGHTごとにCSSを記述することで表現できるようになりました。

弊社のフロントエンドエンジニア向けマイクロサイト DeNA Frontend|フロントエンドエンジニア もご覧のようにDARKモードに対応しています。

DARKモードへの切り替え見本

コードの解説

先ほど紹介したマイクロサイトを使って、Puppeteer上でDARKモードを表示してみたいと思います。下記がそのソースコードです。

Puppeteer初心者の方のためにもSTEPごとに解説していきます。
DARKモードの部分だけを確認したい方は、STEP3をご確認ください。

const puppeteer = require('puppeteer')

;(async () => {
  // STEP1
  const browser = await puppeteer.launch({ headless: false, slowMo: 50 })
  const page = await browser.newPage()

  // STEP2
  await page.goto('https://frontend.dena.com/')

  // STEP3
  await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }])

  // STEP4
  await page.screenshot({ path: `DeNA_FRONTEND_DARKMODE.png`, fullPage: true })

  // STEP5
  await browser.close()
})()

STEP1

const browser = await puppeteer.launch({ headless: false, slowMo: 50 })
const page = await browser.newPage()

Puppeteerを起動して、ブラウザで空ページを開きます。

テストやスクレイピングでPuppeteerを使う場合にはheadlessで使うことが一般的ですが、今回は動作を確認するためにも、 puppeteer.launch([options]) にheadfullになるように指定してブラウザを立ち上げています。

Puppeteerを起動した画面

STEP2

await page.goto('https://frontend.dena.com/')

STEP1で開いた空ページにて、マイクロサイトのURLを指定してページを開きます。

DeNA Frontendの画面

STEP3

await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }])

page.emulatemediafeaturesfeatures(features) という今回新しく追加されたAPIを使い、マイクロサイトをDARKモードに変更しています。
LIGHTモードで表示したい時は、 value に light を指定してあげてください。

DARKモードのDeNA Frontendの画面

下記のようにDARKモードで表示しているかどうかも判定することができます。

const isDarkMode = await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches))
console.log(isDarkMode)
// => true

STEP4

await page.screenshot({ path: 'DeNA_FRONTEND_DARKMODE.png', fullPage: true })

画面のスクリーンショットを保存しています📸📸📸
path にはファイル名を指定し、画面全体を撮影するには fullpage に true を指定してあげます。

Puppeteer が📸とした画像が左です。
右の実際のページと比べてコンテンツがちょっと歯抜けになっていることがわかります。
どうすれば綺麗に撮影できるのか?興味がありましたら こちら を確認してみてください。

DeNA Frontendのスクリーンショット

STEP5

await browser.close()

起動したブラウザを閉じて終わりとなります。
お疲れさまでした。

おわりに

PuppeteerのDARKモードをマイクロサービスで試していた際に、デザインの不具合を見つけることができました。こちらはその際のプルリクエストです。

不具合のプルリク

Puppeteerは簡単にTryできます。
DARKモード対応サイトを運営している方は、この機会にぜひ試してみてください。