Testcafe v1.14.0がリリースされました

こんにちは、フロントエンドエンジニアの菅野です。

4月7日にリリースされたv.1.14.0で待望の機能が追加されました！

今回はリリースノートをもとにアップデート内容とそれに伴いTestCafeを実装しているプロジェクトのリファクタリングを行なったので、ご紹介したいと思います。

E2Eの取り組みについて書いた記事もありますので興味がありましたらそちらもぜひ。

アップデート内容

スクロールアクションの機能強化

以前のバージョンでは、ページスクロールをするためにClientFunctionを使い、画面外のDOM要素を操作する必要があったのですが、今回のリリースで専用のスクロールアクションが導入され簡単にスクロールできるようになりました。

以前までのスクロール処理

export const scrollBottom = ClientFunction(function() {
  const elementHtml = document.documentElement
  const bottom = elementHtml.scrollHeight - elementHtml.clientHeight
  window.scroll(0, bottom)
})

ちょっとめんどくさい感じで処理を書いていました・・・

便利なメソッドがたくさんある中で「なんでスクロールはないんだろう？」と不思議に思っていたので個人的に嬉しい機能追加です！

追加されたスクロールアクションは3つ

t.scroll　：要素を指定された位置にスクロールします

t.scrollBy　：指定されたピクセル数だけ要素をスクロールします

t.scrollIntoView　：要素をスクロールして表示します

今回は、t.scrollアクションを使い、リファクタリングを行いました。

リファクタリング後のスクロール処理

const container = Selector("footer")
await t.scroll(container, 'bottom')

これだけです！

要素内のスクロールできる高さから要素の高さを引いて（ゴニョゴニョ...）しなくても良くなり、直感的な見やすいコードになりました！

その他のt.scrollByとt.scrollIntoViewの使い方はこのようになっています。

t.scrollBy

設定されたピクセル数だけターゲットをスクロールします。例ではWebページを上に200px、右に500pxスクロールさせた場合です。

fixture`Scroll Action`
  .page('http://example.com')
test('Scroll the webpage', async t => {
  await t
    .scrollBy(500, -200)
})

t.scrollIntoView

要素をスクロールして表示します。（使いどころがピンと来てないのですが、スクロールアニメーションがある要素に使うと良いのでしょうか？）

fixture `Scroll Actions`
  .page `http://www.example.com/`
test('Scroll element into view', async t => {
  const target = Selector('#target')
  await t
    .scrollIntoView(target)
})