Playwrightでスクショする

はじめに

前回書いた記事では、Playwright がどんな機能を持ってるのか等を書きました。
今回は、実際に使ってみての記事を書いていきます。

動作環境

• Windows 10 Pro 22H2
• Playwright Test for VSCode v1.0.19
• VS Code 1.85.0

まずはスクショから

ソースコード

• device.spec.ts

import { test } from "@playwright/test";

test("get qiit_test", async ({ page }) => {
  // Qiitaのページに移動
  await page.goto("https://qiita.com/organizations/oec");
  
  // 画面に映ってる範囲をスクショ
  await page.screenshot({ path: "./screenshot/NotFullPage_qiita_device.png" });
  
  // fullサイズで画面をスクショ
  await page.screenshot({
    path: "./screenshot/fullPage_qiita.png",
    fullPage: true,
  });
});

実際のスクショ画面

fullPage: true

にした場合、非常に縦長な画像が撮れるので折りたたんでいます。

NotFullPage_qiita_device.png

fullPage_qiita.png

見ての通り、fullPage_qiita.png は非常に縦長でスクショがされます。

テストの動かし方

上記図中の３行目の左に、✅マークがありますが、それをポチっとすることで、テストが動作します。

特段動作がストップしなければ、path で記載している箇所に、スクショが出力されます。

なお、ソースコード上では、 screenshot フォルダに png ファイルを出力するようにしていますが、このとき screenshot フォルダがなかったら、フォルダを作ってくれます。

テストを動作させると

こんな画面が表示されて、画面が動きます。

最後に

次はandroid端末を動作させていろいろやった記事を書いてみたいですね。