LIFFアプリのアクセストークンをコマンド1発で取得してコピーするツールを作ってみた

今回作成したコードは以下のリポジトリにあげています。

どんな時に使うか？

LIFFアプリ開発においてアクセストークンが必要な時に利用することを想定しています。

手動でアクセストークンを取得してそれをもとにAPIリクエストを実行しているような開発環境では利用する価値があると思います。

※ミニアプリ開発の場合、ブラウザでログインできないため今回のツールは利用できません

Before

1. LIFFアプリを開く
2. ログイン画面が表示
3. ログインしてLIFFアプリの画面表示
4. Developer ToolなどでLocalStorageからアクセストークンを取得してコピー
5. PostmanでAPI実行

After

1. コマンドを実行
2. PostmanでAPI実行

使い方

初期設定

• コマンドを実行

npm install

cp .env.example .env

• .envにアクセストークンを取得したいLIFFアプリのURL、自身のLINEログインのメールアドレス・パスワードを入力する

ツールの動作

• コマンドを実行

npm run test

実装の解説

E2EテストツールのPlaywrightで、LINEログインを自動で行い、アクセストークンを取得したのちクリップボードに保存する実装をしています。

LIFFアプリに遷移し、最初にLINEログインを求められる画面に移動します。

メールアドレス、パスワードによるLINEログインを行います。

      await page
        .getByPlaceholder('メールアドレス')
        .fill(process.env.LINE_MAIL_ADDRESS || '');
      await page
        .getByPlaceholder('パスワード')
        .fill(process.env.LINE_PASSWORD || '');
      await page.click('text=ログイン');

※メールアドレス、パスワードによるLINEログインを許可していない場合、自身の端末のLINEアプリから設定を変更する必要があります。

Cookie, LocalStorageなどの情報をこちらで保存します。

const context = await page.context().storageState({ path: STATE_FILE_PATH });

次にテスト実行する際に、アクセストークンが失効していない場合は再利用しています。

そのため、テスト実行のたびにログインするわけではなく、アクセストークンが失効していた場合のみLINEログインを行なっています。

最後に、取得したアクセストークンをクリップボードに保存します。

clipboardy.writeSync(accessToken.replace(/^"|"$/g, ''));

こちらでは clipboardy という、環境に関わらずクリップボード周りの操作を行なってくれるパッケージを利用しています。

Playwrightで要素を取得する際に日本語文言を指定する理由

今回、Playwrightで操作を行う対象要素の取得をする際に、classやidではなく日本語文言を指定した箇所が多くなっています。

      await page
        .getByPlaceholder('メールアドレス')
        .fill(process.env.LINE_MAIL_ADDRESS || '');
      await page
        .getByPlaceholder('パスワード')
        .fill(process.env.LINE_PASSWORD || '');
      await page.click('text=ログイン');

文言は id や data-testid といった属性に比べて変更されやすそうですが、コードの見通しが良くなるので文言を指定する方が好きです。

また、公式でも data-testid のような属性よりも、 getByRole や getByLabel のようなユーザーにとって意味のある属性をもとに取得するように推奨されています。

要素を特定するためには、ユーザーや支援技術がページを認識する方法に最も近いため、ロールロケーターを優先して使用することをお勧めします。 https://playwright.dev/docs/locators#locate-by-role

コードを見ただけで、「メールアドレスを入力している」「ログインボタンをクリックしている」が分かりやすいのが良いですね。

また、Playwrightで利用するブラウザを日本語設定にするため、以下のように設定を入れています。

use: { ...devices['Desktop Chrome'], locale: 'ja' }

なぜ作ったか？

API実行にLINEのアクセストークンの検証を行うAPI Gateway, Lambdaの実装をしており、動作確認時に手動でLINEログインを行うことでアクセストークンを取得していました。

手動でLINEログインを行うのは手間なので、今回ツールを作成してコマンド1つ実行すればアクセストークンを取得できるようにしました。

所感

• LINEログイン周りの細かい設定値について知ることができてよかった
• Playwrightの実装でlocatorを取得時に、優先する要素は何か知ることができた
• クリップボードへのコピーまで実装できたので満足

動作失敗する場合、GitHubのissueで報告ください！