Zenn
📘

PlayWright で JavaScript を無効にしたブラウザを起動する方法

2023/02/10に公開
Next.js
React
TypeScript
JavaScript
#
E2E
tech

やりたいこと

PlayWright で JSを無効にした状態 の ブラウザを起動したい

※ PlayWright : Webフロントエンド自動テストのためのツール

実現方法

newContext の引数に { javaScriptEnabled: false } を付与する

こうすると「JSを無効にした状態」のブラウザを起動することができる

const context = await browser.newContext({ javaScriptEnabled: false });

なので「JSを無効にした状態」のブラウザでテストをしたい場合は
以下のような感じでE2Eテストを書いていけばいいことになる

test.describe("JavaScript無効", () => {
  test("初期描画時", async ({ browser }) => {
    const context = await browser.newContext({ javaScriptEnabled: false });

    const page = await context.newPage();

    await page.goto("{なんらかのURL}");

    ... なんらかのテストを記載する ...
    
    await browser.close();
  });
});

どんな場面で使用するか？

たとえば Next.js を使用しているプロジェクトで Server Side Rendering が正しく起動しているかどうか？を確認するときに { javaScriptEnabled: false } を付与したブラウザを起動して bodyタグ に DOM要素 が存在するかどうか？をE2Eテストで確認したい場面なんかで使用できる。ブラウザの JavaScript を無効にしているため、もし仮に Server Side Rendering が正しく機能していなかった場合、bodyタグに画面を構成する HTML要素 が存在しないことが期待値になる。これを expect で確認すれば Server Side Rendering が正しく機能しているかどうか？をE2Eテストで確認できるため、もしそういった場面に出会したら是非とも試していただきたい！

参考文献

Disable Javascript in Playwright

Discussion