Logging in to Gmail results in a JS error, halts rest of the test

[di5ko]

As part of a 'forgot password functionality' test, I want to login go Gmail and fetch the latest e-mail. The Google/Gmail login interface renders a JS error with Testcafe.

What is your Test Scenario?

1. Navigate to mail.google.com
2. Fill in email field
3. Click next button
4. Attempt to fill in password field (and login)

What is the Current behavior?

Step 3 renders a JS error, and step 4 will not work (the .typeText function will not do anything to insert text in the password field).

$ npx testcafe firefox gmail.test.js 
 Running tests in:
 - Firefox 73.0 / Linux 0.0

 Gmail login test
 ✖ Trigger JS error when logging in to Gmail

   1) A JavaScript error occurred on

   "https://accounts.google.com/signin/v2/sl/pwd?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ss=1&scc=1<mpl=default<mplcache=2&emr=1&osid=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin&cid=1&navigationDirection=forward".
      Repeat test actions in the browser and check the console for errors.
      If you see this error, it means that the tested website caused it. You can fix it or disable tracking JavaScript errors in TestCafe. To do the latter, enable the "--skip-js-errors" option.
      If this error does not occur, please write a new issue at:
      "https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md".
      
      JavaScript error details:
      ResizeObserver loop completed with undelivered notifications.:
          No stack trace available

What is the Expected behavior?

Being able to continue to populate the password field with .typeText.

How would you reproduce the current behavior?

Test code:

import { Selector } from "testcafe";

// Constants
const gmailEmailInput       = Selector("#identifierId");
const gmailNextButton       = Selector(".CwaK9");
const gmailPasswordInput    = Selector("input[type='password']");

fixture("Gmail login test");

test("Trigger JS error when logging in to Gmail", async testController => {

    await testController
        .navigateTo("https://mail.google.com")
        .typeText(gmailEmailInput, "someuser@gmail.com")
        .click(gmailNextButton) // triggers JS error
        .typeText(gmailPasswordInput, "password") // does not work

});

Environment details

• testcafe version: 1.8.2
• node.js version: v12.16.1
• command-line arguments: testcafe firefox gmail.test.js
• browser name and version: Firefox 73.0
• platform and version: Linux Ubuntu 18.04.4 LTS

[miherlosev]

Hi @di5ko

At present, the 'login via Google' functionality is not supported. It will be available after the Add the capability to perform testing in multiple browser windows feature is implemented. Track the #912 issue to be notified about our progress.

[miherlosev]

I re-test the scenario and confirm that the problem with 'ResizeObserver' is reproduced with Firefox 73.0.1.

[AndreyBelym]

Can be reproduced with https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html

[wentwrong]

UPDATE
Starting with TestCafe 2.0, you can get rid of the clientScripts and custom error handlers and use the skip JS error options to specify the way in which different errors should be processed.
In this case, you can use the following approach with a callback function:

fixture("Gmail login test")
    .skipJsErrors(
        ({ message }) => {
            return message === 'ResizeObserver loop completed with undelivered notifications.' ||
                   message === 'ResizeObserver loop limit exceeded';
        }
    );

test(...)

Or even use a RegExp:

fixture("Gmail login test")
    .skipJsErrors({message: /ResizeObserver loop/ig});

test(...)

Read more about the skip JS error adjustment ways in the Docs.

---

As far as I understand, this error occurs when ResizeObserver cannot deliver all observations within a single animation frame. A person who is the author of the ResizeObserver specification assures that it can be safely ignored: ResizeObserver loop limit exceeded

Chrome and Firefox don't display it by default. You can only catch it when you set an explicit onerror handler:

window.onerror = e => console.log(e);

You can see that this error is reproduced on the Google Sign In page without TestCafe. I added an onerror handler to the page and got ResizeObserver loop completed with undelivered notifications. in Firefox and ResizeObserver loop limit exceeded in Chrome.

As a workaround, you can specify the --skip-js-errors flag when starting TestCafe. I admit that it's not the best approach since you will suppress all Javascript errors on a tested page.

A more reliable way is to add a global window error handler explicitly in your tests via client scripts:

import { Selector, t } from 'testcafe';

// Constants
const gmailEmailInput       = Selector("#identifierId");
const gmailNextButton       = Selector(".CwaK9");
const gmailPasswordInput    = Selector("input[type='password']");

const explicitErrorHandler = () => {
    window.addEventListener('error', e => {
        if(e.message === 'ResizeObserver loop completed with undelivered notifications.' || 
            e.message === 'ResizeObserver loop limit exceeded') {
            e.stopImmediatePropagation();
        }
    })
}

fixture("Gmail login test")
    .clientScripts({ content: `(${explicitErrorHandler.toString()})()` });

test("Not trigger JS error when logging in to Gmail", async testController => {
    await testController
        .navigateTo("https://mail.google.com")
        .typeText(gmailEmailInput, "someuser@gmail.com")
        .click(gmailNextButton)
        .typeText(gmailPasswordInput, "password")
});