无法访问柏树中的模式对话框

我正在尝试使用cypress访问模态对话，通常情况是，当您访问基本URL时，5-6秒后，它会将用户导航到模态对话，用户必须自己登录。

对话框的类名如下：

<div class = "modal-dialog">

我正在尝试访问电子邮件地址字段：

检查页面截图

使用以下代码时：

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 })

有两个#signInFormUsername的警告，因此添加.eq(0)以确保您单击了正确的一个。

此外，该控件具有CSSdisplay: none的父级，因此.click()上需要{ force: true }。

请注意，设置"chromeWebSecurity": false后，您必须重新启动Cypress测试运行程序。

---

完整登录序列

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()中进行登录部分，然后访问测试中的主页。登录步骤应为您存储登录令牌。

另外，请将代码包装在cy.session()中，以便只登录一次，并为所有测试保留令牌(与用户登录并在会话中执行各种操作相同。

完整测试，

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')
})