جافا سكريبت - غير قادر على الوصول إلى الحوار المنبثق في سايبريس

أحاول الوصول إلى الحوار المنبثق باستخدام 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.

هل يمكن لشخص ما مساعدتي من فضلك؟!

الإجابة رقم 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 })

رابط صفحة نموذج تسجيل الدخول هو (الجزء الابتدائي)

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

الإجابة رقم 2

اذهب إلى ملف cypress.json الخاص بك واكتب:

{
  chromeWebSecurity: false
}

سيؤدي هذا إلى تعطيل أخطاء المصادر المتقاطعة.