angular - 分度器を使用して要素がビューポート内にあるかどうかをテストする

Question

アプリがスレッド ページ内の特定の投稿にスクロールしたかどうかをテストしたいと考えています。

最初は役立つかもしれないと思っisDisplayedて、次のようにコーディングしました。

element(by.id(postId)).isDisplayed().then((isDisplayed) => {
  expect(isDisplayed).toBe(true);
});

ドキュメントをよく読んだ後、isDisplayed要素がビューポート内にあるかどうかをチェックしません。

ハッキーな方法は、スクロール可能な親から始めて、さまざまな要素の位置を計算することです (これはwindow私の場合ではありません)。

これを確認するためのベストプラクティスはありますか?

Answer 1

最初のアイデア（あなたが言及した）：

• クラス MyRect を作成 DOMRect を拡張
• getBoundingClientMyRectに基づいて関数を作成getBoundingClientRect
• getWindowMyRectに基づいて関数を作成(0, 0, wWidth, wHeight) let wHeight = window.innerHeight || document.documentElement.clientHeight; let wWidth = window.innerWidth || document.documentElement.clientWidth;
• isInsideMyRectMyRect のcreate メソッド- https://gist.github.com/davidtheclark/5515733に基づく
• isPartOfMyRectMyRect のcreate メソッド- https://gist.github.com/davidtheclark/5515733#gistcomment-2113166に基づく

el.getWindowMyRect().isInsideMyRect(getWindowMyRect())

この方法では、ページ内の内部スクロールの問題は解決しません

---

2番目のアイデア:

• elm.getBoundingClientRect()値に注意してください
• 必要に応じて要素までスクロールします。 browser.executeScript("arguments[0].scrollIntoViewIfNeeded();", elm.getWebElement());
• elm.getBoundingClientRect()- 値が変更されている場合は、再度前の値と比較し、スクロールが必要でした