web-dev-qa-db-ja.com

サイプレスe2eテスト-クロスオリジンエラーを回避する方法は？

Gmail、Slack、Dropboxなどを統合するウェブアプリをテストしています。認証フローが機能していることを確認するために、Cypress.ioを使用してエンドツーエンドのテストを作成しようとしています。サイプレスは、アプリのドメイン外への移動を制限し、クロスオリジンエラーを表示します。サイプレスのドキュメントによると、テストではアプリの外部をナビゲートする必要はありません。しかし、私のアプリをテストする目的は、これらの外部認証フローが機能していることを確認することです。

ドキュメントには、この制限を回避するためにcypress.jsonファイルに「chromeWebSecurity」：falseを追加できるとも記載されています。私はこれを実行しましたが、まだクロスオリジンエラーが発生しています（これが私の質問の中心です。理想的にはこの制限を回避します）。

サイプレスのシングルサインオンの例を試しました。 https://github.com/cypress-io/cypress-example-recipes#logging-in --- single-sign-on 動作させることができませんでしたが、それだけではありません。私が思うよりもコードが必要です。

Githubでこのスレッドにコメントしましたが、まだ応答がありません。

完全なエラーメッセージ：

Error:     CypressError: Cypress detected a cross Origin error happened 
on page load:

  > Blocked a frame with Origin "https://www.example.com" from 
accessing 
    a cross-Origin frame.

    Before the page load, you were bound to the Origin policy:
      > https://example.com

A cross Origin error happens when your application navigates to a new 
superdomain which does not match the Origin policy above.

This typically happens in one of three ways:

1. You clicked an <a> that routed you outside of your application
2. You submitted a form and your server redirected you outside of your 
application
3. You used a javascript redirect to a page outside of your application

Cypress does not allow you to change superdomains within a single test.

You may need to restructure some of your test code to avoid this 
problem. 

Alternatively you can also disable Chrome Web Security which will turn 
off this restriction by setting { chromeWebSecurity: false } in your 
'cypress.json' file.

https://on.cypress.io/cross-Origin-violation
e2e-testingcypress
10
Bill Mayo

Gmailへの適切なナビゲーションを主張しようとしている場合...
それを処理する関数をスタブし、リクエストに必要なキーと値のペアが含まれていることを表明する必要があります。このテストの意図に関する詳細情報がなければ、具体的なアドバイスを与えることは困難です。 「スパイ」（テストダブルのタイプ）が必要なようです。

スパイのドキュメントは次のとおりです：https://docs.cypress.io /guides/guides/stubs-spies-and-clocks.html#Stubs

メールの内容を確認しようとしている場合
Gmailの読み取りを処理するためにライブラリを使用することをお勧めします。 _cy.task_を使用して、外部ライブラリからjavascriptを呼び出すことができます。この中程度の記事には、これを行う方法についての良い記事があります。

中程度の記事： https://medium.com/@levz0r/how-to-poll-a-gmail-inbox-in-サイプレス-io-a4286cfdb888

TL;記事のDR
-gmailをチェックするカスタムタスク（メソッド）を設定および定義します（例では「gmail-tester」を使用）
-ヒノキを使用して電子メールをトリガーします（明らかに）
-データのキャプチャ/定義（電子メールの件名、動的リンク、電子メールの内容など）
-gmail-testerから返されたデータが期待どおりであることを表明します

しないでください
テストフレーク（すべてのUIテストにフレークがあります）、およびテストの更新が必要なGmailアプリへの潜在的なUI変更を回避するために、テストでGMailUIを使用します。 gmail-testerが使用するバックエンドメソッドは、UIと比較して時間の経過とともに変更される可能性が低くなります。また、CORSエラーを回避します。

必要に応じて、クロスオリジンセキュリティを無効にします...（バグを確認してください！）
必要に応じて、_chromeWebSecuirty: false_を_cypress.json_構成ファイルに追加します。必ず中括弧の中に追加してください。そのファイルには中括弧が1セットだけ存在する必要があります。

注：単純に使用することはできませんcy.visit(<diffSuperDomain>);オープンがあります 問題 。どうやらこれはサイプレスで行うのは非常に難しい変更です。

考えられる回避策の1つは、テストごとに1つのスーパードメインのみを持つことです。 _chromeWebSecurity:_をfalseに設定し、テストごとにドメインが1つしかない場合（itブロック）は機能するはずです。 1つのテストが次のテストに依存するため、カスケード障害が発生する可能性があるため、注意してください。うまくいけば、彼らはこれをすぐに修正します。

https://docs.cypress.io/guides/guides/web-security.html#Disabling-Web-Security

2
NANfan

これらの一般的な状況には、いくつかの簡単な回避策があります。アプリケーションの外部に移動するテストで_<a>_リンクをクリックしないでください。とにかく、これはテストする価値がないようです。自問してみてください。クリックして別のアプリに移動する意味は何ですか。おそらくあなたが気にするのは、href属性があなたが期待するものと一致するということだけです。だからそれについて主張する。 「タブの処理とリンク」のサンプルレシピで、アンカーリンクのテストに関するその他の戦略を確認できます。

シングルサインオン（SSO）を使用するページをテストしています。この場合、Webサーバーがスーパードメイン間でリダイレクトしている可能性が高いため、このエラーメッセージが表示されます。 cy.request()を使用してセッションを手動で処理することにより、このリダイレクトの問題を回避できる可能性があります。

行き詰まっていてこれらの問題を回避できない場合は、cypress.jsonファイルでこれを設定できます。しかし、そうする前に、ここでの理由を本当に理解して読む必要があります。

_// cypress.json

{
  "chromeWebSecurity": false
}
_
0
Kronhyx