Zenn
🎭

Playwrightで実際にレンダリングで使われているフォント情報を取得する

2022/07/31に公開
Playwright
E2E
tech

前提として、 Chromeの場合はChrome DevToolsから確認することができる

Elements > Computed > Rendered Fontsから確認することができる

CDPSessionを使って確認する

これをplaywrightから確認する場合には、CDPSessionを使うことで取得することができる

const client = await page.context().newCDPSession(page)
await page.goto('https://zenn.dev/aokiken')
const {root} = await client.send('DOM.getDocument')
const {nodeId} = await client.send('DOM.querySelector', {nodeId: root.nodeId, selector: '[class^="UserHeader_bio__"]'})
await client.send('CSS.enable')
const {fonts} = await client.send('CSS.getPlatformFontsForNode', {nodeId: nodeId})
console.log(fonts)
console
[
  { familyName: '.SF NS', isCustomFont: false, glyphCount: 11 },
  {
    familyName: 'Hiragino Kaku Gothic ProN',
    isCustomFont: false,
    glyphCount: 27
  }
]

CSS.getPlatformFontsForNodeにどうやってたどり着いた?

Chrome DevToolsのProtocol Monitorから当たりをつけた

現在はSettings > Experiments Protocol Monitorから有効にする必要がある

関連記事

https://playwright.dev/docs/api/class-cdpsession
https://chromedevtools.github.io/devtools-protocol/

Discussion