We Keep Coding

How do I send keystrokes to Firefox using Test::WWW::Selenium?

I have tried:
$sel->type_keys_ok("//fieldset[2]/input", "KEYS");
No results. Nothing changed.
Also tried:
$sel->send_keys_ok("//fieldset[2]/input", "KEYS");
Not implemented.
Tried also:
my $res = $sel->get_eval('
function simulateKeyEvent(character) {
var evt = document.createEvent("KeyboardEvent");
(evt.initKeyEvent || evt.initKeyboardEvent)("keypress", true, true, window,
0, 0, 0, 0,
0, character.charCodeAt(0))
var canceled = !body.dispatchEvent(evt);
if(canceled) {
// A handler called preventDefault
alert("canceled");
} else {
// None of the handlers called preventDefault
alert("not canceled");
}
};
simulateKeyEvent("K");' );
Then I got this ERROR: 'initKeyEvent' called on an object that does not implement interface KeyboardEvent. Thanks.

version 1:
my $element = $sel->find_element("//input[\#name='q']");
$element->send_keys("KEYS");
$element->submit();
version 2 using WDKeys:
use Selenium::Remote::WDKeys;
my $element = $sel->find_element("//input[\#name='q']");
$element->send_keys("KEYS");
$sel->send_keys_to_active_element(KEYS->{'enter'});
for more information look at CPAN Selenium::Remote::Driver

How to click on selectbox options using PhantomJS

There is the page testkrok.org.ua with a consistent selection of parameters. So, I need to create a series of 5 clicks on each of the options of 5 select boxes that depend on each other.
document.querySelector('select.se1')[3]
document.querySelector('select.se2')[1]
document.querySelector('select.se3')[1]
document.querySelector('select.se4')[1]
document.querySelector('select.se5')[3]
to redirect to the page with tests.
But on snapshot taken after the first click the second panel does not appear?
Maybe I don't hit the the element?
var page = require('webpage').create();
page.open('https://testkrok.org.ua', function(status) {
console.log("Status: " + status);
if(status === "success") {
page.evaluate(function() {
var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.querySelector('select.se1')[3];
element.dispatchEvent(theEvent);
});
}
setTimeout( function() {
page.render('snapshot.png');
phantom.exit()
}, 5000);
});

You can't click (trigger a click event) on options of a select box. You need to change the selected option and then trigger a change event. For example:
var sel = document.querySelector('select.se1');
sel.selectedIndex = 2;
var event = new UIEvent("change", {
"view": window,
"bubbles": true,
"cancelable": true
});
sel.dispatchEvent(event);
You can package that in a function
function selectOption(selector, optionIndex) {
page.evaluate(function(selector, optionIndex){
var sel = document.querySelector(selector);
sel.selectedIndex = optionIndex;
var event = new UIEvent("change", {
"view": window,
"bubbles": true,
"cancelable": true
});
sel.dispatchEvent(event);
}, selector, optionIndex);
}
Then you can call it one after the other
selectOption("select.se1", 2);
selectOption("select.se2", 0);
selectOption("select.se3", 0);
...
You get the idea. In case the onChange event of the select box needs remote data for example through AJAX, then you will need to wait between the calls. Either use a static wait time (see following example) or use waitFor().
setTimeout(function(){
selectOption("select.se1", 2);
}, 1000);
setTimeout(function(){
selectOption("select.se2", 0);
}, 2000);
setTimeout(function(){
selectOption("select.se3", 0);
}, 3000);
...

How to go to the next page for scraping in PhantomJS

I'm trying to get several elements from a website with several pages. I'm currently using PhantomJS to do that work and my code almost works, but the issue is that my code scrapes twice the first page even if (according to the log) it seems that I already moved to the second one.
Here's the code:
var page = require('webpage').create();
page.viewportSize = { width: 1061, height: 1000 }; //To specify the window size
page.open("website", function () {
function fetch_names(){
var name = page.evaluate(function () {
return [].map.call(document.querySelectorAll('div.pepitesteasermain h2 a'), function(name){
return name.getAttribute('href');
});
});
console.log(name.join('\n'));
page.render('1.png');
window.setTimeout(function (){
goto_next_page();
}, 5000);
}
function goto_next_page(){
page.evaluate(function () {
var a = document.querySelector('#block-system-main .next a');
var e = document.createEvent('MouseEvents');
e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
waitforload = true;
});
fetch_names();
}
fetch_names();
});
You can try it by yourself to understand how all of that work.

You need to wait for the page to load after you click and not before you click by moving setTimeout() from fetch_names to goto_next_page:
function fetch_names(){
var name = page.evaluate(function () {
return [].map.call(document.querySelectorAll('div.pepitesteasermain h2 a'), function(name){
return name.getAttribute('href');
});
});
console.log(name.join('\n'));
page.render('1.png');
goto_next_page();
}
function goto_next_page(){
page.evaluate(function () {
var a = document.querySelector('#block-system-main .next a');
var e = document.createEvent('MouseEvents');
e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
waitforload = true;
});
window.setTimeout(function (){
fetch_names();
}, 5000);
}
Note that there are many more ways to wait for something other than the static timeout. Instead, you can
register to the page.onLoadFinished event:
page.onLoadFinished = fetch_names;
wait for a specific selector to appear with the waitFor() function from the examples.

Simulate a click on 'a' element using javascript/jquery

I am trying to simulate a click on on an element.
HTML for the same is as follows
<a id="gift-close" href="javascript:void(0)" class="cart-mask-close p-abs" onclick="_gaq.push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_x_button-inaction']);" rel="coupon"> </a>
How can i simulate a click on it. I have tried
document.getElementById("gift-close").click();
But its not doing anything

Using jQuery: $('#gift-close').trigger('click');
Using JavaScript: document.getElementById('gift-close').click();

Using jQuery:
$('#gift-close').click();

Try to use document.createEvent described here https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
The code for function that simulates click should look something like this:
function simulateClick() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var a = document.getElementById("gift-close");
a.dispatchEvent(evt);
}

