ヒノキのモーダルダイアログにアクセスできません

Taimoor Pasha

サイプレスを使用してモーダルダイアログにアクセスしようとしています。通常は、ベースURLにアクセスすると、5〜6秒後に、ユーザーが自分でログインする必要があるモーダルダイアログに移動します。

ダイアログのクラス名は次のとおりです。

<div class = "modal-dialog">

そして私はメールアドレスフィールドにアクセスしようとしています：

ページのスクリーンショットを確認してください

認証ダイアログとdevtools出力のスクリーンショット

次のコードを使用している間：

describe('Login', function(){
    it('Login Successfully', function(){
        const urlRedirects = [];
        cy.visit('https://app.staging.showcare.io/product-showcase')
        cy.get('.modal-dialog').should('be.visible').then(($dialog)=>{
      cy.wrap($dialog).find('#signInFormUsername').click()
      });
        })
        
    })

次のエラーが発生します：

Cypress detected a cross origin error happened on page load:

  > Blocked a frame with origin "https://app.staging.showcare.io" from accessing a cross-origin frame.

Before the page load, you were bound to the origin policy:

> https://showcare.io

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

A new URL does not match the origin policy if the 'protocol', 'port' (if specified), and/or 'host' (unless of the same superdomain) are different.

Cypress does not allow you to navigate to a different origin URL 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 in Chromium-based browsers which will turn off this restriction by setting { chromeWebSecurity: false } in cypress.json.

誰か助けてくれませんか？

活気ある

このテストは機能します

cy.visit('https://app.staging.showcare.io/product-showcase/login')
cy.get('.modal-dialog').should('be.visible')
cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .click({ force: true })

2つあるという警告がある#signInFormUsernameので.eq(0)、正しいものをクリックするように追加します。

また、コントロールにはCSSを持つ親があるdisplay: noneため、{ force: true }で必要になり.click()ます。

設定後、サイプレステストランナーを再起動する必要がありますのでご注意ください"chromeWebSecurity": false。

完全なログインシーケンス

cy.visit('https://app.staging.showcare.io/product-showcase/login')

cy.get('.modal-dialog').should('be.visible')

cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .type('userName', { force: true })

cy.get('#signInFormPassword').eq(0)
  .type('password', { force: true })

cy.get('[name="signInSubmitButton"]').eq(0)
  .click({ force: true })

ログインフォームのページURLは（冒頭部分）

https://vep-staging.auth...amazoncognito.com/login?...&redirect_uri=https%3A%2F%2Fapp.staging.showcare.io%2Fproduct-showcase&...

そして、そのredirect_uriパラメータは、https://app.staging.showcare.io/product-showcaseログインが成功した後にあなたをに送り返すはずです。

そうでない場合は、でログイン部分を実行してbeforeEach()から、テストのメインページにアクセスできます。ログイントークンは、ログイン手順で保存する必要があります。

また、コードをaでラップcy.session()して、ログインを1回だけ実行し、すべてのテストのトークンを保持します（ユーザーがログインしてセッションでさまざまなことを行う場合と同じです。

完全なテスト、

Cypress.config('experimentalSessionSupport', true)  // set this flag

beforeEach(() => {
  cy.session('mySession', () => {

    // preserve the login across all tests

    cy.visit('https://app.staging.showcare.io/product-showcase/login')
    cy.get('.modal-dialog').should('be.visible')
    cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .    type('userName', { force: true })
    cy.get('#signInFormPassword').eq(0)
      .type('password', { force: true })
    cy.get('[name="signInSubmitButton"]').eq(0)
      .click({ force: true })
  })
})

it('tests the app main page after login', () => {

  // should be logged in here, so visit main page
  cy.visit('https://app.staging.showcare.io/product-showcase') 

  // test the main page, e.g 
  cy.get('nav').contains('Homepage')
})

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]