今回は、その「新しいタブ」に操作の対象を切り替える、という少し高度なテクニックに挑戦します。

Playwrightを使って、ブラウザのタブを切り替える操作方法を学びます。

ここで大切なのは、以前学んだUI上の「タブ」と、ブラウザ自体の「タブ」は全くの別物だということです。リンクをクリックして新しいタブが開かれても、Playwrightの操作対象は、自動では切り替わってくれません。

「今から、あっちの新しいタブを操作しますよ」と、私たちが明示的に命令を出してあげる必要があります。

今回使用するコマンド：helpers().tab.switchWindow()

ブラウザのタブは、一番左が「0番目」、その次が「1番目」、「2番目」…というように、0から始まる番号が付けられています。この番号を指定して、操作したいタブに切り替えます。

基本的な書き方

await helpers().tab.switchWindow(切り替えたいタブの番号);

具体例

// 左から2番目（番号は1）のタブに切り替える場合
await helpers().tab.switchWindow(1);

やってみよう

以下の手順に沿って、新しく開かれたタブに切り替えるテストコードを完成させてください。

演習ファイル

tests/document-2/lesson-10.spec.ts

行う操作

手順動画

手順

1. デバッグ実行： ブレークポイントで目的の画面で止める
2. 要素の特定： Pick locator を使ってコードを取得する
3. コードの記述： 取得したコードを元に処理を完成させる
4. 最終確認： テストを実行し、passed を確認する

ちなみに...

click() や fill() は、Playwrightが最初から用意してくれている公式のコマンドです。

一方、今回使う switchWindow() は、この課題の作者が、タブ切り替えを簡単にするために特別に用意した、オリジナルの便利機能（ヘルパー関数）です。

つまり、現場で switchWindow() と書いても、それが用意されていなければ動きません。

ここで本当に覚えてほしいのは、コマンドの名前そのものではなく、**「ブラウザのタブは、自動では切り替わらないので、何らかのプログラムで明示的に切り替える必要がある」**という、大切な考え方です。