I am currently working on a GitLab CI test environment and I have a test harness which we use to test our SDK. I have gone about setting up a custom event that is fired on the page which designates the end of the test run. In my puppeteer implementation I am wanting to listen for this custom event "TEST_COMPLETE".
I have not been successful in getting this to work so I figured I would at least make sure the custom-event.js example on the puppeteer repo worked and there too I am not seeing what I believe I should be getting. I cloned the main repo below and performed an npm install. When I execute the js test below, setting headless:false and don't close the browser, I do not see any log in console that shows any custom event being fired.
It is my understanding that I should see some console event message with 'fired' and then 'app-ready' event and info, but this is not the case. Even if I interact with the page I don't see anything outside of some 'features_loaded' and 'features_unveil' logs.
https://github.com/puppeteer/puppeteer/blob/main/examples/custom-event.js
Anyone able to get the expected behavior on this code today? Not sure if this worked previously and has broke since or I am just doing something wrong. Any info would be of great help, Thanks!
Not sure if this is what you need, but I can get the message 'TEST_COMPLETE fired.' in Node.js console with this simplified code (puppeteer 8.0.0):
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const [page] = await browser.pages();
await page.goto('https://example.org/');
await page.exposeFunction('onCustomEvent', async (type) => {
console.log(`${type} fired.`);
await browser.close();
});
await page.evaluate(() => {
document.addEventListener('TEST_COMPLETE', (e) => {
window.onCustomEvent('TEST_COMPLETE');
});
document.dispatchEvent(new Event('TEST_COMPLETE'));
});
} catch (err) { console.error(err); }
I have a script that asks for the user input to download (or not) a file. It's fairly straight forward, but I have a problem with the following piece of code. If the user chooses "NO", then the else if condition works fine and the code finishes its expected execuetion. But if the user chooses Yes, the file gets downloaded but I get the following error:
UnhandledPromiseRejectionWarning: TypeError: Promise resolver [object Array] is not a function
I problably need to learn more about Promises, but I share the section of the code that fails in case I am making an obvious mistake that I fail to see.
async function download_fallo(page) {
if (download == "Y") {
await new Promise([
page.click('div > div.col-xs-12.col-sm-11 > div.row > div.col-sm-4.col-lg-3 > a'),
//page.wait({ waitUntil: 'networkidle0' }) // does not work either
//page.wait(2000) // UnhandledPromiseRejectionWarning page.wait is not a function...
]);
return console.log("Perfect")
} else if (download == "N") {
console.log("Just the information then!") }
}
Thanks guys --- I was making obvious mistakes and you clarified them. I was not using Promise.all and made a mistake with page.await, both were pointed out. With that corrected, the code works. I post below in case someone finds it useful, it's a simple if condition tied to a readLine user input to download (or not) a PDF file from a website.
async function download_fallo(page) {
if (download == "Y") {
await Promise.all([
page.click('div > div.col-xs-12.col-sm-11 > div.row > div.col-sm-4.col-lg-3 > a'),
page.waitFor(2000)
]);
return console.log("Perfect")
} else if (download == "N") {
console.log("Just the information then!") }
}
I dont really know what you need because i need more context, but if you want to execute an array of promises you could try
Promise.all([ promise1, promise2 ])
This method takes an array of promises as an input, and returns a single Promise as an output. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
I am not a 100% sure if your script does what you expect to do, but ‘page.wait’ is a non-existent puppeteer method. You need ‘page.waitFor’ if you want to wait for / pause the script for certain ms-s.
About two months ago we started using Rollbar to notify us of various errors in our Web App. Ever since then we have been getting the occasional error:
ResizeObserver loop limit exceeded
The thing that confuses me about this is that we are not using ResizeObserver and I have investigated the only plugin which I thought could possibly be the culprit, namely:
Aurelia Resize
But it doesn't appear to be using ResizeObserver either.
What is also confusing is that these error messages have been occuring since January but ResizeObserver support has only recently been added to Chrome 65.
The browser versions that have been giving us this error are:
Chrome: 63.0.3239 (ResizeObserver loop limit exceeded)
Chrome: 64.0.3282 (ResizeObserver loop limit exceeded)
Edge: 14.14393 (SecurityError)
Edge: 15.15063 (SecurityError)
So I was wondering if this could possibly be a browser bug? Or perhaps an error that actually has nothing to do with ResizeObserver?
You can safely ignore this error.
One of the specification authors wrote in a comment to your question but it is not an answer and it is not clear in the comment that the answer is really the most important one in this thread, and the one that made me comfortable to ignore it in our Sentry logs.
This error means that ResizeObserver was not able to deliver all observations within a single animation frame. It is benign (your site will not break). – Aleksandar Totic Apr 15 at 3:14
There are also some related issues to this in the specification repository.
It's an old question but it still might be helpful to someone. You can avoid this error by wrapping the callback in requestAnimationFrame.
For example:
const resizeObserver = new ResizeObserver(entries => {
// We wrap it in requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
window.requestAnimationFrame(() => {
if (!Array.isArray(entries) || !entries.length) {
return;
}
// your code
});
});
If you're using Cypress and this issue bumps in, you can safely ignore it in Cypress with the following code in support/index.js or commands.ts
const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
Cypress.on('uncaught:exception', (err) => {
/* returning false here prevents Cypress from failing the test */
if (resizeObserverLoopErrRe.test(err.message)) {
return false
}
})
You can follow the discussion about it here.
As Cypress maintainer themselves proposed this solution, so I believe it'd be safe to do so.
We had this same issue. We found that a chrome extension was the culprit. Specifically, the loom chrome extension was causing the error (or some interaction of our code with loom extension). When we disabled the extension, our app worked.
I would recommend disabling certain extensions/addons to see if one of them might be contributing to the error.
For Mocha users:
The snippet below overrides the window.onerror hook mocha installs and turns the errors into a warning.
https://github.com/mochajs/mocha/blob/667e9a21c10649185e92b319006cea5eb8d61f31/browser-entry.js#L74
// ignore ResizeObserver loop limit exceeded
// this is ok in several scenarios according to
// https://github.com/WICG/resize-observer/issues/38
before(() => {
// called before any tests are run
const e = window.onerror;
window.onerror = function(err) {
if(err === 'ResizeObserver loop limit exceeded') {
console.warn('Ignored: ResizeObserver loop limit exceeded');
return false;
} else {
return e(...arguments);
}
}
});
not sure there is a better way..
add debounce like
new ResizeObserver(_.debounce(entries => {}, 200);
fixed this error for me
The error might be worth investigating. It can indicate a problem in your code that can be fixed.
In our case an observed resize of an element triggered a change on the page, which caused a resize of the first element again, which again triggered a change on the page, which again caused a resize of the first element, … You know how this ends.
Essentially we created an infinite loop that could not be fitted into a single animation frame, obviously. We broke it by holding up the change on the page using setTimeout() (although this is not perfect since it may cause some flickering to the users).
So every time ResizeObserver loop limit exceeded emerges in our Sentry now, we look at it as a useful hint and try to find the cause of the problem.
In my case, the issue "ResizeObserver - loop limit exceeded" was triggered because of window.addEventListener("resize" and React's React.useState.
In details, I was working on the hook called useWindowResize where the use case was like this const [windowWidth, windowHeight] = useWindowResize();.
The code reacts on the windowWidth/windowHeight change via the useEffect.
React.useEffect(() => {
ViewportService.dynamicDimensionControlledBy(
"height",
{ windowWidth, windowHeight },
widgetModalRef.current,
{ bottom: chartTitleHeight },
false,
({ h }) => setWidgetHeight(h),
);
}, [windowWidth, windowHeight, widgetModalRef, chartTitleHeight]);
So any browser window resize caused that issue.
I've found that many similar issues caused because of the connection old-javascript-world (DOM manipulation, browser's events) and the new-javascript-world (React) may be solved by the setTimeout, but I would to avoid it and call it anti-pattern when possible.
So my fix is to wrap the setter method into the setTimeout function.
React.useEffect(() => {
ViewportService.dynamicDimensionControlledBy(
"height",
{ windowWidth, windowHeight },
widgetModalRef.current,
{ bottom: chartTitleHeight },
false,
({ h }) => setTimeout(() => setWidgetHeight(h), 0),
);
}, [windowWidth, windowHeight, widgetModalRef, chartTitleHeight]);
One line solution for Cypress. Edit the file support/commands.js with:
Cypress.on(
'uncaught:exception',
(err) => !err.message.includes('ResizeObserver loop limit exceeded')
);
https://github1s.com/chromium/chromium/blob/master/third_party/blink/renderer/core/resize_observer/resize_observer_controller.cc#L44-L45
https://github1s.com/chromium/chromium/blob/master/third_party/blink/renderer/core/frame/local_frame_view.cc#L2211-L2212
After looking at the source code, it seems in my case the issue surfaced when the NotifyResizeObservers function was called, and there were no registered observers.
The GatherObservations function will return a min_depth of 4096, in case there are no observers, and in that case, we will get the "ResizeObserver loop limit exceeded" error.
The way I resolved it is to have an observer living throughout the lifecycle of the page.
Managed to solve this in React for our error logger setup.
The Observer error propagates to the window.onerror error handler, so by storing the original window.onerror in a ref, you can then replace it with a custom method that doesn't throw for this particular error. Other errors are allowed to propagate as normal.
Make sure you reconnect the original onerror in the useEffect cleanup.
const defaultOnErrorFn = useRef(window.onerror);
useEffect(() => {
window.onerror = (...args) => {
if (args[0] === 'ResizeObserver loop limit exceeded') {
return true;
} else {
defaultOnErrorFn.current && defaultOnErrorFn.current(...args);
}
};
return () => {
window.onerror = defaultOnErrorFn.current;
};
}, []);
I had this issue with cypress tests not being able to run.
I found that instead of handling the exception the proper way was to edit the tsconfig.json in a way to target the new es6 version like so:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"baseUrl": "../node_modules",
"target": "es5", --> old
"target": "es6", --> new
"types": ["cypress", "#testing-library/cypress"],
"sourceMap": true
},
"include": [
"**/*.ts"
]
}
My protractor tests were working perfectly fine yesterday on Chrome Browser.
Today, it started failing consistently at a point where in I resolve a Promise. On debugging further, I found that if I commented this promise statement then it would hang at the next promise resolution statement.
There has been no change in the protractor scripts between yesterday and today. There has been some changes made by the developers in the Angular app under test but not major ones.
Can anyone help me point out what might be going wrong here?
Following is the code snippet. Its hanging at the promise resolution statement template.getTemplatesCount().then :-
mainMenu.clickTemplatesMenuOption();
templatePage.getTemplatesCount().then(count => {
console.log("Count of template card is:-"+count.toString());
templateCountBeforeInsert = count;
});
templatePage.openCreateTemplatePanel();
createTemplatePage.createTemplateWithoutDocument(templateName);
My protractor conf.json looks like this:-
exports.config = {
allScriptsTimeout: 30000000,
specs: [
'./e2e/TestPlan/*.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://10.37.1.86:81/',
getPageTimeout: 120000,
framework: 'jasmine2',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 120000,
print: function () { }
}
Following are the versions of Tools I am using:-
Protractor:- 5.1.2
ChromeDriver:- `2.32
Chrome Browser :- 61.x
You should be passing a function to your .then() block, it should be this:
templatePage.getTemplatesCount().then((count) => {
console.log("Count of template card is:-"+count.toString());
templateCountBeforeInsert = count;
});
A simple way is add catch() as below:
templatePage.getTemplatesCount().then(count => {
console.log("Count of template card is:-"+count.toString());
templateCountBeforeInsert = count;
})
.catch(function(err){
console.log('getTemplatesCount error: ' + err);
});
If you get the error log, please check getTemplatesCount() inside.
I've got this code:
let p1 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve({dogs: ['Fido', 'Spot']});
}, 2000);
});
p1.then(function (val) {
console.log('first then');
console.dir(val);
return _.extend(val, {cats: ['Fluffy', 'Whiskers']});
}).then(function (val) {
console.log('second then');
console.dir(val);
});
The unexpected console output shows:
I don't understand how cats could possibly be part of the value before it's actually appended into the object. The results printed in the second then make sense to me though. Am I missing something?
You're adding the cats property to the same object you already logged.
As the i icon tells you, the console only reads the properties of the object when you actually expand it.
As far as I know there is a bug in console.log by ES6 Promises. It waits for a few seconds before it logs the value of your object, that's why it contains the cats. If I remember well, this bug happens in firefox. I don't know how it behaves by the other browsers.