TestCafeでログイン画面をテストする

はじめに

最近、TestCafeを使ってE2Eテストを書き始めました。
ログイン画面でログインに成功することのテストを書く時にちょっとハマったので共有します。

テストは以下のような内容になってます。

• ログイン画面を表示
• フォームにメールアドレス、パスワードを入力
• ログインボタンをクリック
• 遷移先のURLがhttp://localhost/mypage/だったらテスト合格

コード

うまくいったコード

import { Selector } from 'testcafe'
import { BASE_URL } from './config'


fixture('ログインページ').page(`${BASE_URL}/login`)

test('ログインでマイページに遷移', async (t) => {
  const mailForm = Selector('input[aria-label="login mail address"]')
  const passwordForm = Selector('input[aria-label="login password"]')
  const loginButton = Selector('button[aria-label="login button"]')

  await t
    .typeText(mailForm, '[e-mail]')
    .typeText(passwordForm, 'password')
    .click(loginButton)
    .expect(t.eval(() => document.location.href))
    .eql('http://localhost/mypage/', { timeout: 10000 })
})

うまくいかなかったコード

import { Selector } from 'testcafe'
import { BASE_URL } from './config'

fixture('ログインページ').page(`${BASE_URL}/login`)

test('ログインでマイページに遷移', async (t) => {
  const mailForm = Selector('input[aria-label="login mail address"]')
  const passwordForm = Selector('input[aria-label="login password"]')
  const loginButton = Selector('button[aria-label="login button"]')

  await t
    .typeText(mailForm, '[e-mail]')
    .typeText(passwordForm, 'password')
    .click(loginButton)
    .expect(await t.eval(() => document.location.href))
    .eql('http://localhost/mypage/', { timeout: 10000 })
})

なぜうまくいかなかったか

前者と後者の違いは、期待値を設定して評価する処理の部分です

    .expect(await t.eval(() => document.location.href))

    .expect(t.eval(() => document.location.href))

前者はうまくテストできましたが。
後者は、ログイン後の画面に遷移する前の、ログイン画面のURLが取得されてしまいました。

なぜこうなるかは、公式ドキュメントの以下の記事が参考になります。

Smart Assertion Query Mechanism

TestCafe uses the smart assertion query mechanism if the assertion receives a Selector's DOM node state property or client function promise as an actual value
TestCafeは、アサーションがセレクターのDOMノード状態プロパティまたはクライアント関数プロミスを実際の値として受け取った場合、スマートアサーションクエリメカニズムを使用します

if an assertion did not pass, the test does not fail immediately. The assertion retries to pass multiple times, and each time it requests the actual property value. The test fails if the assertion could not complete successfully within a timeout
アサーションに合格しなかった場合、テストはすぐに失敗しません。アサーションは複数回の通過を再試行し、そのたびに実際のプロパティ値を要求します。アサーションが時間内に正常に完了できなかった場合、テストは失敗します。

expect()の引数にDOMセレクタかPromiseを渡した場合、即時に実行されず処理結果を待ってくれるようになります。
前者の記述ではexpect()の引数にawait t.eval()の返り値を渡してますが、await t.eval() はawaitによりpromiseが解決されるのでpromiseを返しません。
ログインボタンをクリック後、現在のURLを取得する処理が即時に実行されてしまい、テストに失敗しました。

timeoutというオプションは、最大で何ミリ秒待つかという値なので、指定した秒数テストが止まるわけではありません。

以上、参考になりましたら幸いです。