I am trying to trigger a click event on a element but the click does not get triggered if i do not use it inside page.evaluate.
so, this works
await page.evaluate(async () => {
$('#myExport').click();
});
but, this does not work
await page.click('#myExport')
I am new to Node.js and any help in
1) clarifying as to whats the difference between these two approaches
2) when should one be preferred over the other would be really great.
3) Why does click work inside page.evaluate and not the other way
Thanks.
The evaluate function will execute the click() function defined on your selector in the browser context. The evaluate works the same way as if someone opened the browser console and typed a command.
The puppeter page.click() function will move the mouse over the center of the selector provided and then perform the mouse.down() followed by the mouse.up() actions. Bear in mind that if it doesn't find a matching selector, the page.click() will throw an error, and if it has to scroll the page, it will trigger an navigation and thus it may have unexpected behavior.
You can solve the problem using the following code, I expect.
await Promise.all([
page.waitForNavigation(waitOptions),
page.click(selector, clickOptions),
]);
Further information can be gathered on the api documentation:
How the evaluation on puppeteer works
How the page.click() works
Related
TypeError: elem[prop] is not a function
E2E testing in webdriveio. I want to click a button inside an iframe.
let iframe = browser.$('#fullmessage')
browser.pause(1000)
browser.switchToFrame(iframe)
browser.setTimeout({ implicit: 10000 })
let clickAgree = $('a[class="button is-success"]')
clickAgree.click()
browser.switchToParentFrame()
browser.pause(3000)
I was facing same error and when debug more using REPL found that the issue could be due to 2 reasons:
selector is returning array of elements and so it was not able to call the method used.
the method being called on element does not supports.
For example with following code:
$('.some_class').$$('input').getValue();
was getting error - Uncaught Error: elem[prop] is not a function. Using $('.auto_test_class').$$('input')[1].getValue(); works. But its better to use some Id or xpath.
Hope this might be useful for someone facing same issue :)
Hi i faced with the same problem, but in async. The reason is that you need
to await already defined element as parameter:
get iframe() { return $('.iframe'); }
await browser.switchToFrame(await this.iframe);
Because switchToFrame works only with element, not with promise.
Maybe for someone it will be useful.
I'm experiencing a very strange bug using testcafe. On one of my websites I'm not able to select div-elements but I'm still able to select other elements. So
await t.click(Selector("span").withAttribute('id', 'foo'));
await t.click(Selector("p").withAttribute('id', 'foo'));
await t.click(Selector("button").withAttribute('id', 'foo'));
await t.click(Selector("input").withAttribute('id', 'foo'));
works fine while
await t.click(Selector("div").withAttribute('id', 'foo'));
will throw the following error:
Function that specifies a selector can only return a DOM node, an
array of nodes, NodeList, HTMLCollection, null or undefined. Use
ClientFunction to return other values.
This only happens on one specific website of mine. What could this be? What could I have possibly done in my script to prohibit the testcafe selector to get "div" elements? Really out of ideas right now.
This issue can occur if you pass a function with an incorrect return value as a Selector argument:
test('Return non-DOM node', async () => {
await Selector(() => 'hey')();
});
However, the error should not occur if you use string as a parameter to specify your selector. Please check that you do not pass a function to your Selector object.
If your Selector is defined correctly and the issue still appears, please share the example (html page or public url to your site) and your full test code to demonstrate the issue.
In the Meteor forums I read that it is suggested to put Meteor.logoutOtherClients inside Accounts.onLogin(). Although this works, there is a problem to it, and that is the Accounts.onLogin() gets called multiple times when there are multiple TABS (not browsers) opened. Is this the expected output?
Here is my code below:
Accounts.onLogin(() => {
console.log('onLogin called')
Meteor.logoutOtherClients((error) => {
if (error) {
console.log(`error: ${error.error}`)
}
})
// Some Meteor Method calls here
alert('Welcome User!')
})
Another problem is that I got method calls in the same Accounts.onLogin() block and it gets called every time.
meteor#1.4.2.6
accounts-base#1.2.17
Question
How should I prevent this infinite calls from happening?
If I can't prevent this, where should I dispatch method calls when user logs in? Because obviously if I put it inside this code block it causes the dispatches to get called infinitely and that alert gets fired infinitely.
You can also see the details reported here: https://github.com/meteor/meteor/issues/8669
This is a confirmed bug #8669. So my workaround is I created a manual token for the user instead of using the default from accounts-base. I also handled the checking manually so basically getting rid of "magic" Meteor offers.
I am developing my first Javascript app and I am trying to go object oriented.
There is a basic closure that returns my primary object and every function I invoke rests in that object. Some pseudo code would look like this:
primary = (function(){
var object = {
doSomething = function(){};
},
return {intance:function(return object)}
});
//invocation
primary.instance().doSomething();
What I am trying to achieve is to attach an error handler function to my object, so that whenever there is an internal error, it is cought, and I don't have to wrap every function call in a try catch block.
I tried object.onerrorbut the error went on to window object. Maybe I am getting the concept wrong. I tried searching on Github for some simpler framework that includes structured error handling, but no luck. I am pretty familiar with this in PHP, but I haven't done this so far in Javascript. Can somebody show me an example how it is done right?
EDIT: I know that structured error handling goes further, I am just trying to get a root handler, so that no errors / exceptions can pass on to the window object
Dealing with the error event without a try catch block will halt the execution of your script (except for any asynchronous functions that have already been called).
You can suppress (non-ajax, non-syntax) errors by capturing them on document.body or a more specific object, and stop them being thrown to the user (or reaching the window object) by using e.preventDefault() or return false, and send them to a global/object handler (to inspect or log) by passing the event object as an argument - but any of those options will stop your script execution beyond the point of error. That's the main benefit of a try catch block, and as far as I know there is no way around that.
In my Firefox extension, I create a popup menu dynamically. Originally, I used this line on each menu item:
menuFunc.setAttribute("oncommand","MainExtension.MyPlugin." + functionName + "();");
where functionName is a string with the name of the function to be called for that menu item. This worked fine. When I uploaded my extension to the Mozilla Addons page, the automated code validation program flagged this line and said that using setAttribute to set oncommand in this way was not secure and that addEventListener should be used instead. I switched to this syntax:
menuFunc.addEventListener("oncommand",function() {MainExtension.MyPlugin[functionName]},false);
but now nothing happens when I click on a menu item.
Is my syntax off or is there something else wrong? I don't think the problem is the common 'this' reference error. I tried removing all uses of 'this' from one of the functions and it still did not work. It seems like the functions are not being called at all. No errors are being generated either.
Update:
The command action is attached using just command, not oncommand:
menuFunc.addEventListener("command", MainExtension.MyPlugin[functionName], false);
You should be able to just do:
menuFunc.oncommand = MainExtension.MyPlugin[functionName];
Just a guess: Does it help to use true instead of false as the third parameter in order to capture the event?