Testcafe throws 'Cannot read properties of null' error and hangs for all PayPal Scenarios on latest 1.18 Version

What is your Scenario?

The use-case is to navigate to promotional petition and contribute the amount using paypal. Once the payment is confirmed. site redirects to the thankyou page.

What is the Current behavior?

Once the payment has been made through paypal, it hangs and unable to validate the thankyou page.

What is the Expected behavior?

Expected behaviour would be TestCafe to run without interruption and validate the thankyou page.

What is your public website URL? (or attach your complete example)

Change Staging: https://www.staging-change.org/

What is your TestCafe test code?

Note: Please feel free to remove wait statements if test passes.

/* global window */
/* eslint-disable no-await-in-loop, no-param-reassign */
import { Chance } from 'chance';
import { ClientFunction, RequestLogger, Selector, t } from 'testcafe';
import logToConsole from '../support/custom_commands/logToConsole';
import { httpAuthCredentials } from '../support/helpers';

const chance = new Chance();
const emailAddress = chance.email();
const paypalIframe = Selector('[data-testid="paypal-button"] iframe').withAttribute('src');
const ppmuPaypalIframe = Selector('#modal-paypal-button iframe').withAttribute('src');
const payWithPaypalButton = Selector('[data-funding-source="paypal"]').filterVisible();

// PayPal Window
const emailInput = Selector('#email');
const passwordInput = Selector('#password');
const nextButton = Selector('#btnNext');
const loginButton = Selector('#btnLogin');
const consentButton = Selector('#consentButton, [data-test-id="continueButton"]').filterVisible();
const submitButtonInitial = Selector('[data-testid="submit-button-initial"]');

const chargeLogger = RequestLogger(
  { url: 'https://www.staging-change.org/api-proxy/-/payments/charges', method: 'post' },
  {
    logRequestHeaders: false,
    logRequestBody: true,
    stringifyRequestBody: true,
  }
);

const submitWithPaypalButton = async (ppmu = false) => {
  const paypalIframeSelector = ppmu ? ppmuPaypalIframe : paypalIframe;
  await t
    .switchToIframe(paypalIframeSelector)
    .hover(payWithPaypalButton)
    .click(payWithPaypalButton)
    .wait(500);
};

const paypalLogin = async () => {
  await t
    .typeText(emailInput, '', { timeout: 30000 })
    .click(nextButton)
    .typeText(passwordInput, '')
    .click(loginButton);
};

const completePaypalMiniWindow = async ({ shouldLogin = true, oneTimePayment = false } = {}) => {
  if (shouldLogin) {
    await paypalLogin();
  }

  const continueButton = oneTimePayment ? submitButtonInitial : consentButton;
  // const paymentOptions = Selector('#paymentMethod, [data-testid="stacked-payment-options"]').filterVisible();

  await t.hover(continueButton).click(continueButton);
};

const checkResponseExists = async (logger, maxRetry = 10) => {
  logToConsole('Check Response');
  while (logger.requests.find(r => !r.response) && maxRetry > 0) {
    maxRetry -= 1;
    await t.wait(500);
  }
  return logger.requests.find(r => r.response);
};

fixture('Verify PayPal Payments')
  .page('https://www.staging-change.org/')
  .requestHooks(chargeLogger)
  .httpAuth(httpAuthCredentials);

