SyntheticsのScripted Browserでスクリプトを記載する場合、別のページにて表示された認証情報を入力するなど、まれに複数タブ（Window）を開くケースのテストを記載するユースケースがあるかと思われます。本ブログでは、そういったケースのために別タブを開いたり、タブを切り替えたりすることができるサンプルをご紹介します。
※なお、本ブログに記載のスクリプトに関しまして、確認のためお客様のアカウントにて、そのままコピーし動作確認していただいても問題ございません。また、スクリプト内記載のURLをブラウザから直接開いて内容をご確認いただくことも問題ございません。
リンクにて別タブが開かれるページの場合
HTMLのaタグにtargetを使って別タブが開かれるページの場合、次のようなスクリプトにて実現していただけます。
var assert = require('assert');
//デフォルトのWindowのHandleを保持する
const originalWindow = await $webDriver.getWindowHandle();
//最初のページを開く、
await $webDriver.get('https://www.selenium.dev/selenium/web/window_switching_tests/page_with_frame.html');
//「Open new window」と書かれたリンクをクリックする（リンクは新規タブが開くリンク）
let el = await $webDriver.findElement($selenium.By.linkText("Open new window"));
await el.click();
//新規タブが作成されるのを待つ（タイムアウト10秒）
await $webDriver.wait(
async () => (await $webDriver.getAllWindowHandles()).length === 2,
10000
);
//新規タブのハンドルを取得
const windows = await $webDriver.getAllWindowHandles();
windows.forEach(async handle => {
if (handle !== originalWindow) {
//新規Windowへ切り替え
await $webDriver.switchTo().window(handle);
}
});
//新規タブにてページのタイトルが取得できるのを待つ
await $webDriver.wait($selenium.until.titleIs('Simple Page'), 10000);
//スクリーンショットの取得
await $webDriver.takeScreenshot();スクリプトの説明は、スクリプト内のコメントで確認ください。なお、ポイントとしては、リンククリック後に、getAllWindowHandles()を使ってタブが増えたことを待ってその後、switchTo().window(handle)で、フォーカスを新しいタブに切り替えているところになります。
また、元のタブに戻りたい場合、最初に取得したoriginalWindowを使って、以下のように記載していただくことで元のタブに戻れます。
await $webDriver.switchTo().window(originalWindow);スクリプトから別タブを開き、操作する
前述のaタグにてtargetが指定されていない場合でもご利用いただけます。また、新規タブを開いていただく方法はいくつかございますが、本ブログでは、selenium4よりサポートされたnewWindow()を利用します。
具体的なスクリプトとしては、以下のようなスクリプトにて実現していただけます。
var assert = require('assert');
//デフォルトのタブで最初のページを開く
await $webDriver.get('https://www.selenium.dev/selenium/web/single_text_input.html');
//タイトルが取得されるのを待つ
await $webDriver.wait($selenium.until.titleIs('BasicKeyboardInterfaceTest'), 10000);
//新規タブを開き、切り替える
await $webDriver.switchTo().newWindow('tab');
//新規タブが作成されるのを待つ（タイムアウト10秒）
await $webDriver.wait(
async () => (await $webDriver.getAllWindowHandles()).length === 2,
10000
);
//新規タブで別のページを開く
await $webDriver.get('https://www.selenium.dev/selenium/web/window_switching_tests/simple_page.html');
//タイトルが取得できるのを待つ
await $webDriver.wait($selenium.until.titleIs('Simple Page'), 10000);
el = await $webDriver.findElement($selenium.By.xpath('/html/body/div'));
//スクリーンショットの取得
await $webDriver.takeScreenshot();
スクリプトの説明は、スクリプト内のコメントで確認ください。なお、ポイントとしては、$webDriver.switchTo().newWindow('tab')を使って、新規タブを開き、フォーカスもそちらに切り替えているところになります。
なお、本ブログのスクリプトに関しては、Sleniumのドキュメント記載の内容をもとに作成しています。その他実装したいことがある場合、Seleniumのドキュメントをご参照いただくことで実装していただくことができると思われますので、Seleniumのドキュメントもご参照いただきますようお願いいたします。
本ブログに掲載されている見解は著者に所属するものであり、必ずしも New Relic 株式会社の公式見解であるわけではありません。また、本ブログには、外部サイトにアクセスするリンクが含まれる場合があります。それらリンク先の内容について、New Relic がいかなる保証も提供することはありません。
