Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

5.5 KiB

Raw Permalink Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d8250367417b2b2512c5d	ヘッドレスブラウザーを使用して機能テストを実行する	2	301595	run-functional-tests-using-a-headless-browser

--description--

注意点として、このプロジェクトは Replit の始動プロジェクト、または GitHub からクローンされたプロジェクトに基づいて構築されています。

ページに入力フォームがあります。 AJAX リクエストとして、PUT /travellers エンドポイントへデータを送信します。

リクエストが正常に完了すると、クライアントコードは、情報を含む <div> を、DOM へのレスポンスに追加します。

以下は、Zombie.js を使用してフォームとやり取りする方法の例です。

test('Submit the surname "Polo" in the HTML form', function (done) {
  browser.fill('surname', 'Polo').then(() => {
    browser.pressButton('submit', () => {
      browser.assert.success();
      browser.assert.text('span#name', 'Marco');
      browser.assert.text('span#surname', 'Polo');
      browser.assert.elements('span#dates', 1);
      done();
    });
  });
});

まず、browser オブジェクトの fill メソッドにより、フォームの surname フィールドに値 'Polo' を入力します。 fill は promise を返すので、そこから then でつなぎます。

then コールバック内で、browser オブジェクトの pressButton メソッドを使用して、フォームの submit イベントリスナーを呼び出します。 pressButton メソッドは非同期です。

その後、AJAX リクエストからレスポンスを受信すると、いくつかのアサーションが実行され、以下が確定します。

レスポンスのステータスは、200 です。
 要素内のテキストは、'Marco' と一致します。
 要素内のテキストは、'Polo' と一致します。
1 という内容の  要素があります。

最後に、done コールバックを呼び出します。これは非同期テストのために必要です。

--instructions--

tests/2_functional-tests.js 内の 'Submit the surname "Colombo" in the HTML form' テスト (// #5) で、以下を自動化してください。

フォームに姓 Colombo を入力します。
送信ボタンを押します。

pressButton コールバック内で以下を実行してください。

ステータスが OK 200 であることをアサートします。
要素 span#name 内のテキストが 'Cristoforo' であることをアサートします。
要素 span#surname 内のテキストが 'Colombo' であることをアサートします。
要素 span#dates が存在し、そのカウントが 1 であることをアサートします。

assert.fail() 呼び出しを削除することを忘れないでください。

--hints--

すべてのテストに合格する必要があります。

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
    (data) => {
      assert.equal(data.state, 'passed');
    },
    (xhr) => {
      throw new Error(xhr.responseText);
    }
  );

ヘッドレスブラウザーのリクエストが成功したことをアサートする必要があります。

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
    (data) => {
      assert.equal(data.assertions[0].method, 'browser.success');
    },
    (xhr) => {
      throw new Error(xhr.responseText);
    }
  );

要素 span#name 内のテキストが 'Cristoforo' であることをアサートする必要があります。

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
    (data) => {
      assert.equal(data.assertions[1].method, 'browser.text');
      assert.match(data.assertions[1].args[0], /('|")span#name\1/);
      assert.match(data.assertions[1].args[1], /('|")Cristoforo\1/);
    },
    (xhr) => {
      throw new Error(xhr.responseText);
    }
  );

要素 span#surname 内のテキストが 'Colombo' であることをアサートする必要があります。

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
    (data) => {
      assert.equal(data.assertions[2].method, 'browser.text');
      assert.match(data.assertions[2].args[0], /('|")span#surname\1/);
      assert.match(data.assertions[2].args[1], /('|")Colombo\1/);
    },
    (xhr) => {
      throw new Error(xhr.responseText);
    }
  );

要素 span#dates が存在し、カウントが 1 であることをアサートする必要があります。

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
    (data) => {
      assert.equal(data.assertions[3].method, 'browser.elements');
      assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
      assert.equal(data.assertions[3].args[1], 1);
    },
    (xhr) => {
      throw new Error(xhr.responseText);
    }
  );

--solutions--

/**
  Backend challenges don't need solutions, 
  because they would need to be tested against a full working project. 
  Please check our contributing guidelines to learn more.
*/

5.5 KiB Raw Permalink Blame History

--description--

--instructions--

--hints--

--solutions--

5.5 KiB

Raw Permalink Blame History