test.skip('Create Membership with Paypal', async () => {
  // Navigate to the Membership page, select contribution amount and pay with PayPal
  await t
    .navigateTo('/s/member')
    .click(Selector('[data-testid="member_landing_inline_plan_button_wrapper"]').nth(0))
    .expect(Selector('[data-testid="member_payment_form"]').visible)
    .ok()
    .click(Selector('[data-testid="payment-option-button-paypal"]'));

  await t
    .expect(Selector('[data-testid="input_email"]').visible)
    .ok()
    .typeText(Selector('[data-testid="input_email"]').filterVisible(), emailAddress)
    .typeText(Selector('[data-testid="input_confirmation_email"]').filterVisible(), emailAddress)
    .typeText(Selector('[data-testid="input_first_name"]'), 'first')
    .typeText(Selector('[data-testid="input_last_name"]'), 'last');

  await t
    .wait(500)
    .switchToIframe(paypalIframe)
    .hover(payWithPaypalButton)
    .click(payWithPaypalButton)
    .wait(500);

  // PayPal Window
  await t
    .typeText(emailInput, '')
    .click(nextButton)
    .typeText(passwordInput, '')
    .click(loginButton);

  await t
    .expect(Selector('#paymentMethod, [data-testid="stacked-payment-options"]').filterVisible().visible)
    .ok()
    .hover(consentButton)
    .click(consentButton);

  // Main page
  await t.expect(Selector('[data-view="subscription_plans/thank_you"]').visible).ok();

  const getCurrentUrl = ClientFunction(() => window.location.href);
  await t.expect(await getCurrentUrl()).contains('/s/member/thank_you');
});

test('Promote with PayPal', async () => {
  await t
    .navigateTo('/p/asdf-stgaqaoppscore8/sponsors/new')
    .expect(Selector('.js-payment-form').visible)
    .ok()
    .typeText(Selector('[data-testid="payment-form-amount-input"]'), '30', { replace: true })
    .click(Selector('[data-testid="payment-option-button-paypal"]'));

  await t
    .expect(Selector('[data-testid="input_email"]').visible)
    .ok()
    .typeText(Selector('[data-testid="input_email"]').filterVisible(), emailAddress)
    .typeText(Selector('[data-testid="input_confirmation_email"]').filterVisible(), emailAddress)
    .typeText(Selector('[data-testid="input_first_name"]'), 'first')
    .typeText(Selector('[data-testid="input_last_name"]'), 'last');
  await submitWithPaypalButton();

  // PayPal Window
  await completePaypalMiniWindow();

  // XHR Request
  await t
    .expect(chargeLogger.count(() => true))
    .gt(0, { timeout: 30000 })
    .expect(await checkResponseExists(chargeLogger))
    .ok({ timeout: 30000 });

  logToConsole('Return to main page');
  // Main page
  await t
    .expect(Selector('[data-testid="ppmu-modal"]').exists)
    .ok()
    .click(Selector('[data-testid="ppmu-no"]'));
    logToConsole('Decline PPMU');
  await t.expect(Selector('[data-testid=promote-thank-you-views-text]').visible).ok();
});

Your complete configuration file

No response

Your complete test report

1. TypeError: Cannot read properties of null (reading ‘0’) Browser: Chrome 99.0.4844.51 / macOS 10.15.7

    270 |        this._handlePlainObject(val);
    271 |};
    272 |
    273 |DecodingTransformer.prototype.transform = function () {
    274 |    this.visitedRefs[0] = true;
    275 |  >  this._handleValue(this.references[0], this.references, 0);
    276 |
    277 |    return this.references[0];
    278 |};
    279 |
    280 |
   
    at DecodingTransformer.transform (/Users/kshah/work/kanai/Testcafe18/regressionqaa/node_modules/replicator/index.js:275:38)
    at module.exports.Replicator.decode (/Users/kshah/work/kanai/Testcafe18/regressionqaa/node_modules/replicator/index.js:577:24)
   

No response

Screenshots

No response

Steps to Reproduce

1. Take the sample TestCafe code attached that has all steps to reproduce
2. Run the test against a latest TestCafe version
3. Observe the behaviour

TestCafe version

1.18.5-alpha.1

Node.js version

No response

Command-line arguments

testcafe chrome paypal-demo.js

Browser name(s) and version(s)

Chrome 99.0.4844.51

Platform(s) and version(s)

macOS 10.15.7

Other

No response

[rob4629]

I’ve created 6927. I copied the code from the test steps in this issue. Please use the same httpAuth credentials from this ticket

[AlexKamaev]

@rob4629 Yes, please create a separate ticket. I think we need to fix the The iframe in which the test is currently operating is not visible anymore error first and only after that, we can research the issue further. Thank you for your help and cooperation.