无法访问 cypress 中的模式对话

Question

我正在尝试使用 cypress 访问 modal-dialogue ，通常发生的情况是，当您访问基本 Url 时，5-6 秒后，它将导航用户到 modal-dialogue ，用户必须自己登录。

以下是对话框的类名：

<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.

有人可以帮我吗？

Answer 1

这个测试有效

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)以确保单击正确的一个。

此外，该控件有一个带有 CSS 的父级display: none，{ force: true }因此.click().

请注意，设置后您必须重新启动 Cypress 测试运行程序"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

如果没有，你可以在a中完成登录部分beforeEach()，然后在测试中访问主页面。登录步骤应为您存储登录令牌。

另外，将代码包装在 a 中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')
})