PlaywrightのextraHTTPHeaders機能について

extraHTTPHeaders機能とは

PlaywrghtにはextraHTTPHeaders機能というものがあります。これは、test内でAPIリクエストを行う際に、自動的に認証ヘッダーを添えてくれるものです。

例えば、

  const deleteArticleResponse = await request.delete(`https://conduit-api.bondaracademy.com/api/articles/${forDaleteArticleSlag}`, {
    headers: {
      authorization: `Token ${accessToken}`,
    },
  });

としていたものが、

  const deleteArticleResponse = await request.delete(`https://conduit-api.bondaracademy.com/api/articles/${forDaleteArticleSlag}`);

だけで済むようになります。

導入手順

1 .auth/user.jsonの作成

アクセストークンを保存するための.auth/user.jsonを作成します。

以下のようなものです。

{
  "cookies": [],
  "origins": [
    {
      "origin": "https://conduit.bondaracademy.com",
      "localStorage": [
        {
          "name": "jwtToken",
          "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoxNDE4Mn0sImlhdCI6MTczNDIwOTU1OCwiZXhwIjoxNzM5MzkzNTU4fQ.kJ_lo1xqpLI7fTVWscziBs2Z5ChbdJe1yjUMNfC04HM"
        }
      ]
    }
  ]
}

2 アクセストークンの取得

auth.spec.tsでログイン処理を行い、アクセストークンを取得します。

ログイン処理はUI操作によるものでも、API操作によるものでも、どちらでも構いません。

今回は、test処理時間の短縮の観点も考慮し、API操作によるものを行なっています。

import { test as setup } from '@playwright/test';
import user from '../.auth/user.json';
import fs from 'fs';

const authFile = '.auth/user.json';

setup('authentication', async ({ page, request }) => {
  const response = await request.post('https://conduit-api.bondaracademy.com/api/users/login', {
    data: {
      user: {
        email: '[e-mail]',
        password: 'test',
      },
    },
  });
  const responseBody = await response.json();
  const accessToken = responseBody.user.token;

  user.origins[0].localStorage[0].value = accessToken;
  fs.writeFileSync(authFile, JSON.stringify(user));

  process.env['ACCESS_TOKEN'] = accessToken;
});

3 process.env.ACCESS_TOKENの設定

auth.spec.tsで以下のようにprocess.env['ACCESS_TOKEN']を設定します。

  process.env['ACCESS_TOKEN'] = accessToken;

4 Playwright.config.tsを設定する。

以下のように、

extraHTTPHeaders: {
  Authorization: `Token ${process.env.ACCESS_TOKEN}`,
},

を追記します。