Playwrightの実行結果をSlackに送信する方法

Playwrightを用いてテストを実行する際、毎回結果レポートのファイルを開いて確認するのは面倒です。

そこで、テスト完了後に自動でテスト結果をSlackに送信する方法を紹介します。

playwright-slack-reportライブラリをインストールする
Configファイルを修正する
Slack Web APIでSlack appを作成する
Slack AppのOAuth Tokenを環境変数に設定する
configファイルに.envファイルを読み込ませる
プロキシ接続下で送信する方法

playwright-slack-reportライブラリをインストールする

今回は、playwright-slack-reportライブラリを用いる方法を紹介します。

以下のコマンドを実行して、Playwrightプロジェクトにplaywright-slack-reportをインストールします。

npm install playwright-slack-report -D

Configファイルを修正する

インストールが成功したら、Configファイルを修正してSlackにレポート結果を送るために必要な設定をします。

playwright.config.tsのreporterの設定を記述します。

  reporter: [
    [
      "./node_modules/playwright-slack-report/dist/src/SlackReporter.js",
      {
        channels: ["pw-tests"], // 結果を送信したいSlackのチャンネル名
        sendResults: "always", // "always" , "on-failure", "off"の３つから選択
　　　　　　　　　　　　　　　　maxNumberOfFailuresToShow: 4, // Slackのメッセージに含める失敗テストの数
      },
    ],
  ],

以下の情報を設定することができます。

channels

送信先のSlackチャンネル名を指定します。チャンネルIDではなく、チャンネル名をそのまま記述します。

sendResults

Slackに結果を送信するタイミングを指定します。3つの設定値の中から選択して記述します。

always：テスト実行後毎回Slackに送信する
on-failure：失敗テストが存在した時のみSlackに送信する
off：Slackへの送信を停止する

maxNumberOfFailuresToShow

送信するSlackのメッセージに含める失敗テストの数を指定します。指定しなかった場合、デフォルトの10個が適用されます。

layout

レポートのレイアウトをカスタマイズするために作成した関数を指定します。指定はオプショナルです。

Slack Web APIでSlack appを作成する

以下の手順でレポートを送信する主体となるSlack app（ボット）を作成します。

１. https://api.slack.com/appsにアクセスします。

２. 「Create an app」ボタンを押し、「From scratch」を選択します。

３. 作成するSlack Appの名前と送信先のワークスペースを入力し、「Create App」ボタンを押します。

４. メニュー欄から「Authentication」を選択し、「Configuration tokens」を押します。

５. 「Generate Token」ボタンを押し、O-Auth Tokenを作成します。

Slack AppのOAuth Tokenを環境変数に設定する

dotenvモジュールを用いてSlack AppのOAuth Tokenを環境変数として設定します。

dotenvモジュールを使用すると、カレントディレクトリに置かれた .envファイルを読み込み、そこに記述されたキー＆バリューのペアを process.env 経由で参照できるようになります。

まず、npmコマンドを実行してdotenvモジュールをインストールします。

npm install dotenv　--save

次に、.envファイルにSlack AppのOAuth Tokenを環境変数として指定します。

Slack AppのOAuth TokenはSLACK_BOT_USER_OAUTH_TOKENという名前で指定します。

SLACK_BOT_USER_OAUTH_TOKEN = xoxb-XXXXXXXX

configファイルに.envファイルを読み込ませる

.envファイルに記述した環境変数を読み込むために、configファイル（playwright.config.ts）の初めに

require("dotenv").config();　

と記述します。

require("dotenv").config();

// 以下configの設定
const config: PlaywrightTestConfig = {
 ...
}

以上の設定で、Playwrightの実行結果を自動でSlackにできるようになります！

プロキシ接続下で送信する方法

最後に、PCがプロキシに接続した状態でSlackにメッセージを送信する方法を紹介します。

一般的な方法は、「Slack Web APIを用いてプロキシ接続下でSlackに投稿する方法」でも紹介していますが、今回はplaywright-slack-reportライブラリ導入時の方法をお伝えします。

以下の３ステップで行います。

1. https-proxy-agentパッケージをインストールする

プロキシ認証情報を持つHTTPエージェントを作成するために、npmパッケージのhttps-proxy-agentパッケージを利用します。

以下のコマンドを実行し、インストールします。

npm install https-proxy-agent

2. プロキシ認証情報を持たせたHTTP Agentを作成する

/node_modules/playwright-slack-report/dist/src/SlackReporter.jsを開き、内容を編集します。

まず、

HttpsProxyAgentクラスをインポートし、WebClientのagentオプションで使用できるようなHTTPプロキシエージェントを作成します。

HTTPプロキシエージェントの引数には、プロキシサーバのURLを指定します。

const web_api = require("@slack/web-api");

// HttpsProxyAgentクラスをインポート
const HttpsProxyAgent = require('https-proxy-agent');

// HttpsProxyAgentクラスインスタンスを作成する
const proxy = new HttpsProxyAgent("http://username:password@proxy.example.com:8080");

Webクライアントにhttps-proxy-agentオブジェクトを設定する

2.から引き続き/node_modules/playwright-slack-report/dist/src/SlackReporter.jsを編集します。

WebClientインスタンスを設定している箇所を以下のように編集し、agentオプションに2で作成したエージェントを指定します。

const slackClient = new SlackClient_1.default(
   new web_api.WebClient(process.env.SLACK_BOT_USER_OAUTH_TOKEN, 
      {
         logLevel: web_api_1.LogLevel.DEBUG,
         agent: proxy
      })
);

以上の設定で、プロキシに接続した状態でもSlackにメッセージを送信することができるようになります！