🐈

TestCafe 別ウィンドウでテスト実行時にセレクターが指定できない

2020/12/13に公開

JavaScript

概要

TestCafeでのテスト過程で別ウィンドウに移動し、テストを続ける。
というテストを実行していたところ、

という現象に遭遇しました。

1 The element that matches the specified selector is not visible.

その時のエラー文

1 The element that matches the specified selector is not visible.

色んな指定方法を試したが一向に反応しない。

原因

TestCafeで開かれる別ウィンドウは小さいため、

デスクトップでは隠されていて、小さいデバイスでしか表示されない
要素がビューポートの外に出ている

などの原因から発生することがあるみたいです。

調べてみると、似たような事例が多く、
困っている外人さんも多かったので案外盲点なのかもしれません。(自分だけでは気づかなかった)

参考：github issue

resizeWindow のヒントが役に立ちました。私は完全に見落としていたのですが、もう一つの送信ボタンがデスクトップでは隠されていて、小さいデバイスでしか表示されないということを。私のテストの最初のステップは常に.maximizeWindow()なので、これが問題になるとは思っていませんでした。
私がHTMLコードの一部を見落としていただけなので、この問題を解決します。

参考：stackoverflow

要素がビューポートの外に出ている可能性があるということです。その場合は、ウィンドウサイズを変更する（または最大化する）か、要素に移動してみてください。

解決策

ウィンドウのサイズを大きくする。

以下の記事を参考にウィンドウのサイズを大きくしてみました。

JavaScriptで画面サイズを取得・変更する方法

t.resizeWindow( width, height )

このメソッドの引数に変更したい縦横のサイズを指定。

僕は以下のコードで別ウィンドウをフル画面にしました。

// ウィンドウをフル画面にする処理
  const resize = ClientFunction(() => {
    window.resizeTo(screen.width, screen.height);
  });
  
#中略
  // 別ウィンドウ展開後、フル画面に変更。
  await resize();

別ウィンドウをフル画面にした後に、処理を実行すると、無事解決できました。

もし、同じような現象が起きた方場合は、良ければお試しください！

概要

1 The element that matches the specified selector is not visible.

原因

解決策

Discussion