インラインフレーム（より一般的にはiframeとして知られています）は、サードパーティのコンテンツを表示したり、Webページのコンテンツ内に新しいページを埋め込んだりするために使用されます。テスト自動化の世界では、iframeの操作が難しい場合があります。

Seleniumでは、エンジニアがこのswitch_to方法を使用してドライバーのフォーカスをフレーム自体に変更する必要があります。アクションの実行が完了したら、を使用してドライバーをメインページに再度フォーカスする必要がありますswitch_to.default_content()。これは難しいワークフローではありませんが、アクションを実行する必要があるときはいつでもフレームを切り替え続けるのは確かに面倒です。

サイプレスはiframeをネイティブに処理しません。これはcy、すべてのサイプレスコマンドで使用されるプレフィックスが、が見つかるまでDOMをトラバースするため#documentです。見つかったら、トラバーサルは終了します。Cypressをiframeで使用するには、カスタムコード（またはcypress-iframeプラグイン）が必要です。

一方、劇作家は、iframeの操作をシンプルかつ直感的にします。このチュートリアルでは、従来のiframeとネストされたiframeの両方でPlaywrightを使用する方法を学習します。テストの焦点として、DemoQAフレームとネストされたフレームのページを使用します。

入門

このチュートリアルでは、次のパッケージをインストールする必要があります。

• Pytest
• 劇作家

セレクターメソッド

Playwrightは、エンジニアにiframeを選択するための3つのオプションを提供します。

• element_handle.content_frame（）
• page.frame（）
• page.frames [i]

このpage.frames[i]プロパティは、iframeに一意の属性や親要素がない場合に使用する必要があります。プロパティは、特定のフレームのインデックスを作成できるページ上のすべてのアクティブなフレームを一覧表示します。アプリケーションのソースコードにアクセスできず、前の2つの方法を使用できない場合を除いて、この方法の使用はお勧めしません。

Iframeに焦点を当てる

DemoQAフレームページには2つのiframeが含まれています。1つはページの左中央に、もう1つは左下にあります。

DemoQAフレームページのiframeには一意のurl属性がなく、属性もありませんname。element_handle.content_frame()親要素に一意のセレクターがあるため、これらの場所を特定する方法を使用します。

これで、ページの最初のフレームにアクセスできます。劇作家のアサーションはElementHandlesで使用できるframe_oneとheadingPytestアサーションを書き込むために。

ネストされたフレーム

Playwrightは、frame.child_frame[i]プロパティを使用して既存のiframe内のフレームを選択するための追加の方法を提供します。このプロパティは、ページ上のiframe内のすべての子フレームのリストを返します。page.frames[i]プロパティと同様に、これは、子iframeに一意の属性nameまたはurl属性がない場合、または一意のロケーター戦略を持つ親要素がある場合に役立ちます。

DemoQAのネストされたフレームページの子iframeには、一意のロケーター戦略がないため、frame.child_frame[i]プロパティを使用して選択する必要があります。

子iframeには、「子Iframe」というテキストを持つbody要素と単一のp要素が含まれます。これを使用して、Pytestアサーションステートメントを作成するためのPlaywrightアサーションを作成できます。

検証

上記のテストは、次のコマンドを使用してターミナルで実行できます（を使用している場合pytest-playwright）。

• pytest ヘッドレスランの場合
• pytest --headful 頭一杯のために

browser = {browser_type}.launch(headless=False)

このチュートリアルを完了すると、ディレクトリは次のようになります。

tests
    |__ test_frames.py
.gitignore
README.md
requirements.txt

Playwrightを使用すると、エンジニアはiframeを見つけてアクションを実行するための、きちんとした読みやすいテストコードを作成できます。オートメーションスペース内のPlaywrightの競合他社とは異なり、エンジニアは、インラインフレーム要素を操作するときに、カスタムコードを記述したり、ドライバーのフォーカスを追跡したりする必要はありません。

Jonathan Thompsonは、テスト自動化を専門とする上級品質エンジニアです。彼は現在、ノースカロライナ州ローリーに妻とウィンストンという名前のゴールデンドゥードルと一緒に住んでいます。LinkedInで彼とつながるか、Twitter（@jacks_elsewhere） またはGithub（ThompsonJonM）で彼をフォローすることができます。