Wiz テックブログ

Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。

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.scrollByt.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)
})

おまけ

サイトもいつの間にかリニューアルされていました!

リニューアル前 リニューアル前

リニューアル後  リニューアル後

最後に

Wizではエンジニアとして一緒に働く仲間を絶賛募集しております。

ご興味のある方、是非ご覧下さい..!!

【フロントエンドエンジニア】 場所にとらわれず自社メディア成長に貢献したいフロントエンドエンジニア募集! - 株式会社WizのWebエンジニアの求人 - Wantedly

【バックエンドエンジニア】 勤務地自宅を叶える!バックエンドエンジニアとして事業を成長させたい方募集 - 株式会社WizのWebエンジニアの求人 - Wantedly