【TestCafe】windowを2つ開いてテストを行う

現状

Reactアプリを作成して、TestCafeでテストを行っています。
テストを行うにあたって、ウィンドウを2つ出してテストを行う必要があったのでメモとして残しておきたいと思います。

やってみる

ウィンドウを2つ出してテストを行う必要があるときというのは動作している間に他の処理を行うなどがあると思います。
そのときに使えるのがopenWindowになります。
イメージとしては以下の通りにできます。
window1で捜査しているときにopenWindowを使うことで、任意のwindow2を開くことができ、そこで自由に操作することができます。

公式のURL→https://testcafe.io/documentation/402694/reference/test-api/testcontroller/openwindow

サンプルコード

サンプルコードをChatGPTに書いてもらいました

import { Selector } from 'testcafe';

fixture`Open Window Test`
  .page`http://example.com`;

test('Open new window', async t => {
  const newWindow = await t.openWindow('http://example.com/newpage');

  // Switch to the new window
  await t.switchToWindow(newWindow);

  // Perform actions on the new window
  await t.typeText('#new-page-input', 'Test Text');

  // Switch back to the original window
  await t.switchToPreviousWindow();

  // Verify that the original window is active
  await t.expect(Selector('#new-page-input').exists).notOk();
});

このテストでは、最初のfixtureでexample.comにアクセスします。テストでは、openWindowメソッドを使用して新しいウィンドウを開き、そのウィンドウでアクションを実行します。switchToWindowメソッドを使用して、テストの実行を新しいウィンドウに切り替え、switchToPreviousWindowメソッドを使用して、元のウィンドウに戻ります。最後に、オリジナルのウィンドウがアクティブであることを確認するために、元のウィンドウの存在を確認します。