Playwright
Playwright(英語) は、オープンソースのテスト自動化フレームワークです。 Chrome、Firefox、Safari などの Web ブラウザーを自動化するための高レベル API を提供します。
新しい Playwright プロジェクトを作成する
メインメニューで へ移動します。
あるいは、 ようこそ 画面が表示されている場合は、左側のペインで 新規 | 新規プロジェクト をクリックします。
左側のリストから Playwright を選択します。
新しいプロジェクトに名前を付け、必要に応じてその場所を変更します。
Node.js ランタイム を指定します。
Playwright をインストールするコマンドを指定します。
作成 をクリックしてください。
メインメニューで へ移動します。
あるいは、 ようこそ 画面が表示されている場合は、左側のペインで 新規 | 新規プロジェクト をクリックします。
左側のリストから Python 用 Playwright を選択します。
新しいプロジェクトに名前を付け、必要に応じてその場所を変更します。
(オプション) Git リポジトリの作成 オプションを有効にして、新しいプロジェクトをバージョン管理下に置きます。 今すぐ実行したくない場合は、後でいつでも実行できます。
新規作成または既存の 環境 を使用し、対応する設定を構成してください。
リストから基本インタープリターを選択するか、
をクリックしてファイルシステム内の Python 実行可能ファイルを見つけます。ロケーション フィールドに新しい仮想環境の場所を指定するか、
をクリックしてファイルシステム内の場所を参照します。 新しい仮想環境のディレクトリは空である必要があります。マシン上のグローバル Python にインストールされているすべてのパッケージを、これから作成する仮想環境に追加する場合は、 ベースインタープリターからパッケージを継承する チェックボックスを選択します。 このチェックボックスは、
--system-site-packagesオプションに virtualenv ツールの対応しています。PyCharm で Python インタープリターを作成するときにこの環境を再利用する場合は、 すべてのプロジェクトで使用可能にする チェックボックスを選択します。
詳細については、 virtualenv 環境を構成する を参照してください。
ロケーション フィールドに新しい conda 環境の場所を指定するか、
をクリックしてファイルシステム内の場所を参照します。 新しい conda 環境のディレクトリは空である必要があります。リストから Python のバージョンを選択します。
PyCharm は conda のインストールを検出します。
PyCharm がインストールを自動的に検出しなかった場合は、conda 実行可能ファイルの場所を指定するか、
をクリックして参照します。
詳細については、 Conda 仮想環境を構成する を参照してください。
リストから基本インタープリターを選択するか、
をクリックしてファイルシステム内の Python 実行可能ファイルを見つけます。ベースバイナリディレクトリを
PATH環境変数に追加した場合、追加のオプションを設定する必要はありません。pipenv 実行可能ファイルへのパスは自動検出されます。PyCharm が pipenv 実行可能ファイルを検出しない場合は、 pip 経由で pipenv をインストールする をクリックして、PyCharm が自動的にインストールできるようにします。
または、 pipenv のインストール手順に従って実行可能パスを検出し、それをダイアログで指定します。
詳細については、 pipenv 環境を構成する を参照してください。
リストからインタープリターを選択します。 利用可能なインタープリターがない場合は、 インタープリターの追加 をクリックし、必要に応じてインタープリターを構成します。
作成 をクリックしてください。
選択したオプションに従って新しいプロジェクトが作成されます。
Playwright プロジェクトを初期化する
プロジェクトが作成されたら、初期化する必要があります。 この手順では、目的の言語を選択し、Playwright ブラウザーをインストールし、その他の設定を指定します。
プロジェクトの初期化を開始するには：
実行ツールウィンドウ Alt+4 では、キーボードの上 / 下矢印ボタンを押して、プロジェクトで使用する言語を選択します。
エンドツーエンドテストを配置するフォルダーの名前を入力します。
GitHub アクションのワークフロー(英語)を追加するかどうかを指定します。
Playwright ブラウザーをインストールするかどうかを指定します。
すべてのパラメーターを指定すると、初期化が開始されます。 プロセスが完了すると、システムから通知が届きます。
ロールベースのロケーターのサポート
Playwright では、 ロール(英語)別に要素を見つけることができます。 これにより、ボタン、チェックボックス、見出し、リンク、その他の要素など、ページ上の特定の要素を正確に特定できます。
PyCharm はこのようなロケーターを生成してコードに追加できるため、テストで使用できます。
コードに要素を追加する
要素を追加するファイルを開きます。
右側のサイドバーの
をクリックして、 Web インスペクター ツールバーウィンドウを開きます。アドレスバーにページの URL を指定します。
「
」をクリックし、Web インスペクターで追加する要素を選択します。
要素を選択したら、「
」をクリックして要素をコードに追加します。
特定のタイプのセレクター (ID、 名前、 クラスでタグ付けするなど) を追加するには、
をクリックして必要なオプションを選択します。CSS ロケーターと XPath ロケーターの間で具体的に切り替える場合は、
をクリックして、必要なロケーター型を選択します。
その結果、コードの一部が生成され、コードエディターに追加されます。
テストの実行
テストを実行するには、テストクラスまたはテストメソッドの横にある
ガターアイコンをクリックし、リストから 実行 オプションを選択します。あるいは、キャレットをテストクラスに置いてそのクラス内のすべてのテストを実行するか、テストメソッドにキャレットを置き、 Ctrl+Shift+F10 を押します。
実行 / デバッグ構成を使用すると、よりカスタマイズ可能な方法でテストを実行できます。 詳細については、 テストの実行 を参照してください。
見出しモードでテストを実行する
ヘッドモードでテストを実行すると、Playwright が Web サイトとどのように対話するかを視覚的に確認できます。
ヘッドモードでテストを実行するには：
実行 / デバッグ構成スイッチャーで現在の構成をクリックし、
をクリックして、 編集 オプションを選択します。
Playwright オプション フィールドに、
--headedコマンドを指定します。
変更を適用し、テストを実行します。
実行 / デバッグ構成スイッチャーで現在の構成をクリックし、
をクリックして、 編集 オプションを選択します。
追加引数 フィールドに、
--headedコマンドを指定します。
変更を適用し、テストを実行します。
その結果、ブラウザーが開き、テストの手順が再現されます。
テスト結果を確認する
テストの実行が終了すると、結果が 実行 ツールウィンドウの テストランナー タブに表示されます。 このタブでは、テストの再実行、テスト結果のエクスポートとインポート、各テストの実行にかかった時間を確認したり、その他のアクションを実行したりできます。
詳細については、 テスト結果を調べる を参照してください。
デバッグテスト
一般に、デバッグ手順には次のステップが含まれます：
実行を一時停止する必要があるコード行にブレークポイントを設定します。
コードをデバッグモードで実行します。
デバッグ ツールウィンドウを使用してコードを分析し、潜在的な問題を特定します。
問題を修正します。
IDE でこれらの手順を再現するには、次のステップを実行します：
ガターで、実行を一時停止したい実行可能なコード行上にマウスカーソルを合わせて
をクリックします。 
ガターで
をクリックし、 デバッグ を選択します。 これにより、デバッガーセッションが開始され、コードが実行されます。プログラムがブレークポイントに到達すると実行が一時停止し、 デバッグ ツールウィンドウでデバッガーセッションの結果を確認できます。
デバッグの詳細については、「デバッグ 」を参照してください。
Playwright レポートの生成
Playwright 報告者(英語)は、失敗したテストに関する詳細情報を提供するため、テスト実行中に何が起こったのかをより徹底的に分析できます。
デフォルトでは、 html レポートが生成されますが、実行 / デバッグ構成を使用して別の形式に切り替えることができます。 これを行うには、次の手順を実行します。
実行 / デバッグ構成スイッチャーで現在の構成をクリックし、
をクリックして、 編集 オプションを選択します。Playwright オプション フィールドで、目的の 報告者(英語)を指定します。 例：
--reporter=line変更を適用し、テストを実行します。
その結果、詳細なレポートが生成されます。
実行 / デバッグ構成を変更する
テストの起動プロパティを変更したい場合は、実行 / デバッグ構成を編集します：
実行 / デバッグ構成スイッチャーで現在の構成をクリックし、 Edit Configurations… オプションを選択します。
実行 / デバッグ構成 ダイアログで、編集する構成を選択します。
必要なスタートアッププロパティを構成します。
変更を適用して OK をクリックします。
実行 / デバッグ構成の詳細については、 実行 / デバッグ構成 を参照してください。
ロケーターテンプレートをカスタマイズする
選択した要素をコードに追加する方法をカスタマイズしたい場合は、テンプレートを変更できます：
ステータスバーのフレームワーク名をクリックします。 UI オートメーションフレームワーク メニューが開きます。
テンプレートのカスタマイズ オプションを選択してください。
ファイルおよびコードテンプレート ダイアログで、リストから必要なフレームワークを選択します。
Web 要素ロケーターのコード生成アルゴリズムを書き換えます。
変更を保存するには、 OK をクリックします。
その結果、更新されたコード生成アルゴリズムに従ってロケーターがコードに追加されます。