Тестирование Stripe Checkout с Cypress

Question

Я должен позвонить stripe.redirectToCheckout( https://stripe.com/docs/js/checkout/redirect_to_checkout) в js, чтобы перенаправить клиента на страницу оформления заказа.

Я хочу использовать кипарисовик для проверки процесса оформления заказа, но он не может обрабатывать перенаправление полосы, поскольку кадр кипариса теряется, когда stripe.redirectToCheckout переходит на страницу домена Stripe.

Я также хочу проверить, что Stripe перенаправляет нас обратно на URL-адрес успеха или ошибки.

1. Есть ли способ заставить Cypress "повторно прикрепиться" к странице после перехода к кассе Stripe -или-
2. Есть ли способ получить URL-адрес страницы оформления заказа Stripe, чтобы мы могли перенаправить вручную или просто знать, что он был хотя бы вызван с правильными параметрами.

Я знаю, что тестирование внешних сайтов считается "антипаттерном" людьми в cypress (https://github.com/cypress-io/cypress/issues/1496). Но как в этом случае можно протестировать очень стандартный веб-процесс, кассу (с помощью очень популярной и стандартной платежной службы, я добавлю)? Я не верю, что это "антипаттерн". Это важный этап сквозного тестирования, и Stripe специально предоставляет нам тестовую песочницу для такого рода вещей.

Answer 1

Один из распространенных способов тестирования приложения e2e с внешними зависимостями, такими как stripe, - это создание его простой макетной версии, которая затем применяется в тестировании e2e. Мок также можно применять во время разработки, чтобы ускорить процесс.

Answer 2

Я пытаюсь использовать вместо этого элементы полосы, поскольку он не перенаправляет и дает мне гораздо больше контроля над ним.

Answer 3

Помогло бы это?

      it(`check stripe redirection`, () => {
  cy.get('#payButton').click();
  
  cy.location('host', { timeout: 20 * 1000 }).should('eq', STRIPE_REDIRECT_URL);    

  // do some payment stuff here
  // ...
  // after paying return back to local
 

  cy.location({ timeout: 20 * 1000 }).should((location) => {
    expect(location.host).to.eq('localhost:8080')
    expect(location.pathname).to.eq('/')
  })

})

Я использовал этот метод для проверки входа в систему с помощью keyCloak. Это реальный код, который сработал.

      describe('authentication', () => {
  
  beforeEach(() => cy.kcLogout());

  it('should login with correct credentials', () => {
    cy.visit('/');

    cy.location('host', { timeout: 20 * 1000 }).should('eq', 'keycloak.dev.mysite.com:8443');

    // This happens on https://keycloak.dev.mysite.com:8443/auth/dealm/...
    cy.fixture('userCredentials').then((user) => {
      cy.get('#username').type(user.email);
      cy.get('#password').type(user.password);

      cy.get('#kc-login').click();

      cy.location({ timeout: 20 * 1000 }).should((location) => {
        expect(location.host).to.eq('localhost:8080')
        expect(location.pathname).to.eq('/')
      })
    })
  });