The code you've already tried:
document.getElementById("gift-close").click();
...should work as long as the element actually exists in the DOM at the time you run it. Some possible ways to ensure that include:
Run your code from an onload handler for the window. http://jsfiddle.net/LKNYg/
Run your code from a document ready handler if you're using jQuery. http://jsfiddle.net/LKNYg/1/
Put the code in a script block that is after the element in the source html.
So:
$(document).ready(function() {
document.getElementById("gift-close").click();
// OR
$("#gift-close")[0].click();
});

Code snippet underneath!
Please take a look at these documentations and examples at MDN, and you will find your answer. This is the propper way to do it I would say.
Creating and triggering events
Dispatch Event (example)
Taken from the 'Dispatch Event (example)'-HTML-link (simulate click):
function simulateClick() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById("checkbox");
var canceled = !cb.dispatchEvent(evt);
if(canceled) {
// A handler called preventDefault
alert("canceled");
} else {
// None of the handlers called preventDefault
alert("not canceled");
}
}
This is how I would do it (2017 ..) :
Simply using MouseEvent.
function simulateClick() {
var evt = new MouseEvent("click");
var cb = document.getElementById("checkbox");
var canceled = !cb.dispatchEvent(evt);
if (canceled) {
// A handler called preventDefault
console.log("canceled");
} else {
// None of the handlers called preventDefault
console.log("not canceled");
}
}
document.getElementById("button").onclick = evt => {
simulateClick()
}
function simulateClick() {
var evt = new MouseEvent("click");
var cb = document.getElementById("checkbox");
var canceled = !cb.dispatchEvent(evt);
if (canceled) {
// A handler called preventDefault
console.log("canceled");
} else {
// None of the handlers called preventDefault
console.log("not canceled");
}
}
<input type="checkbox" id="checkbox">
<br>
<br>
<button id="button">Check it out, or not</button>

Use this code to click:
$("#gift-close").click();

Try adding a function inside the click() method.
$('#gift-close').click(function(){
//do something here
});
It worked for me with a function assigned inside the click() method rather than keeping it empty.

Here, try this one:
$('#gift-close').on('click', function () {
_gaq.push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_x_button-inaction']);
});

How to make a click over a button inside a dynamically loaded iframe

The title say it all. I am working with a iframe whose the only thing I know is part of their src attribute. Until now I can reach the target element (an anchor) by their (known) id:
var f = $('iframe[src^="url"]', newTabBrowser.contentDocument);
if ( ! f.length)
return;
var b = f.contents().find('#button');
if ( ! b.length)
return;
At this point I have the desired anchor element into the jQuery variable b, but I can't click it. The anchor is like this:
I have tried:
b.click();
and:
simulateClick(b);
function simulateClick(elm) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var canceled = !elm.dispatchEvent(evt);
if(canceled) {
return false;
} else {
return true;
}
}
None of both works. Any idea about how to proceed or another technique to try?
OBS: This is part of a FF addon. That's why I use newTabBrowser.contentDocument

Does this work for you:
$(document).ready(function() {
var frame = $('#iframeID').get(0).contentDocument;
$('#button', frame).click(function() {
alert("Clicked me..!");
});
});
Hope it helps in some sense.