Puppeteer wait for specific console event - puppeteer

I am trying to implement a function that waits until a certain console event is sent.
E.g. there are several console.endTime calls being done (for performance debugging) and I want to wait until the last one (identified by a specific message text ) is done.
My code kind of works but the problem is that page.on adds new event listeners each time I call my waitForEvent function. I understand why that happens, but haven't found a solution that avoids this.
Code looks like this :
function waitForEndEvent() {
return new Promise((res, rej) => {
registerConsoleEvent(page, res, rej);
});
}
function filterMessage() {
return (msg) => {
try {
if (msg.type() == 'timeEnd') {
if (msg.text().includes("final time")) {
console.log('timeEnd:', msg.text());
res();
}
}
} catch (e) {
rej(e);
}
};
}
function registerConsoleEvent(page, res, rej) {
page.on('console', filterMessage(res,rej));
}
Any hint how I could solve this issue?

You can just remove the event listener after receiving the message. You can use the page.removeListener(...) method to remove the event listener. So the code would be like this
function waitForEndEvent() {
return new Promise((res, rej) => {
registerConsoleEvent(page, res, rej);
});
}
function registerConsoleEvent(page, res, rej) {
page.on('console', function consoleListener(msg) {
try {
if (msg.type() == 'timeEnd') {
if (msg.text().includes('final time')) {
console.log('timeEnd:', msg.text());
page.removeListener('console', consoleListener);
res();
}
}
} catch (e) {
rej(e);
}
});
}

Related

Should I set lastError to null manually?

I have this helper method on Angular6 class:
saveToLocalStorage(key: string, val: any): Promise<void | LastErrorType> {
return new Promise(function(resolve, reject) {
chrome.storage.local.set({ [key]: val }, function() {
if (chrome.runtime.lastError) {
reject(chrome.runtime.lastError);
} else {
resolve();
}
});
});
}
Looking at this code again after a few months it has me wondering, should I manually set the error to null here:
chrome.storage.local.set({ [key]: val }, function() {
if (chrome.runtime.lastError) {
reject(chrome.runtime.lastError);
chrome.runtime.lastError = null; // <<< necessary?
} else {
resolve();
}
});
Or does chrome.runtime handle this somehow? Obvious, later in the program if chrome.runtime.lastError is still defined, I would be seeing an error that may no longer be relevant? Anyone know what I am talking about?
No, you don't have to do it.
According to the docs, chrome.runtime.lastError will only be set for the callback chain of the specific event that raised the error.
Once you're handling another event, it will be reset.

How to Debounce with Observer Polymer

I am trying to run getResponse once when a web components finishes loading. However, when I try to run this, the debounce function just acts as an async delay and runs 4 times after 5000 ms.
static get properties() {
return {
procedure: {
type: String,
observer: 'debounce'
}
}
}
debounce() {
this._debouncer = Polymer.Debouncer.debounce(this._debouncer, Polymer.Async.timeOut.after(5000), () => {
this.getResponse();
});
}
getResponse() {
console.log('get resp');
}
What is necessary to get getResponse to run once upon the loading of the element?
Are you sure you want to use a debouncer for that? you could just use the connectedCallBack to get a one Time Event
class DemoElement extends HTMLElement {
constructor() {
super();
this.callStack = 'constructor->';
}
connectedCallback() {
this.callStack += 'connectedCallback';
console.log('rendered');
fetch(this.fakeAjax()).then((response) => {
// can't do real ajax request here so we fake it... normally you would do
// something like this.innerHTML = response.text();
// not that "rendered" get console logged before "fetch done"
this.innerHTML = `
<p>${this.callStack}</p>
<p>${response.statusText}</p>
`;
console.log('fetch done');
}).catch(function(err) {
console.log(err); // Error :(
});
}
fakeAjax() {
return window.URL.createObjectURL(new Blob(['empty']));
};
}
customElements.define('demo-element', DemoElement);
<demo-element></demo-element>
If you really need to use an observer you could also set a flag this.isLoaded in your connectedCallback() and check for that in your observer code.

Redux saga: yield put not working inside nested callback

