Playwrightで開いたページにユーザースタイルを適用する方法

Playwrightでユーザースタイルを適用する

Playwrightで開いたページにユーザースタイル(CSS)を適用したい場合があります。

例えば、iwb.jpのトップページには広告が表示されています。

しかし、スクリーンショットを保存する際には、下図のように広告部分を非表示にしたほうが適切です。

Playwrightではpage.addStyleTagを使用することでユーザースタイル(CSS)を適用できます。

例えばiframeに「visibility: hidden;」を適用したい場合は、以下のコードになります。

example.spec.ts

import { test } from '@playwright/test'

test('iwb.jpにユーザースタイルを適用', async ({ page }) => {
  await page.goto('https://iwb.jp/')
  await page.addStyleTag({ content: 'iframe { visibility: hidden; }' })
  await page.screenshot({ path: 'screenshot.png' })
})

こちらのコードを実行して保存されたスクリーンショットが下図になります。

Google Adsenseのiframe部分に「visibility: hidden;」が適用されているので、背景のグレー色が見えています。

PlaywrightでCSSファイルを適用する

前述のpage.addStyleTagはインラインスタイルで適用していますが、CSSファイルを作成して適用させることもできます。

まず適用させるCSSファイルを作成します。

style.css

iframe {
  visibility: hidden;
}

.site-content {
  background: pink;
}

page.addStyleTagのpathに読み込むCSSファイルのパスを指定します。

example.spec.ts

import { test } from '@playwright/test'

test('iwb.jpにユーザースタイルを適用', async ({ page }) => {
  await page.goto('https://iwb.jp/')
  await page.addStyleTag({ path: './tests/style.css' })
  await page.screenshot({ path: 'screenshot.png' })
})