[e2e]puppeteerでローカルストレージの操作をする方法

完全に備忘録

puppeteerでe2eのテストコード書いてて、処理の途中でローカルストレージに値入れたいなぁ的なことがあったので、実装メモがてらにここに残すよ！

app.e2e.ts

import * as puppeteer from 'puppeteer';
const baseUrl = 'http://localhost:4200/';
let browser: puppeteer.Browser;
let page: puppeteer.Page;

describe('App test', function () {
  beforeAll(async () => {
    browser = await puppeteer.launch({
      headless: false,
      timeout: 10000,
      ignoreDefaultArgs: ['--disable-extensions'],
    });
  });

  beforeEach(async () => {
    page = await browser.newPage();
  });

  afterEach(async () => {
    await page?.close();
  });

  afterAll(async () => {
    await browser?.close();
  });

  it('テスト', async () => {
    await page.goto(`${baseUrl}`, {
      waitUntil: ['domcontentloaded', 'networkidle2'],
      timeout: 3000,
    });
    // ここで登録して、その値がちゃんと登録されているかを検証
    await expect(
      await page.evaluate(() => {
        localStorage.setItem("なんか適当なkey", "なんか適当な値")
        return localStorage.getItem('なんか適当なkey');
      }),
    ).toBe("なんか適当な値");
  });
});

expectでラップせずにpage.evaluateだけ呼び出すと、値がうまく入らなかったり・消えなかったりするような挙動をする不思議な現象があったため、
明示的に値を返してちゃんと登録されてる・消えてるよねをチェックすることでうまく動くようになったので、とりあえずメモがてらに残してみた。