テスト失敗メッセージに「画面の表示範囲外の要素を操作しようとしたため、エラーが発生しました。」と表示されている場合、テスト結果ページの実行ログにこのようなログがあるか確認してください。
[1] click([xxx], {})
[警告] 要素指定による操作に失敗したため、座標指定の操作でリトライします。ただし、要素の上に別の要素が重なっている場合には上にある方の要素がクリックされてしまうことがあります。
the target position: (-2, -2)
リトライも失敗しました。リトライ前のエラーは以下のとおりです:
move target out of bounds: move target out of bounds
上記のようなログが記録されている場合、ステップで指定しているロケーターで特定可能な要素が複数あり、その中の非表示になっている要素を操作しようとしているため失敗している可能性が高いです。
特にReactやVue.jsなどを用いたSPA(シングルページアプリケーション)である場合、画面上で非表示の要素もUIツリー内に存在することがあるため本エラーが発生することが多いです。
対応方法
安定するロケーターに変更する
もし失敗時の結果キャプチャに操作対象要素が表示されている場合、失敗時の結果キャプチャをUIに登録してそのUIからロケーターを設定することで一意なロケーターを設定することが可能です。
安定するロケーターの判断が難しい場合はMagicPodサポートまでお問い合わせください。
ロケーターの末尾に[last()]や[2]をつける
上述した安定するロケーターへの変更をお勧めしますが、難しい場合はロケーターの末尾に[last()]や[2]をつける方法を検討してください。参考：新しいロケータを追加・編集する
例えばこのようなロケータを設定していて、このロケータで特定できる要素が複数存在する場合、このロケータで特定できる一番最初の要素が操作対象となります。そしてその要素が非表示の要素である場合、テストが失敗してしまいます。
//button[text()='キャンセル']
操作対象の要素がロケータで特定できる一番最初の要素ではなく、最後の要素である場合は以下のように[last()]をつけることで適切な操作対象の要素を特定することができます。
//button[text()='キャンセル'][last()]
また、[2]などの数字をつけることでロケーターを一意にすることができます。
//button[text()='キャンセル'][2]
-> //button[text()='キャンセル']で特定できる要素の内、2番目の要素を特定