web-dev-qa-db-ja.com

Cypress.io非同期コードの処理方法

アプリケーションがSPAに移行するため、古いカピバラテストをcypress.ioに移動するプロセスの途中です。

私たちの場合、多くの機能をカバーする2000以上のテストがあります。そのため、機能をテストするための一般的なパターンは、オファーを作成して公開するユーザーを持つことです。

初めに、サイプレスがトラフページに行き、すべてをクリックするケースを書きました。機能しましたが、オファーの作成と公開が完了するまでに約1.5分かかりました。また、複数のオファーが必要になる場合もあります。したがって、5分かかるテストがあり、1999年に書き直す必要があります。

REST APIを提供してオファーとユーザーを作成しました。基本的にはテスト環境の準備のためのショートカットです。

async/awaitを使用してすべてが機能するようになりました。だからここにあるものです。サイプレスで通常の非同期JSコードを使用したい場合、Error: Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.を取得します

これは次のようになります。

    const faker = require('faker')
    import User from '../../support/User';

    describe('Toggle button for description offer', () => {
      const user = new User({
        first_name: faker.name.firstName(),
        last_name: faker.name.firstName(),
        email: `QA_${faker.internet.email()}`,
        password: 'xxx'
      })
      let offer = null

      before(async () => {
        await user.createOnServer()
        offer = await user.createOffer()
        await offer.publish()
      })

      beforeEach(() => {
        user.login()
        cy.visit(`/offers/${offer.details.id}`)
        cy.get('.offer-description__content button').as('showMoreButton')
      })

      it('XXX', function () {
        ...some test
      })
    })

このスニペットは期待どおりに機能します。最初にbeforeを起動してenv全体を作成し、完了したらbeforeEachにさらに進んでテストを開始します。

今、私は前と前にマージしたいと思います

  before(async () => {
    await user.createOnServer()
    offer = await user.createOffer()
    await offer.publish()
    user.login()
    cy.visit(`/offers/${offer.details.id}`)
    cy.get('.offer-description__content button').as('showMoreButton')
  })

Asyncキーワードが原因で失敗します。今問題は、非同期/待機コマンドとサイプレスコマンドを一緒に使用するように書き換える方法ですか？通常のPromiseで書き換えてみましたが、うまくいきません...

助けてくれてありがとう。

javascripttestingasync-awaitcypress
7
Daniel Słaby

問題は cypressコマンドは約束ではない ですが、約束のように振る舞います。

2つのオプションを考えることができます。

  • Async/awaitを使用しないようにテストコードをリファクタリングしてください。これらのコマンドは、サイプレスでコードを実行するときに期待どおりに動作しないためです（これをチェックしてください バグ ）。サイプレスは非同期コードを処理するための完全な方法をすでに備えており、常に期待どおりの順序で連続して実行されるコマンドキューを作成します。つまり、テストを進める前に、非同期コードの影響を観察して、それが発生したことを検証できます。たとえば、User.createUserOnServerは、成功するAPI呼び出しを待機する必要があります。 cy.server（）、cy.route（）およびcy.wait（） を使用して、リクエストの完了を待機するコードをテストに追加します。未満：

    cy.server();
cy.route('POST', '/users/').as('createUser');
// do something to trigger your request here, like user.createOnServer()
cy.wait('@createUser', { timeout: 10000});

  • cypress-promise のように、サイプレスがasync/awaitで動作する方法を変更する別のサードパーティライブラリを使用します。このlibは、awaitコードでbeforeを実行できるという約束としてサイプレスコマンドを処理するのに役立ちます（詳細については、この article を参照してください）。

6
Guilherme Lemmi

it/testブロック内のasync/awaitに関して同様の問題があります。 async IIFEで本体を包むことで問題を解決しました：

describe('Test Case', () => {
  (async () => {
     // expressions here
  })()
})
2
isotopeee