const { payload: {loginType, email, password, notification, self} } = action;
console.log("--TRY--");
Firebase.login(loginType, { email, password })
.catch(function(result) {
const message =
result && result.message ? result.message : 'Sorry Some error occurs';
notification('error', message);
self.setState({
confirmLoading: false
});
isError = true;
})
.then(function(result) {
if (isError) {
return;
}
if (!result || result.message) {
const message =
result && result.message
? result.message
: 'Sorry Some error occurs';
notification('error', message);
self.setState({
confirmLoading: false
});
} else {
self.setState({
visible: false,
confirmLoading: false
});
console.log("--RIGHT BEFORE I CHECK AUTH STATE--");
//the following does NOT fire
firebaseAuth().onAuthStateChanged(function*(user) {
console.log("THE GENERATOR RUNS");
if (user) {
console.log(user);
yield put({
type: actions.LOGIN_SUCCESS,
token: 'secret token',
profile: 'Profile'
});
yield put(push('/dashboard'));
}
else {
yield put({ type: actions.LOGIN_ERROR });
}
});
}
}); });
Hi. I'm currently working with redux saga for the first time. I've been trying to get yield put to fire in the callback of the firebaseAuth().onAuthStateChanged listener. The yield keyword won't work in a function that is not an ES6 generator, so I added an asterisk to the callback but now it won't execute at all. Would really appreciate any advice on the matter.
As you noticed, redux-saga effects can only be used within a generator function, and you cannot use a generator function as a regular function: calling a generator function only returns a special object.
The right way to approach this is to use an eventChannel: it lets you connect your saga to a source of events external to the redux ecosystem.
First create your eventChannel using the provided factory function: it hands you an emit function that you can use to emit events; then consume these events using the take effect.
import { eventChannel } from 'redux-saga';
import { cancelled, take } from 'redux-saga/effects';
// first create your eventChannel
const authEventsChannel = eventChannel( emit => {
const unsubscribe = firebaseAuth().onAuthStateChanged( user => {
emit({ user });
});
// return a function that can be used to unregister listeners when the saga is cancelled
return unsubscribe;
});
// then monitor those events in your saga
try {
while (true) {
const { user } = yield take (authEventsChannel);
// handle auth state
}
} finally {
// unregister listener if the saga was cancelled
if (yield cancelled()) authEventsChannel.close();
}

Chrome.storage.sync.get() seems to be duplicating keys?

I am saving some settings using the following sequence
var getSettings = async function() {
var settings;
try {
settings = await authenticatedGET(server_url + SETTINGS_ENDPOINT);
return settings;
} catch (error) {
console.log("Settings Fetch Failed: " + error);
throw new Error(error);
}
}
const setLocalSettings = function(settings) {
chrome.storage.sync.set({ 'LML_Settings': JSON.parse(settings) }, function() {
console.log("Settings saved locally");
});
}
At the line right after the setLocalSettings function definition, the 'settings' object logs out as
{"email_format":"individual","close_tab":true,"frequency":"DAILY"} (correctly as intended). When I go to fetch the settings using this sequence:
chrome.storage.sync.get('LML_Settings', function(LMLSettingsContainer) {
console.log(LMLSettingsContainer);
if (LMLSettingsContainer.LML_settings.close_tab == "true") {
closeCurrentTab();
}
})
LMLSettingsContainer logs out as
{
"LML_Settings": {
"close_tab": true,
"email_format": "individual",
"frequency": "DAILY"
}
}
accessing my settings with LMLSettingsContainer.LML_Settings["<setting>"] is a bit annoying (and its the whole reason I named the top variable LMLSettingsContainer).
Does anyone know if there's a way to have chrome save/get these values unwrapped?
chrome.storage.sync.get('LML_Settings', ({LML_settings}) => { ... }) works, per #wOxxOm

Running a function onclick with a JSON file

So I'm trying to have a function run when i click on an image. It works with a normal image, but i'm getting the images from a reddit JSON file. I need the images to resize separately and I can't figure out how. It's probably something simple, but i'm still new to coding, so any help would be great.
$.getJSON("http://www.reddit.com/r/pcmasterrace/.json?jsonp=?", function (data) {
$.each(data.data.children, function (i, item) {
IsValidImageUrl(item.data.url, function (url, isvalid) {
if (isvalid) {
$('<img/>').attr('src', item.data.url)
.appendTo('#images')
.width(500)
.onclick = function() {Resize()};
}
});
});
});
Is the function right?
function Resize() {
if (document.getElementById('<img/>').style.width === "500px") {
document.getElementById('<img/>').style.width = "1000px";
} else {
document.getElementById('<img/>').style.width = "500px";
}
}
I think the ('<img/>') might be wrong. I tested it with ('test') and it worked, so do i need it to be something different? It worked with my test function so the .click worked so i think it's trying to change the wrong thing.
onclick is a property of DOM elements, not jQuery objects. You should use the click() function to add a click handler.
.getJSON("http://www.reddit.com/r/pcmasterrace/.json?jsonp=?", function (data) {
$.each(data.data.children, function (i, item) {
IsValidImageUrl(item.data.url, function (url, isvalid) {
if (isvalid) {
$('<img/>').attr('src', item.data.url)
.appendTo('#images')
.width(500)
.click(function() {Resize(this)});
}
});
});
});
Your Resize function should take an argument telling it which image to change:
function Resize(image) {
if (image.style.width == "500px") {
image.style.width = "1000px";
} else {
image.style.width = "500px";
}
}